Important Note: Much of the information on this page is outdated and will not apply to current versions of ShowTime. Please see our support knowledgebase for the most recent documentation.

General info & Installation

Welcome!

Thank you very much for your interest in the ShowTime theme! If you've already purchased the theme, we really appreciate your business and support. If you've just come to see what the theme has to offer, we're confident that you'll be pleased with all the great features we've built into it. Check out the Theme Features page on the demo store to learn more.

Our documentation is meant to be as user-friendly as possible. Please use the navigation up top to get around. It may all seem daunting, but we've covered everything thoroughly and also have some video tutorials that should make things easier for you. If you get stuck, you can check out our extensive knowledgebase and FAQ sections for answers to common questions, or submit a support request. Thanks again for your interest and we hope you enjoy the theme!

Theme Installation

If you purchased from the Shopify Theme Store

When you complete your theme purchase at the Shopify Theme Store, the theme is generally installed for you automatically. You can navigate to the Themes section of your Shopify dashboard to verify this. If ShowTime is not listed as the active theme, scroll down and see if it's inactive. If so, you can activate it and continue.

If you purchased directly from us and already have a Shopify store setup

If you purchased the theme directly from our site and already have a store setup on Shopify, simply login to your admin area and click Themes in the left navigation menu. From there, click Upload a theme in the upper-right corner of the screen. A window will appear. Click the Browse button and navigate to the showtime.zip that you downloaded from our site.

Once the file finishes uploading, the ShowTime theme will show up as an unpublished theme. To activate it, click the Publish button. A new window will appear asking if you want to replace your current theme. Don't worry! Your old theme will not be deleted, it will just be set as inactive. Click the Publish button to continue.

The theme is now installed and ready for use!

If you do not have a Shopify store setup or you only have a free trial

If you don't already have a Shopify store setup or are on a free trial, your best bet is to contact us after you've purchased your theme and we can setup a new account for you. The benefit of going this route is that there is no set time limit to your trial and you don't have to pay any monthly fees until you're ready to launch your store. If desired, we'll also install the theme for you and help you get setup free of charge! If you'd like to take advantage of this, contact us to get started.

Language Support

Shopify has added a new feature to all of their stores -- international language support. And guess what? The ShowTime theme fully supports it!

What is it?

Basically, it's an easy way for shop owners to translate the content of their store into other languages. There is a new section in the Shopify dashboard where you can edit translations for a wide variety of text and HTML blocks throughout your store. By simply entering text in various text boxes, you can make it much easier for international customers to navigate your store.

How do I get to it?

To access your language settings, click the Themes link in the left hand menu of your Shopify dashboard. If ShowTime is enabled, click the button with the three dots in the upper-right corner of your screen and choose Edit language (see screenshot to the right).

You will then be presented with a user-friendly interface to edit your language settings. The theme has built in support for English and French languages. You can add more languages if you'd like, but this functionality is beyond the scope of the this documentation. Keep an eye on the Shopify documentation for an article on how to do this.

Editing the Settings

Editing the settings is as straightforward as typing into each of the textboxes. There are tabs at the top of the screen that allow you to access translations for different areas of your store.

Integration with ShowTime Theme

The majority of the translations in this area won't require any editing on your part. However, you can use this area to setup custom titles for various sections of your site. We use this area mainly for titling sidebar widgets, product tabs, and some section headings throughout the site. If you're expecting to find title settings for a particular area, this is a good place to look. We've provided notes in the other sections of this documentation when you'll need to make changes in this area.

Theme Settings & Presets

Once you’ve finished installing the theme, it’s time to start customizing. To access the Theme Settings, simply click the Themes link in the left-hand navigation in your Shopify dashboard, then click the Customize theme button in the upper right-hand corner.

Theme Presets

When you first access your theme settings, you might notice Theme Presets on the left side of the page. The Showtime theme comes with three distinct presets . These presets are designed to help you get up and running with the theme quickly for various product lines. The three presets are CookTime, FurnishTime, and FashionTime. Click on those links to view demos of each.

So what exactly do presets do? They essentially fill in many of the theme settings for you to help you lay out your store similarly to how the demos are laid out. The FurnishTime preset has a muted green and brown color scheme that looks great as a furniture store. The FashionTime preset has a pink color scheme with different font treatments. It is designed to look great with fashion or clothing stores. Of course, you can always choose all the options yourself, these are just there as examples of what you can do with the theme. We worked hard to make sure the theme will work great for any product line!

How to Apply Presets

To access the presets, you'll see them in the Theme Settings area on the right-hand side. When you choose a preset, all the theme options will fill in for you automatically to match that particular preset. Obviously, you'll still need to go in and customize them to match your particular store, but they provide a great start by filling in color combinations and other options.

Global Settings

Global settings are options that will affect your entire site. This seems like a good place to start customizing your theme.

Let's explore these options.

Animation

Note: In version 3.5 of ShowTime, this setting has moved to the Colors section.

The ShowTime theme includes coding for CSS animations throughout the site. For example, some page elements slide or roll in, and other elements appear as you scroll down the page. You can enable or disable these animation effects using this setting. Animations can add some eye candy to your site at the expense of slightly longer load times. You'll want to consider your site's demographic and decide if you wish to enable them.

MailChimp Newsletter Support

Shopify has tight integration with MailChimp, which is an excellent service that allows you to create a mailing list and reach out to your customers. MailChimp has multiple pricing tiers, including one that is free and still offers a lot of functionality.

In various locations throughout the theme, you'll notice newsletter sign up forms. If you wish to use this functionality, you must provide your form action URL. This is a special URL that is custom to your MailChimp account. For instructions on how to find your form action URL, follow this link.

Currency Options

