Showcase theme support

Animations, product labels, theme styles, social media and more

Animations

Inside your theme editor area, under Theme settings > Animations, you will find options relating to Showcase’s stylish loading screen. This loading screen is shown before displaying a linked page’s full content.

Please keep in mind this feature is only present in version 4.1.0 onwards. Be sure to check out the Showcase theme changelog for a complete list of all features applied to current and previous theme releases.

To see things in action and to set this up on your own store, you can watch our video guide or step-by-step guide below.

Video guide

Step-by-step guide

  1. Head over to Admin > Online Store > Customise
  2. Click Theme Settings and open the Animations section
  3. Click to enable loading screen on desktop and/or mobile
  4. Upload your image and choose the image width, text size and animation type
  5. Once done, be sure to click “Save”

Product labels

The Showcase theme supports product labels on the homepage and collection pages. This is the “Sold Out” and “Sale” text you can see in the product images below (other options include “New” and “Pre-order” not shown in our example):

There is only space for one product label to show at a time, so there is a priority scale in terms of triggering which of these are shown. The priority levels, with 1 being the highest priority, are as follows:

    1. Sold out – shows when Shopify manages the inventory and customers cannot purchase out of stock items.
    2. Sale – shows if a product’s compare at price is set higher than its actual price.
    3. X left in stock – only for items with a single variant.
    4. New In – shown for new products.
If the ‘Sold out’ label is shown, this takes priority over all other labels.

“New in”

The theme can determine if a product is ‘New In’ in one of three ways:

    1. Collection – will show when a product is in a collection with ‘new’ in the handle.
    2. Tag – add the tag ‘New’ to the product.
    3. Date – choose the number of days ago that the product was created.

You can find these settings in your theme editor: Head over to Admin > Online Store > Customise > Open Theme Settings -> Open Products and scroll to the section for ‘Product labels’.

“Sale”

This is triggered when you have set up a “compare at” price for your product. A product’s “compare at” price must be higher than its actual price.

More information can be found here: Shopify’s guide to setting up a “Compare at” price.

“Sold out”

Shows when your products have been set to be managed by Shopify inventory and customers are prevented from purchasing out of stock items.

More information can be found here: Shopify’s guide to setting up inventory management

“X left in stock”

This applies only for items with a single variant and can be toggled on/off in your product page settings.

 

Quick buy

A Quick Buy button is displayed when you hover over product images on the homepage and collection page. Once the button is clicked, it opens up a pop-up featuring a condensed version of your full product page and allows customers to buy directly from this pop-up, without ever having to venture through to the full product page.

To enable this feature, head to Admin > Online store > Customise theme > Theme settings > Products > Click to Enable quick-buy.

Product preview videos

To show an MP4 preview video for your products go to Admin > Online store > Customise theme > Theme settings > Products > Click to Show preview video.

For more information on how this works, watch our video guide linked below:

Theme styles

The Showcase theme is available in 4 styles – BeardBettyLuna and Native. These demonstration stores aim to illustrate the variety of looks possible with the theme. The style settings will affect cross store elements such as your fonts, cart behaviour and social media icons. Changing your theme’s style (or preset), is controlled by the Shopify admin area and works in the same way for all themes. Here’s how to do this:

  1. Admin > Online Store > Themes > Customise
  2. Theme settings (shown in the bottom left)
  3. In the new menu, click to expand the “theme style” option
  4. Choose a style from your theme’s options
  5. Click “Change style” to confirm

Changing styles only changes colours and fonts (typography). Your homepage layout, and page-specific settings, are elements that will need to be set up by you manually using the theme customisation area. This is a platform-wide process, and is the same for all themes.

Here’s Shopify’s guide relating to theme styles.

Applying a theme style will overwrite any existing settings in your Theme Settings.
However, your section specific settings won’t be affected. More information about theme styles can be found in the above Shopify article.

Social media

Add links to your social media pages under Admin > Online store > Customise theme > Theme settings > Social Media. If you wish to link to a social network that isn’t listed, then you can add your own icon using the custom link option. Links can be shown in the footer in a text block. To add your links, simply choose a text block and select ‘Show social media links’.

Did you find this article helpful?