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.

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 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.

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.

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.

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

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.

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.

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!

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.

Setting up a Menu

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

1. Enter the text you want to use for the first menu item in the Link text box.
2. 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.
3. 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.
4. 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.
5. Repeat all these steps until you've created your main navigation bar.
6. Pat yourself on the back and reap the benefits of having a functional and accessible menu system!

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) - Click the browse button to upload your slideshow image. Remember to use high-resolution images if possible.
• 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.

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.
• Collections - Displays all your collections in an attractive collapsible widget.
• 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.

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.

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:

• Visit the app's homepage and click the Get App button
• 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.

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:

1. Login to your Shopify dashboard and click on the Themes link in the left navigation.
2. 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.

See this functionality in action

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.

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.

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!

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 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.

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.