The ShowTime theme has the ability to display a currency selector at the top of your page. You can select which currencies to display and this allows your customers to see your products' prices in their home currency.

Let's briefly go through each option:

Show currency selector? - If enabled, a small drop-down menu will appear in the top-right corner of all of your pages allowing users to change the displayed currency.

Money format - this option determines whether or not the three-digit currency code will appear after all of the prices in your shop. Without Currency will display your prices with just the appropriate currency symbol and the price (e.g. $10.00). With Currency will display prices with the appropriate currency symbol and the three digit currency code (e.g. $10.00 USD).

Currencies you wish to support - Enter the three digit codes of all the currencies you wish to support in this box. They should be all upper-case and separated with a space. Visit this link to see a listing of all the supported currency codes. All the codes you enter here will show in the drop-down box at the top of all your store pages.

Default currency - This value should match the default currency you use in your store. It will be chosen in the drop-down as the default currency. You can set your store's default currency in the Shopify dashboard. To do so, click Settings, then General and scroll down to the Standards & formats section.

Show currency notice on cart page? - Although you will be able to display prices on your storefront in different currencies, Shopify will still process orders in your shop's default currency. If you wish to notify customers of this fact, check this checkbox and a brief message will appear in the cart. This should alert customers that the final total at checkout may be different than what they saw in their cart if they were viewing prices in their own local currency.

Once you've made your currency selections, there is one more step you must follow. From within your Shopify dashboard, navigate to Settings, then General and scroll down to the Standards & formats section. Make sure your chosen currency here matches your Default currency setting in your theme options, then click the change formatting link. You'll need to edit the text in the HTML with currency and HTML without currency text fields. For reference, checkout the screenshot below.

There is also a Shopify support document that explains this process. Check it out here.

Site Entry Popup

With the site entry popup, you can show a small popup window when a customer first visits your store. This is a great way to convince customers to sign up for your newsletter, engage with your store on social media, or for whatever purpose you choose. The popup will only display on the first page your customer visits, and will not show again to the same customer for the number of days you specify in the settings.

Let's take a look at the options.

Show popup when visit enters site? - This is pretty simple. Do you want the popup to display?

Delay before showing popup - Defines the number of seconds after the user visits your site that the popup will wait to display.

Duration before popup shows again - Definies the number of days before the same customer will see the popup box again when visiting your site.

Heading - This is the heading text that appears at the top of the popup window.

Text - This is a custom message that appears below the heading. You can use regular text or basic HTML in here if you're comfortable with it.

Show newsletter sign-up form? - This will show an input field where a user enters their email address to sign up for your MailChimp newsletter.

Show social icons? - Optionally show your social media icons below your newsletter sign-up form. You can configure your social media channels in your theme settings. See the Social Media section of this documentation for more information.

Colors & Backgrounds

In this section, you choose the colors for your site. The includes background colors for sections like the top bar and footer, as well as text colors. Let's explore the options:

The Primary Color option controls your main link text color, various interface colors, button colors, and more. It is well used throughout your site. The color you choose here should contrast with both a white background and the background color you choose for the outer site section.

The Secondary Color is used for alternate button styles, some text and icon hover states, and other places.

The Link/Button hover color is the color that will appear when you hover over most links and buttons. Note that these styles are overwritten in some areas of the site.

Button text color should contrast with your primary color. For example, if you choose a dark primary color, your button text color should be white or another light color.

Content Background

The ShowTime theme is a full-width template, so the background color selection applies only to areas that surround the white main content boxes.

Background image (optional)

If you wish, you may choose to show a background image in the areas that surround the main content. To do so, check the Use a background image? checkbox and browse for the file. There are several options for the appearance of your background image:

Repeat background? - You can choose None, Horizontally, Vertically, or Both. If you choose None, the image will appear once and will not repeat. If the content of the page is longer than the size of the background image, the background color you specified above will be displayed. Horizontally will repeat the image horizontally across the screen, while Vertically will repeat the image vertically. These options are best for repeatable patterns. Choosing Both will repeat the image both horizontally and vertically.

Fixed background position? - If this is selected, the background image will remain in place even when the user scrolls around the page.

Stretch background to fill screen? - This option will automatically stretch the image to fit the full width of the user's screen. It will also remain in a fixed position in spite of scrolling. To utilize this option, the recommended image size is at least 1600px wide x 1200px high.

Outer Content Area

The color options in this section are pretty self-explanatory but let's take a moment to examine the difference between the Content Area settings other color settings. The color options in the Content Area pertain to text and other elements that appear outside the white container boxes that make up most of the content on the theme. This includes things like the homepage call-to-action section, the breadcrumb, page titles, and a few other elements. Any colors you choose here should contrast with the background color you choose so the text is visible. For example, if you set your background color to black or another dark color, you should set your text and other colors to white or another light color.

The other color settings you specify pertain to all the text and other elements that appear within the white content boxes. This will include most of the content on the site - text for pages, buttons, product content, etc. Text here should contrast with a white background, so choose darker colors for optimal visibility.

Header and Footer

If you wish, you can set background, text, link, and other colors for your header and footer independently from other colors on the site. These options are straightforward but I will make mention of the border color setting since its function may not be completely obvious. This color setting controls the separators between links in the header, and the border that surrounds the four call-to-action icon boxes in the footer.

Typography

In this section, you can choose the font styles and typefaces you want to use in your headings and standard text throughout the site.

Heading Fonts

Font Rendering (H1-H5) - Here you choose whether you want to use Google Web Fonts or Standard "web safe" fonts for your headings. Google fonts are generally much more interesting than standard fonts, but they do add additional loading time to the site.

