Showcase Theme

Settings

Some features only apply to Showcase themes published after December 2015
(v. 1.3.0 or higher)
.

Presets

For a quick way to get started with your Showcase theme settings, select a preset matching one of our four demo stores. Applying a preset to your theme will overwrite your current theme settings.

Colors

Choose colors for your text, backgrounds, drop downs, navigation and social media icons.

The content background and modal / popup window background include an option for transparency so that you can still see the page behind. 

Please note an entirely "transparent" color selection is not supported for background colors.

Backgrounds

Images are at the heart of the Showcase theme design. The backgrounds section of the theme settings offers you flexibility so you can choose when and where to show background images across your store. 

The default background image is shown on pages where no other background image has been set. If you don't select this option then the background color selected in Colors Page background will be used. 

Specific background images

Use these settings to choose specific background images for the home page, collection and search pages, blogs and articles, cart page, customer account pages and all other pages excluding the checkout. The checkout page is managed by Shopify. Background options for product pages are managed in the product page settings.

We've used different background images on the blog, customer account and general pages in our Betty demo store.

Mobile

Show background images on pages other than the home page - Large detailed backgrounds don't always work well on small screens so we've included the option to switch off background images for all pages other than the home page on mobile devices. 

There is also the option to move the product page background below the header on smaller screens to improve legibility. This can be useful to change the layout both when using a plain colored background or an image set in Product page → Use image as page background.

Advanced: Collection-specific backgrounds

These settings provide the ability to use a different image for each collection page.

In summary, you have three choices for the background of a collection page.

1. Use the same background you have everywhere else. 

Use this option if you do not need to give your collection page special treatment. Simply un-check the option Backgrounds → Specific background images → Collection and search pages.

2. Use one image on all of your collection pages.

Select the option Backgrounds → Specific background images → Collection and search pages and upload the image you want to use beside that checkbox.

3. Use a different background for each collection page.

Select both the box Backgrounds → Specific background images → Collection and search pages AND the box Backgrounds → Advanced: handle-specific collection backgrounds → Use a different image for each collection page. Then upload your jpg images via the Admin → Settings → Files page. 

The name of the file controls where the background will show. You will need to change the name of the file to link it to the collection before you upload it. The name of the file must be the word 'collection', followed by a hyphen '-', followed by the word 'header', followed by one more hyphen, followed by the handle of the collection. That's 'collection-header-[handle].jpg'. The name must be in lowercase. The image must be a jpg file.

Here's an example:

I have a collection named "Apples and Pears". The handle of this collection is "apples-and-pears". I get my huge image of an orchard and name the file "collection-header-apples-and-pears.jpg". I upload this file using Admin → Settings → Files, and it magically shows on the collection page.

Please note, you will need to do this for every collection on your store, including the standard Shopify "all" collection (/collections/all) to avoid missing-file errors.

Typography

Customize text in your store by choosing from 24 hand-selected fonts. Set font sizes for the base font, navigation and sub-navigation.

Navigation

These settings control the navigation that appears in the modal window when you click on the menu.

Choose to show all submenu links on a single page if your menu is fairly short as in our Betty demo store or, place sub navigation links on a separate modal pages as shown in our Luna and Native demo stores.

In the Showcase theme you can use collection featured images to display in the navigation as in our Native demo store.  Furthermore, you can even show these images split across multiple columns, as shown in the "Featured" menu in our Luna demo store

Select show collection images to show the collection featured image in the menu. For consistency, if you are going to use collection images in your navigation, we suggest making sure they are all the same size. We used images 230px x 150px in our Luna demo store.

Tip: How to add columns to your navigation.

To add columns to your navigation menu you'll need to edit the name of the menu link back in the basic Navigation settings for your online store. To determine how many columns show in your navigation, add the text COLS-TWO, COLS-THREE or COLS-FOUR to your menu name.

Please note, it is important that the handle of the menu does not include the 'COLS-THREE'. Only add the COLS- in capitals to the title/name.

