Documentation

• Responsive design: looks great on desktops, laptops, tablets and mobiles. Give it a try on your iPhone or iPad now.
• Highly customizable: change colors, fonts, background image through the theme settings. No coding required!
• Great for SEO: uses the latest Shopify SEO features and product data is formatted for schema.org so that product listings are optimized on search engines.
• Quick view popups
• Supports multi-currency
• Easy storefront translation using Shopify's admin area... see more details
• Supports collection sorting by price, A to Z etc.
• Optional sticky nav bar
• Responsive product tabs and accordions
• Optional product image zoom (on the product page and the quickview popup!)
• Use any Google font for your header and regular text
• Shipping calculator on cart page
• Banner ad areas on the homepage, sidebar and cart page
• Branded checkout: a seamless checkout for your customers using your logo and color scheme.
• Dropdown menus
• Link variants to your product images
• Customer accounts: customers can register, login, change addresses and view past orders.
• Flexible slideshow: a full-width slideshow with optional animated caption
• Home page content: feature products, collections or both on your home page. Optionally include welcome text too.
• Newsletter integration: easily link your Mailchimp account to the newsletter form.
• Social integration: share by Twitter, Facebook, Google+ and Pinterest.

You can easily set the number of product displayed on each row.

1. In the themes section click "Customize theme" and in the first section you can choose the number of products per row and per page.
   

It's easy to configure multiple currencies:

1. First, follow this guide to configure your currency formats
2. Then see the section named "Currency options" in your theme settings. Make sure the default currency matches your store currency.

It's easy to use Google fonts in your theme. You can use different fonts for your headings and regular text. This section shows how to add a Google font to your headings but the instructions are the same for both.

1. First of all, Browse Google fonts to find a font you like.
2. Click the "Quick-use" link...
   
3. Select the variants of the font you want. In this example there are 3 variants but your font may have more or less...
   
4. Copy the code from the "standard" code box...
   
5. Back in your Shopify admin area, click "Customize theme" then click the section named "Fonts (Headings)" then paste the code as follows...
   
6. Switch back to Google WebFonts and copy the font name from section 4. Note you only need the font name as in the next screenshot...
   
7. Paste that into your theme settings like this...
   
8. And the last step is to save your theme settings

You can easily add a contact form to a page. In Shopify admin, click "Pages". Click the page that you'd like to add a contact form to. You'll see a section named "Template" near the bottom of the screen. Choose "page.contact" and you'll have a fully working contact form!

The navigation bar supports 2 levels of sub menus. Enabling sub menus can be done is a few simple steps. Before you begin, make sure you've added a few products and organised them into collections.

We'll be using link lists (a feature of Shopify admin). A link list sounds complicated but it's just a group of links. You create and edit link lists by clicking "Navigation" from the Shopify admin sidebar.

1. In the themes area of Shopify admin, click the "Customize theme" link then click the section named "Navigation Bar". Select the link list to use. Links from that link list will appear in the top menu bar.
   
   Remember to save your settings. The following steps of this guide assume that you've selected the link list named "Main menu" in step 1.

2. Next, in Shopify admin area, click the "Navigation" option in the sidebar...
   

3. To add a dropdown to a menu item you just need to create a link list with the same name. For example, lets say you have a link named "Shop" in your main menu. Click the "add link list" button and create a link list named "Shop". Add a few links to the new link list and you'll have a fully working dropdown. Repeat the process for any other links that need a dropdown.

   Here's a diagram that shows how linklists are used to create dropdowns on your menu bar...
   

The Fluid theme comes with 3 languages for your storefront - English, French and Spanish. You can easily switch between them to change the text on your storefront. Please see Shopify's docs for more details on changing your storefront text... see more details

Please note: your store will still be displayed in one language (your chosen active language). If you want to allow your visitors to switch between languages you might want to take a look at the Langify app

Adding collections to your home page is really easy. You can feature as many collections as you like.

All you need to do is create a linklist through the "Navigation" area of Shopify admin...

Then, add links to that linklist. Each link should point to one of your collections.

Next, click "Customize theme" and click the section named "Homepage". Click the checkbox to enable collections on the home page and select your linklist from the dropdown...

You can show optional captions on the collection thumbnails. If you enable them, the collection name will appear as the caption.

Note: the theme code will look for a collection image. If it finds one, it'll use that as the collection thumbnail image. If not, it'll use the image from the first product in that collection.

It's easy to link your newsletter form to a Mailchimp subscriber list. These instructions assume that we're using the new version of Mailchimp...

1. You'll need a free Mailchimp account
2. Login to your Mailchimp admin area and create a new list (or you can use an existing list)
3. Click the list you'd like to use for holding your Shopify newsletter subscribers
4. Click "Signup forms"
5. Click "Embed a form"
6. Click "Naked"
7. Here's the only bit of the code you need to copy...
   
8. Now, in Shopify admin, click "Themes -> Customize theme" then click the section named "Widget - Newsletter" and paste that bit of code into the "Form action url" field

Tabs are really easy to use. You just need to wrap your content in a div with a class of "responsive-tabs". Then inside the containg div you use a h2 tag for each tab heading, followed by a div with the tab content. There's some sample HTML code below to show how that should look.

Here's how to add tabs to your product description...

1. Edit one of your products
2. Click the button to view your product description in HTML mode...
   
3. Here's some sample HTML code that will create 3 tabs. As a starting point, you can just copy and paste this straight into your product description.
   

   <div class="responsive-tabs">
   <h2>Tab 1</h2>
   <div>This is the content in your first tab! You can add any content within this div.</div>
   <h2>Tab 2</h2>
   <div>This is the content in your second tab tab. You can add any content within this div.</div>
   <h2>Tab 3</h2>
   <div>And here's the content for the third tab. You can add any content within this div.</div>
   </div>

You add an accordion style section to a product description, page or blog. All you need is some simple HTML. For example this will give you an accordion with 2 sections...

<div class="gt-accordion">
<h4>First section title</h4>
<div>Content for first section goes here</div>
<h4>Second section title</h4>
<div>Content for second section goes here</div>
</div>

You can easily add videos to your product descriptions, pages, blog posts etc. There's no need to add extra HTML. The theme handles that for you. All you need is the video embed code from somewhere like Youtube or Vimeo, like this...

The theme has a full set of templates for customer accounts. To enable customer accounts for your store, you'll need to edit your preferences...

1. In Shopify admin click "Settings" then "Checkout".
2. Scroll down to "Customer accounts" and change the option to "Accounts are optional".
3. Don't forget to save your changes.

1. Create your slides in your favorite graphics editor. Suggested size is 1280px wide by 400px high. Slides can be any height but for best results, make them all the same height.
2. In Shopify admin, click "Themes -> Customize theme" then click the "Homepage slideshow" section to add your slides.
3. You can switch each individual slide on or off and each slide can link to a different URL.
4. You can also set captions for each slide.
5. Use the slideshow options in theme setting to control the speed and effects for your slideshow...
   

If you have unique product options, such as color, material, or pattern you can upload additional product images to represent each variant. That's part of Shopify admin and you can read instructions here.

The theme uses the "Footer" linklist for footer links. You can edit the links by clicking "Navigation" from Shopify's admin sidebar. You can change the header for the footer links through the theme settings.

Visit the styles page to see how standard HTML is styled.