Google Web Font Typeface - If you elect to use Google Web Fonts for your headings, you'll select the font you want to use here. Here is a link that allows you to preview the Google fonts.

Standard Font Typeface - If you wish to avoid Google fonts, you can select a standard web safe font from this drop-down. This setting is ignored if you choose Google Web Fonts as the Heading Font Rendering above.

Body Fonts

Body fonts are chosen in the same way as heading fonts above. You can choose Google or standard fonts.

Social Media

This section contains text fields to enter your store’s link to many different Social Media sites. These links are used to display the social media icons in the footer of all your site’s pages, as well as in the custom entry popup (if you choose to enable it). The most popular sites for e-commerce stores have been selected for you. Simply paste in the links for the networks you use. If you don’t have an account at a particular network, just leave the field blank and that icon will not display.

Header & Footer

Header Styles

ShowTime comes with three different header styles. You can choose the one that best suits your needs in the theme settings area. See below for a screenshot and brief description of each:

Header 1 - Logo left, navigation right

This is the default header style for the ShowTime theme. It features a top bar with a link list selection on the left, contact information and currency selection on the right. The logo is positioned to the left of the main menu below. This layout is ideal if you have a smaller logo and don't need a lot of links in your navigation menu.

Header 2 - Logo/links top, nav below

This header moves the logo above the main menu and pushes the top bar link list and contact information to the right. The main menu is shown at full-width below. This is ideal if you have a larger logo and/or need a lot of links in your main menu.

Header 3 - Logo centered top, nav below

The final header option really accentuates your logo by centering it in between your top bar and full-width main navigation.

Other Options

The other options here are pretty basic. Let's run through them:

Header top link list - To populate the links that appear in the header either above or next to your logo (depending on your header style choice), we must specify a link list. To create a link list, click the Navigation link in your Shopify dashboard. This will show all the link lists you currently have on your site. To add a new one, click the Add a link list button. Give it a name that is easy for your to remember and create your links. Once your link list is created, it will appear in the drop-down menu here. For more information on how to work with link lists, see this Shopify documentation page.

Phone number options - If you wish to show your company phone number in your top bar, click the checkbox and enter the number in the text field.

Email address options - Likewise, if you wish to display your company email address, check the box and enter it here.

Logo and Favicon

Use custom logo? - check this box and click the Browse button if you wish to upload your own logo for your store. PNG files are recommended and the maximum dimensions are 350px wide by 120px tall. If your logo is larger than these dimensions, the theme will automatically scale it down. If no logo is specified, the name of your store in heading text will display in the logo area.

Logo Height - The theme needs this number so it can calculate how to position the main navigation. If you don't know the height of your logo image, you can usually determine this by right-clicking on the image in your Windows Explorer (Windows) or Finder (Mac) and choosing Properties (Windows) or Get Info (Mac). If your logo is taller than 120px and you don't resize it ahead of time, the theme will resize it for you. In this case, enter 120 in this field. This value will be ignored if you're not using an image logo.

Mobile Nav Button Padding

If you find that the navigation button that appears next to your logo on mobile devices is not lined up vertically with your logo, you can adjust this setting to add some top padding.

The number you should enter here varies wildly depending on the height of your logo. It's best to just use trial and error when trying to determine this. Start by entering a number here (say, 20), narrowing your browser window, and checking the alignment. If the icon needs to move down more, increase the number.

Footer

The footer in ShowTime consists of two main sections. We call them Footer Top and Footer Main. The footer is a great place to provide your customers with information about your store, links to your social media channels, a newsletter sign up form, payment methods you accept, etc.

Footer Top

The Footer Top section of the store consists of four call to action sections. This area provides a great way to bring important information to your customers. You could use this section for general policies (returns, exchanges, shipping, etc.), to highlight promotions (sales, discounts, etc.), new products/collections, or whatever else you can think of! Each section has styled links with large icons to really draw attention! The text is fully customizable in the options, and you can choose from hundreds of different icons using the FontAwesome library.

Let's look at how to setup our options in this area. Firstly, we can choose whether or not we want this section to appear at all. If you don't, simply uncheck the box titled Show footer call to action area? and move on. If you do want to show this section, there are four sections of options to setup. Each of them offer identical options.

Call to action 1 text - We need to provide the text that will appear in each of these boxes. For best results, limit your text here to 2-4 words and try to keep it consistent for all four sections. We need to make sure there is enough room for the icon and it will look better if the text doesn't wrap differently in each.

Call to action 1 icon - Choose an icon to display in this section. There are hundreds to choose from in the FontAwesome library, and you can see them all here. Next to each icon is a small string of text that begins with "fa" followed by the name of the icon. To choose your icon, enter the name of the icon without the "fa" string. So for example, if you wanted to use the "magic wand" icon from the screenshot below, you would simply enter "magic" (without the quotes) in this box. If you wanted to use the "mail reply" icon, you would enter "mail-reply" (again, without the quotes). Pretty simple, right?

Call to action 1 link - Provide the link URL for where this call-to-action should take you.

Repeat these steps for all four call to action areas and you're done!

Footer Main

The Footer Main section contains four customizable "buckets" of content. Setting this section up is very straightforward. You also decide if you want to show the payment methods you accept in this area. If you choose to show the payment methods, the methods you accept will automatically show based on your payment settings in Shopify.

To populate the four columns, you'll begin by providing heading text and choosing whether or not you want to show a Shopify link list or regular text for each of the first three columns. If you elect to use a link list, the text will not show. You can also use HTML if you're comfortable with it. Here is a simple guide that will help you do basic things with HTML, like add links, paragraphs, bulleted lists, text decorations, etc.

In the fourth column, you can choose whether or not you want to display the MailChimp newsletter signup form and/or the social media icons. The social icons are populated automatically based on the links you provided in the Social Media section of the settings.