Another tip to note is that when adding a 'parent' link in your navigation, make it into a blind link using the option "webaddress" and a hashtag (#).

Header

Select the option enable fixed header if you wish the menu bar to remain visible as you scroll down the page.

Choose to use a logo image. If none is selected the store name will be used. Select whether to show the header logo on the home page.  

Enter your logo width in pixels. If you have a high resolution/retina image, entering half of the actual image pixel size here will ensure your logo shows super sharp on high resolution displays. For example, you might have a 100x50px logo and also have a larger 200x100px version for high resolution screens. In this case, you would upload only the larger image, and enter 100 in this logo width input to shrink it down to size.

Choose the icon size for the menu icons in the navigation bar to suit your store.

Home page

Choose your preferred home page content from a featured image, text or page content. Alternatively you can display your preferred selection of featured products or collections.

If you only want to show your homepage background image (set in Customize Theme → Backgrounds) select none. Add a link which will apply when clicking anywhere on the home page. 

Tip: Should you wish to link to the main menu enter the link URL #page-menu or to show the search use #search-modal.

The welcome text can be edited in the homepage tab of the Shopify Language Editor found under Customize Theme → Theme Options → Edit language.

Looking for royalty free stock photos? Try here:

Stock Images

If you have chosen to show a featured image on the homepage, upload it here. Select the appropriate image width and add in a link

Add in heading and subheading text and choose your preferred text size. Add in a link if required.

Show page content on your home page, set the content width and background

To display products on your homepage, choose a collection. The layout settings are taken from your choices in Customize theme Collection page.

This option allows you to display up to 12 collections from your store. Choose from a collage or grid layout and set the number of collections per row. The featured image from the collection will be displayed, or if none exists, the first product image from the collection will be shown.

Product page

Background

Background images can also be used on the product page. Selecting the right background image can be tricky so we've included a number of options to offer maximum flexibility. 

Firstly, choose whether to use a product image as the page background.  If this option is not selected the product image will show next to the product information panel and the page background will be taken from Backgrounds  → default background image or page background color.

Secondly, determine which image to feature - the product featured image, second image, or your choice which can be specified by adding the alt text 'background' to the product image.  

Product information panel

Tip:Determine which side of the page to show the product information panel. The default layout is on the left, but if this doesn't suit your background image, you can choose to show the panel on the right or in the middle, by adding the tag meta-layout-right or meta-layout-middle to the product concernedNote that this will also change the position of the sale label on the collection page. Our Native demo store illustrates these layout options.

Choose whether to show the vendor and type from the product record. These are displayed at the top of the product information panel. If both are shown, a forward slash ( "/" ) will be used to separate the vendor and product type information. Show quantity input if you would like customers to be able to edit the quantity before adding to cart.

The Showcase theme allows some product options to be shown as boxes instead of dropdowns. Separate the option names with commas e.g. Size, size, Color.  The feature is case sensitive so please ensure the list matches the product options exactly. 

A popup will be used to show the product description unless the show full product description, without popup option is selected. 

Tip: It is also possible to show a short snippet of text under the product title, whilst keeping the main description in the popup. This is demonstrated on our Beard demo store. This "aside" text can be added by clicking the 'View HTML' button in the product description editor and adding the snippet of text inside <aside> ... </aside> tags, right at the top.

Tip: For a link to popup content from the product information panel, add a product tag 'meta-link-handle', where handle is the handle of the page you want to show e.g. meta-link-size-chart.

Adding to cart

Choose your preferred behaviour for adding to cart. The options are to stay on the same page, show a modal window or go directly to the cart page.  Select page if you are using an app which requires Ajax to be disabled. Please note the modal option is not shown when viewing the theme through the Theme Editor.

Gallery

The gallery is activated when you click on the product image underneath the cart button. Choose to crop the gallery link image if you have portrait images which don't fit nicely. Select whether to show the gallery when there is only one image.

Collection page

Choose whether to show the content background color behind title and description. This setting can be useful to make the text more legible when using a background image.

Select whether to show tag filters and the sorting dropdown. The 'Featured' option in sorting dropdown is the manual sort order, so select this only if you are sorting your collections manually.

Choose from an on hover or under image title and price layout

Select a grid or collage product layout and set the number of products per row and products per page. The theme includes the option to enable infinite-scroll rather than traditional pagination if required.

Tip: An added feature is the ability to change the size of the product image used on the collection page. This is useful if you find an image doesn't fill its column nicely. Add the tag meta-image-1024x1024 to the product. You can replace the '1024x1024' with another one of Shopify's fixed image sizes.

Blog page

Select enable full-width blog images if you wish images within blog articles to be displayed at full width. Please note, the featured image from the blog will always be full width.

To show the blog featured image on the blog article page as well as the blog overview page select show featured image on article page.

Cart page

Determine what should happen when a customer adds a product to the cart using the cart type. Choose to stay on the same page, go straight to the cart page, or show an overlay modal window. Please note the modal option is not shown when viewing your theme from within the Theme Editor.

Select whether to show a terms and conditions checkbox and link. Should you wish customers to be able to add a note to their order, check the option enable order notes.

Social media

Use this section to manage social media links and Twitter cards. 

Currency

The theme includes Shopify's multi-currency functionality - link to Shopify's plugin page. Be sure to configure your money formats following these instructions.

 

Continue shopping
Your Order

You have no items in your cart