Main Navigation

There is only one option to set in this section of the theme settings, but it's an important one. You simply choose whether you want to use Simple Navigation or Advanced Navigation. Let's briefly cover both options.

Simple Navigation

Simple navigation is very easy to setup and allows you to have standard links and single-level drop-down menus in your navigation bar. To create your menu, head over to the Navigation section and you'll see a link list called "Main Menu." Edit this link list to create your main navigation links. If you'd like to create a drop-down menu, create another link list that has the same name as one of the items in your Main Menu link list. That particular link will now be a drop-down menu. You can create as many drop-downs as you'd like in this fashion.

Advanced Navigation

Note: you can skip this section altogether if you decided to use Simple navigation instead.

With ShowTime's advanced navigation functionality, you can create a custom mega menu for your navigation bar. What is a mega menu? Well, instead of a single column drop-down menu, you can have up to four columns of links appearing under each heading.

This kind of menu system is really useful for larger stores that have lots of products, categories, product filters, brands, pages, or pretty much any other content. The menu is fully controlled using link lists, so once it's all setup, it's easy to change later.

We've set it up so you can create up to six custom mega menus for your navigation, and the process is the same for each. Don't worry, you can also create regular links and standard single-column drop-down menus too. So how do we setup our menus? Read on!

Create the Link Lists

Each column of your mega menu is just displaying an individual link list. Therefore, the first step to creating a mega menu is to create all the link lists you need. To create a link list, head over to Navigation in the Shopify dashboard. All your link lists will be displayed here. Click the add a link list button to get started. If you're new to creating link lists in Shopify, here's a refresher guide.

So what kind of link lists should you create? Well, that's up to you, but here are some ideas to get you started. The most obvious choice is to create a menu of all your product categories (or "collections" in Shopify speak). If you've got more than six or so, a single drop-down menu containing all of them becomes unruly. Separate them into multiple link lists and display them in columns instead.

Another option is to display all your popular brand names in a column or columns. Or maybe you could create filters to sort your products by things like price, size, color, etc. The options are nearly limitless since you can use any type of link you want in your link lists. For more information on setting up product filtering, check out this section of the documentation.

Setting up a Menu

Once the link lists are created, setting up the menu is easy.

Let's go over the options step-by-step:

Enter the text you want to use for the first menu item in the Link text box.

If this link will be a standard link with no drop-down menu, enter the link URL in the Link box. If this menu will be a drop-down or mega menu, entering a link in this field will have no effect since clicking this link will trigger the drop-down menu.

Choose the type of link you wish to create. The choices are:

Standard link - a static link with no drop-down menu.

Drop-down menu - a single-column drop-down menu.

Mega Menu (2 col) - a mega menu with two evenly divided columns spanning the width of the page.

Mega Menu (3 col) - a mega menu with three evenly divided columns spanning the width of the page.

Mega Menu (4 col) - a mega menu with four evenly divided columns spanning the width of the page.

The menu choice you make in step 3 above determines how you proceed with filling out the options. If this menu item will be a standard link, you're done. You can ignore the rest of the options move on to the next menu item. If it's a drop-down menu, you will choose the appropriate link list for that drop-down menu in the Column 1 link list option (you can ignore the heading for Column 1 box because standard drop-downs don't display headings). If it will be a Mega Menu (2 col) menu, you will fill in the options for columns 1 and 2. You will only need to make selections for all four columns if you're creating a Mega Menu (4 col) menu. Otherwise, you can ignore the additional options.

Repeat all these steps until you've created your main navigation bar.

Pat yourself on the back and reap the benefits of having a functional and accessible menu system!

Setting Up Your Pages

Home Page

The home page is generally the first page visitors to your site will see, so make it count! This section of the theme is probably the most time-consuming to setup, but we wanted to make sure it was extremely flexible and gave you all the options you need to really stand out. Let's roll up our sleeves and dig in!

Anatomy of the Home Page

Let's begin by taking a look at the anatomy of the homepage. It consists of five main areas: the Slider, Promotional Banners,Call to Action Section, Page Content, and Featured Products. This image will help you visualize it:

Note that Page Content isn't displayed because we're not using it in the demo. We'll walk through each section now.

Setting Up the Slideshow

The homepage slideshow allows you to add up to five slides that will automatically rotate at the top of the screen. These images fill the full width of the user's screen regardless of the size of their monitor, so you'll want to upload high-resolution images for these. We recommend at least 1600px wide. For best results, keep all your slider images the same aspect ratio (the demo uses images that are 1600px x 700px). If you're using text on your slides, you'll also set it up in this area. Keep in mind that if you use a lot of text in associate with narrower images, the text may get cut off on different devices. All the text fields are optional, so you could, for example just use the Title and Subtitle fields, while keeping the extra text field blank.

There is also an option to enable/disable the slideshow on mobile devices. If checked, the slideshow will display on all devices. If unchecked, the slideshow will only be visible on devices with resolutions above 767px wide (iPads and larger).

Here is an overview of the options you can add to each slide in your slideshow:

Use slide (x)? - Check this box if you want to display this slide. The theme provides support for up to seven slides but you do not need to use all of them.

Slide (x) ALT text - Enter a short sentence describing your image here. This is useful for search engine optimization as well as users who may have turned off images in their browser.

Show text on slide (x)? - Choose whether or not you want to display caption text on this slide.

Show overlay behind text? - Choose whether or not you want to display an overlayed background behind the caption text. This makes your caption text easier to read on photographic slides.

Slide (x) title - The main heading text that will appear on your slide. Try to limit this to no more than 4-5 words.

Slide (x) subtitle - The secondary text that will appear on your slide. Try to limit this to no more than 6-8 words.

Slide (x) extra text - The summary text that will appear on your slide. Try to limit this to no more than one paragraph.

Slide (x) button text - If you'd like to display a button on your slide, enter the text for that button here. Leave this blank to omit the button.

Slide (x) link - If you've entered button text above, the button will point to the link you enter here. If you leave off the button text, the whole slide will be clickable and link to the URL you enter here. Leave both the button text and link boxes blank and the slide won't link anywhere.

Promotional Banners

The ShowTime theme supports two rows of promotional banners for your homepage. You can choose to show both rows, show only the first row, or hide them altogether.

Setting up the banners is fairly straightforward, though there are some dimensional requirements that should be adhered to. The banners should be at least 800 px wide to ensure top quality on all devices. You can use any height you wish for all the banners, but for layout consistency, you should keep the images in each row the same height. In the demo, we used 800px x 533px images for the first row and 800px x 1000px images for the second row. Don't worry -- the theme will size them down to fit in the layout if they are larger but please be mindful of file size.

To begin, click the Browse button to upload your image. If you wish, you may enter your heading (we suggest 3-5 words) and subtext (5-15 words), and provide a link. If the nature of your image makes it difficult to see text on the image, you can choose to show an overlay behind the text, and you can also choose where on the image the overlay will appear (bottom or top). You will setup all five promotional images following the same steps.

Call to Action Section

The Call to Action section consists of a large block of text, a button, and a large image.

Begin by choosing whether or not you want to show this section. If so, enter a heading and subtext. There are really no length requirements for the text in this section, just be aware that users aren't likely to read for very long! If you provide a link, a button will appear for the user to find out more. If you wish, you can also upload an image to show below the call to action. Any size image is fine, but wide landscape images work best. Our CookTime demo image is 1030px x 388px.

Using Page Content

If you wish, you can display the contents of any page you've created in your Shopify dashboard on the homepage. To create a page, click the Pages link in the main menu of your dashboard and click the Add a Page button in the upper right-hand corner. Showing page content on the homepage is turned off in the demo.

Featured Products

Setting up the featured products section is very straightforward. If enabled, this section will automatically show products from the collection you specify in an attractive carousel that expands or collapses based on the size of the viewer's screen. You can provide a custom title for this section by visiting the theme Languages settings in your Shopify dashboard.

Instagram Widget (New in version 3.0)

I've added a new Instagram widget to display your latest photos on your homepage as part of version 3.0 of the theme. Here's a handy article in the support knowledgebase that shows how to set this up.

Collections Page

The ShowTime theme includes several options to help you setup your collection pages, but before we go over them, let's talk a bit about some built-in Shopify functionality for Collection pages.

Collection Featured Image & Description

Shopify provides the ability to show featured images and a collection description on your collection pages. To do so, click on the Collections link in your Shopify dashboard, and click on one of your collections.

To insert a featured image, click the Choose image button and upload an image. The theme displays this image the full width of the layout (not the screen), so you'll want to choose an image that is in a landscape orientation, preferably at least 1130px wide. Height doesn't matter, but since this is prime real estate on your collection page, you probably don't want to upload something really tall. The Description you enter will be displayed underneath the image. These are both optional fields, and nothing will display if you leave them blank.

Collection Page Options

Let's take a look at the theme settings and options for the collections page.

Products shown per page - Select how many products you want to show on your collection pages. If you have more products in this particular collection, pagination will be created at the bottom of the page automatically.

Product Display Options

Product Grid Layout - Choose the number of columns you'd like to display. The demo uses three columns. Users can switch between grid and list views using the small buttons near the top of the collection page.

Show product type in grid? - If you check this option, the type of product will show up in small text below the title of the product in the grid. This is set in your Shopify dashboard on the product page.

Show overlay with buttons on hover? - This option shows overlay buttons when you hover over products on the collection page.

What type of overlay buttons? - New in version 3.1 is product quick view functionality. Here is where you enable it. If you choose product quick view here, a button will appear when you hover over the product images on your collection page that says "Quick View." When this is clicked, a modal popup will appear showing the product featured image, a truncated version of the product description, and the ability to choose your options and add the product to the cart. The other option here is the "Add to Cart / More Info" buttons. If the product has multiple options or variants, a single "select options" button will display. If the product has no variants or options, an "add to cart" button will also appear in this overlay. Note that the overlay is disabled on mobile devices regardless of your selection here.

Sidebar Options

The rest of the options for your collection pages have to do with the sidebar. If you choose to show the sidebar, we have created several widgets that you can enable in your sidebar to help your site visitors get around. You can provide titles for these widgets by visiting the theme language settings in your Shopify dashboard. If you wish, you may also disable the sidebar and the product grid will take up the full width of the page. Available sidebar widgets include:

Filters - Filters allow users to narrow down visible products on the fly right from the collection page. We'll look at that in the next section.

Vendors - Displays all your vendors in an attractive collapsible widget. Vendors are created on your individual product pages.

Tags - A widget displaying the tags you've specified for your products. If you click on a tag, products that share that tag will be displayed. You can tag your products on your product pages.

Sale - This is a versatile widget that can essentially show products from any collection you choose. In the demo, we named it "On Sale" and created a collection of products that were on sale. A product is considered on sale if the compare at price you specify in the Shopify dashboard is less than the actual price.

Collection Filters

The ShowTime theme has some advanced filtering functionality built in to help filter products on your collection pages. Filtering is a great way to help customers narrow down product results based on things like color, price, size, or anything else you want! The great thing about this feature is you can have filters for almost anything, so any store owner can take advantage of these features. Like most features in the theme, setting up these filters is optional, and if you don't wish to use these, you can ignore this section in your theme settings.

Built-In Filters

Before we start talking about setting up custom filters, it's worth mentioning that the theme already has some fairly robust product sorting/filtering options built in. You don't need to adjust any settings to get these working -- they are enabled by default!

As you can see, customers on your site already have quite a few options to sort and display products in your store. In addition to the sorting options shown in the screenshot above, they can also switch from grid to list view using the buttons to the right of the drop-down menu.

These options are great, but if you'd really like to take your product filtering to the next level, you'll love the advanced filtering features built into ShowTime. Ready to get them setup? Let's begin...

Product Filtering Options

In addition to the sidebar widgets available on your collection pages that we already discussed in the Collections Page section, there are several ways you can allow customers to filter products on your collection pages. The options are:

Filter by groups - this method uses product tags using a unique naming convention to create subgroups for your products. This is ideal for stores that have a lot of products and need multiple filtering options. You can create as many filters as you want with this method. You can see a demo of this functionality here. To learn how to set this up, please check out this knowledgebase article: Enable and use the new group product filtering feature.

Advanced tag filter - This method also uses product tags along with link lists to create up to two filtering options for your products. If you don't need more than two filters and are using colors for one of your filters, this method has a more modern look and feel. See a demo of this method here. Learn how to set this method up below.

Simple tag list - This is just a simple sidebar widget that shows all the product tags associated with the current collection. Clicking on a tag will show all products that also have that tag.

No filtering - No tag widget or other filtering option is shown in the sidebar.

Advanced tag filter setup

The first step required to filter your products with the Advanced tag filter is to tag your products with the filters you want to use. To add tags to your products, navigate to the Products section in your Shopify dashboard and click on the product you wish to edit. From there, scroll down and locate the Tags section as shown in the screenshot below.

In this example, we're going to create filters for Colors and Brands, but you can use whatever you need. To add tags to your products, simply type them in the Tags box, or you can click tags used in other products to populate the list automatically. As you continue to add tags to your products, the list of previously used tags will be updated, which makes it super easy to add those tags to other products.

As you can see in the example above, there are some color tags applied (Blue and Orange), and a brand tag (Varadini) applied to this product. If I wanted to filter my products by the color Blue, I would need to add the Blue tag to any product that is blue. Likewise, if I wanted to filter my products by the brand Varadini, I would need to add that tag to those products as well.

You might be thinking...I have hundreds of products in my store already. It will take forever to add these new tags! Well, that's true if you do it manually. Luckily, Shopify has some options to help automate the process. You can export your products to a CSV file, add the tags quickly in Excel (or equivalent), and re-import them back into Shopify. This should save some time. Here's another tutorial that you might find useful on the subject.

Creating Filter Link Lists

If you've been reading through these docs carefully, you're probably an expert at creating link lists by now. If not, simply click the Navigation link in your Shopify dashboard and click Add a link list to get started.

We need to create a link list for each of our filters. In our example, we're going to create link lists for Colors and Brands. The name of the link list will show as the heading for the sidebar widget, so make sure to name it appropriately. For colors, we need links for all the colors that we want to filter, and they must use the same names as we used for the tags. The names are also case-sensitive, so keep this in mind! For example, if you tagged your product "blue" and created a link in your link list to "Blue" (capitalized), it wouldn't work. They must have the same names and be in the same case. The Links To... section also doesn't matter, so we can just set them all to Store Frontpage to save time. The filters will work regardless of where you link them. See the screenshot below for how to set up your colors filter.

Setting Up Filters in Theme Settings

With your product tagging and link lists done, you're in the home stretch. You just need to setup your theme settings and you'll be ready to roll!

Luckily, this part is painfully simple. Simply activate your filter widgets in theme settings (collection sidebar options) and choose the link lists you created in the previous step. The headings for these sidebar widgets will pull from the name you've given the link lists. Save your settings and you're good to go! The screenshot to the right shows an example of what you'll see on your store front-end when you finish setting up your filters.

When a user clicks on a filter, the text will become bold and it will be outlined to indicate that the filter is active. Pretty spiffy...

Product Page

Your product page is the gateway to sales, so we're pretty proud of some of the options we've built into ShowTime to help you get your products sold!

Options Overview

Product Review Integration

Out of the box, Shopify doesn't support product reviews. Luckily, they've released a free application that adds this functionality to your store. Although it's pretty easy to integrate into most themes, you're normally still required to get your hands dirty by editing some code in your theme templates. The ShowTime theme includes integration with this application, and we've done all the code/template editing for you! All you have to do is install the application and you're good to go.

To use the product review integration, you first need to install the application. To do so, follow these instructions:

It will prompt you to enter the URL for your Shopify store to complete installation (you may also be required to login to your account)

After installation, you may be prompted to setup the app by modifying your theme files. This is not necessary! We have made the modifications for you! The application is installed and you're ready to go!

With the application installed, all you need to do is enable this functionality in your theme settings. Click the checkbox next to Enable product reviews and the theme will do the rest.

Product Image Zoom

A new feature in version 3.0 of the theme is the Product Image Zoom feature. This optional feature will allow your customoers to hover their mouse over your product photos to see a larger version of the image. Simply enable this feature and the theme does the rest!

Product Option Swatches

By default, product variants and options on the product pages are displayed as drop-down menus. Customers choose their product options (such as color, size, material, etc.) using drop-down menus. This works fine, but we wanted to offer another option: product swatches!

With product swatches enabled, these drop-down menus for your product options are replaced with color-specific buttons (or swatches) that you can customize for color options, or attractive buttons for non-color options.

Working with color options

For the color options you have for your products, you can either let the theme attempt to choose a suitable color button for you, or you can upload an image that represents that color. The default color displays are fairly generic and may not match the colors of your products very well. In addition, if your colors have odd names, the script may not be able to select an appropriate color because it looks for specific color names. For example, if one of your products comes in the color "Granite," the theme will not know what color to assign to it. In this case, the default color is used (which is the same as the primary color you selected elsewhere in theme options). If this is a problem for you, it's best to upload your own swatch images.

Uploading your own swatches

To use your own swatches, you need to upload an image that is approximately 55 x 45 pixels in size. It must be in .png format and must follow a strict naming convention. The image must be named after the color option and must be all lower-case.

For example, if you have a color called 'Déjà Vu Blue', then name your image deja-vu-blue.png

Another example, if your color is 'Blue/Gray', then name your image blue-gray.png.

Most simple example, if your color is 'Black', the name your image black.png.

To upload your swatch images, follow these instructions:

Login to your Shopify dashboard and click on the Themes link in the left navigation.

Click the button with the three dots and a small drop-down box will appear. Click Edit HTML/CSS

You are now on the Template Editor page. Locate and click on the Assets folder to reveal its contents.

Under the Assets heading, click on the Add a new asset link.

Upload your image.

Repeat steps 4 and 5 until you have uploaded all your images.

Using Videos in Your Product Gallery

One of the great features built into the ShowTime theme is product video support. By utilizing this option, you can include videos from YouTube or Vimeo as part of your regular product gallery! You can have as many videos is you'd like in your gallery, and setting them up is easy. Let's get started.

To use videos as part of your product gallery, you need to do three things. Get the embed code for your video from YouTube or Vimeo, upload a product photo as normal (preferably with some indication that it will link to a video), and edit that photo's ALT text in your Shopify dashboard.

Getting the Embed Code

From YouTube: On the YouTube website, visit the page for your desired video, right-click on the video player itself and simply choose "copy embed code."

From Vimeo:Navigate to the page where your video is located. Look at the video playback window and look for a small paper airplane icon. Click that, then click Share. A new window will popup with some options (see screenshot on the right). You can ignore the size options, but make sure all the checkboxes under Special stuff at the bottom are unchecked, then copy the line of code in the Embed field. It doesn't appear all on one line, so make sure you get it all.

Upload a Product Photo and Edit ALT Text

Navigate to your product page in your Shopify dashboard and scroll down to the Images section. You can use any of your existing images as a link to show a video, or you can upload a new one. In our case, we added a small colored triangle with a video play button to the corner of the image so customers can easily see that it will show a video. This is optional. Once the image is uploaded, click the small pencil image with the word ALT next to it to modify the image's ALT text. Now, simply paste the YouTube or Vimeo embed code you copied earlier in to this box. Click Done and you're all set. Now when customers click that particular thumbnail, instead of seeing a larger version of the image, they'll see your video.

Variant Images Support

The ShowTime theme has built-in support for Shopify's new variant images functionality. This functionality allows you to assign a different image to each available variant you specify for your products. This is useful if you want to show the appropriate image when a customer chooses a variant (like a blue dress, for example). To learn more about how to setup your variants with images, check out this page in the Shopify manual. Once you setup your variant images and a customer chooses that particular variant, the image in your product gallery will automatically change to that image.

Product Tabs

With product tabs, you can present a lot of information to your customers without taking up a lot of space on your product pages. Showing the product tabs is optional, but if you use the Product Review integration, you will need to enable them.

Setting Up Your Tabs

You can have up to four tabs on your product pages, and the content for each is populated using content from a standard page you create in the Shopify dashboard. If you're using Product Reviews support, the first tab is reserved for that. Simply give it an appropriate title in the theme language settings. You can ignore the page option for that particular tab because it will have no effect.

The other tabs are setup in a very simple manner. Simply choose which page content you want to display. You create pages by clicking on the Pages link in your Shopify dashboard. You can provide custom titles for the tabs by visiting the theme language settings in your Shopify dashboard.

Note that the content of these tabs will be the same on all your product pages, so you can use them for re-usable content like sizing charts, store policies, contact information, or other things that would apply to all products in your store.

Social Media Meta Tags

Social meta tags include Facebook and Pinterest Open Graph Tags and Twitter Cards. These are enabled by default to make the store more accessible on different platforms, and more readable for search engines. To use this feature, simply enter your site's Twitter handle in text box and the theme does the rest.

Related Products

If enabled, other products from the current's product collection will be displayed at the bottom of your product page in an attractive carousel. To use this, simply click the Enable related products? checkbox. You can provide a custom title for this section by visiting the theme Languages settings in your Shopify dashboard.

If you've made it this far, the hard work is done. We're in the home stretch now. Let's continue with setting up your blog.

Blog Page

We only have a few options for the Blog pages, so let's take a look at the options real quick.

Blog Layouts

New in version 3.1 of the theme is the option to select a blog layout. The choices here are standard full-width, 2-column masonry and 3-column masonry. Utilizing the masonry layouts allows your blog posts to be displayed stacked in columns and they fill in to fill empty space between posts. Note that even if you choose a 3-column masonry layout, on smaller devices, it will default to two columns in order to adequately fit the text.

Sidebar Options

The blog in the ShowTime theme allows for two optional sidebar widgets. They are Recent Posts and Tags if you choose to enable them. You can title your sidebar widgets by visiting the theme Language settings in your Shopify dashboard.

The Recent Posts widget will display a list of your most recent blog posts along with a thumbnail of the featured image (if enabled), the title of the post, and the date it was posted. The Tags widget is a handy way for your customers to find blog posts based on how you categorize them using tags. For this list to populate, you will need to tag your blog posts. Look for the Tags section on your blog creation page in your Shopify dashboard. Any tags you've used in your blog posts will appear in this widget, so be sure to tag your posts appropriately!

Let's move on to options for standard pages next.

Standard Page

Standard pages include any pages you create by clicking on the Pages link in the left navigation of your Shopify dashboard. Examples of pages you might have include About Us, Policies, Terms of Use, etc. These pages are wide open and can be used for whatever you want. The only options the theme provides for controlling the appearance of these pages involve the sidebar widgets. Let's take a look at the options.

Settings

Basically, there are four different sidebar widgets you can display on your standard pages: Page links, Collections, Blog Posts, and Sale widgets. You can provide custom titles for these widgets by visiting the theme Languages settings in your Shopify dashboard. The sidebar can also be disabled on standard pages if you so choose. Let's take a look at what each widget does and how to set it up.

Page links - This is a multi-purpose links widget that can display the contents of any link list you specify. As a reminder, you can setup a link list by clicking the Navigation link in your Shopify dashboard. Simply choose a link list to display.

Collections - This widget will show all the collections in your store, with the exception of the Frontpage collection.

Sale - The sale widget is a multi-purpose products widget that you can use to display products from any collection you specify. You can also choose how many products you want to show in this widget.

Cart Page

Things are getting a little easier now, right?

Settings

There are just a few settings for the cart page but they are important. It might be easiest if we can visualize it. Let's take a look.

The Enable AJAX Add to Cart feature is a new feature in version 2.0 of the theme. What this does is allows you to specify whether or not your customer is redirected to the cart page when they add an item to their cart. If enabled, a popup window will appear letting the customer know the item has been added. They can then continue shopping or click a button to checkout. If you choose not to enable this, the customer is redirected to the cart page when they add an item.

The Show order notes field adds the textarea you see above. When a customer fills out this field, these notes are passed to the store administrator and show as part of the order details. These are useful for special requests, shipping notes, etc.

The Cart currency note is also shown in this screenshot, but this note isn't setup here. This text is tied to your currency settings. For information on how to set this up, refer to the Global Settings portion of this documentation.

Sidebar Options

Like most pages of your site, you can choose to display a sidebar on your cart page. You can also disable it if you choose. There are two widgets to choose from: a multi-purpose links widget and a shipping calculator widget. You can title these widgets by visiting the theme Languages settings in your Shopify dashboard.

The links widget allows you to show links from any link list you choose. Remember, you can add link lists in your Shopify dashboard in the Navigation section. This could be useful for things like your return policy, shipping information, etc.

The shipping calculator allows your customers to get an estimated shipping cost for their order without going through the checkout process. It utilizes the shipping options you have setup in your Settings menu within your Shopify Dashboard and takes into account the location, weight, and other applicable features to help the customer determine shipping costs. The screenshot below shows a sample output from the calculator. It requires no setup on your part, so it's very easy to use!

Contact Page

The ShowTime theme includes a beautiful Contact Us page template that features a working contact form and an optional Google Map to show your store location. Let's look at how to get it setup.

Creating the Page

First, you need to create a contact page in your Shopify dashboard. Assuming you don't already have one, head over to the Pages link on the left and click the Add a page button in the upper-right corner. If you do already have one, click on the page you want to use to open it. We need to select a different template for the page. To do this, scroll down to the very bottom and look for the Template section. There's a drop-down menu here. We need to choose the page.contact template for our Contact Us page.

Contact Us Theme Settings

With our page created and the proper template selected, let's take a look at the theme settings for the contact page.

The contact page is divided into two main columns. The left hand column is for general information and any other content you want on the contact page. This is populated using the standard page content you specify in your Shopify dashboard for the Contact page. The right hand column contains the contact form. It will send an email to the main email address you have on file within your Shopify settings when someone fills out the form. You can provide custom titles for these columns by visiting the theme Languages settings in your Shopify dashboard.

Google Map Support

If you wish, you can also show a styled Google Map at the top of your contact us page. It will show a pointer icon at the location on the map that you specify based on Latitude and Longitude coordinates you supply in the settings. Don't worry, it's easy to find your coordinates using this handy page. Just type in the address of your store and it will give you the coordinates. Simply paste them into the appropriate text boxes and you're done! Users can manipulate the map by zooming out and in just like they would any other map on the Google Maps site.

Search Page

The search settings controls how your search results page will look after someone runs a search on your site. There are three different options to choose from.

Search Settings

Product results only in grid format - This will display only product results when someone searches your site. They will be displayed in a grid format similar to a standard collection page. Standard pagination rules will apply.

Product results only in a list format - This will display only product results when someone searches your site. They will be displayed in a list format similar to a collection page that has had the list view setting applied. In other words, it will show one product per line. Again, standard pagination rules apply.

Product, page, and blog results in list format - This setting will display results search results from not only your product pages, but also from your blog posts and pages as well. They will be displayed in a list format with one result per line. This is a more comprehensive search option, but can sometimes show your customers unexpected results if you have a lot of page/blog content.

Checkout Page

The final settings area we'll look at in theme settings is the Checkout settings. These settings apply when your customer is ready to make their purchase and enters the Shopify checkout system.

Settings

Shopify controls the whole checkout process -- we were only able to make some minor styling tweaks to the checkout process. That said, we worked hard to make the checkout pages look as close to the theme design as we possibly. That said, here's a look at the checkout settings you have.

As these settings were all created by Shopify, we'll divert to them to explain the options better. Here's a support article that explains these settings in more detail.

Support

If you have any questions about the theme, please checkout our support portal and browse the knowledgebase before contacting me. It's a good bet that your question will be answered there. If not, feel free to submit a support request and I'll get back to you as soon as possible. Thank you for your support!