Clearflex Documentation

Clearflex is a professional responsive theme and comes with 4 great presets designed to suit a wide range of sites – Lighthouse, Pavilion, Boutique & Rainbow.

Download the Documentation in PDF Format

This document will guide you through the following steps:

Installing the Clearflex Theme

  1. Log in to the admin area for your shop.
  2. Select Theme from the right hand side and choose Manage Themes.
  3. Click Upload a Theme and select the file clearflex.zip.
  4. Once the theme has uploaded, return to Theme, Manage Themes and publish your theme as a main theme.

  5. If you have already published a mobile theme, make sure you remove it in order to take advantage of this responsive theme.
  6. Navigate to Theme, Theme Settings. Change the preset from Lighthouse to whichever preset you wish to use and click Apply Changes.

Adding Your Products to the Shop

If you haven’t already done so, now is a good time to add products to your shop.

For help with adding products, take a look at the Shopify Wiki.

Setting up Collections & Linklists

Collections are a way to organise your products into categories. Linklists allow you to choose links to appear, and the order for them to appear in.

To show products on the home page and have greater control over the navigation bars within this theme, you should create the following collections and linklists.

Create a Collection Containing All Products

  1. Go to Collections from the admin area.
  2. Click Add Smart Collection.
  3. Name your collection All Products.
  4. Under Set your conditions choose Inventory stock is greater than 0.
  5. Click Create Collection.

Create a Collection for the Home Page

  1. Go to Collections again.
  2. Click Add Custom Collection.
  3. Add the products you wish to have on the home page.
  4. Click Create Collection.
  5. Go to Themes, Theme Settings.
  6. Under Home Page choose this collection from the dropdown to display on the home page.
  7. Click Apply changes.

Creating other Collections for your Products

If you haven’t done so already, you should sort your products so that each product appears within a Collection.

You may wish to give each collection a description by clicking Collections, then the collection you wish to edit, clicking Edit and typing in a description.

Edit the Default Link Lists

  1. Go to Navigation from the admin area.
  2. Edit Main Menu and Footer to contain the links you would like to appear at the top and bottom of every page respectively. You may wish to add your collections to the Main Menu link list.

Choosing a ‘Collections’ Link List

  1. Go to Themes, Theme Settings.
  2. Under Header Content select a link list containing your collections from the drop down.

  3. Click Apply changes.

Adding Fonts from Fontdeck

This theme uses Fontdeck to deliver custom fonts. Even without Fontdeck this theme looks great, but for the full effect, here’s how to set up your shop on Fontdeck.

  1. Create an account with Fontdeck.
  2. For website domain, type in the domain you use for your shop, eg clearflex.myshopify.com.
  3. Add the following fonts to your site, depending on which preset you are using:
  4. Click on your shop from your websites.
  5. Copy your Project ID number from the top of the page.

  6. Return to the admin area for your shop.
  7. Go to Themes, Theme Settings.
  8. Choose Base Style, Fonts, Background & Colors.
  9. Paste your Project ID under Fontdeck Project ID.
  10. Click Apply changes.

Customising the Theme Settings

There are various other settings available for this theme. Here’s a description of what each setting does:

Header Content

  • Use image for site title? – Use the image uploaded below this setting for the site title instead of text. (1)
  • Site title image – Upload an image to use for the site title instead of text.
  • Site subheading – This appears under the site title. (2)
  • Which link list contains your collections? – A link list to use for the main navigation strip. (3)

  • Show tags under collections? – Use tags as sub-collections and show them in a dropdown menu under collections.
  • Show information text below header? – Show the following text underneath the header.
  • Information text – The text to display below the header.
  • Description for search engines – Metadata for search engines such as google describing your shop.

Footer Content

  • Footer information – Text to display in the footer.
  • Show credit card icons? – Show icons representing payment methods for this shop.

Home Page

  • Which collection do you want on the home page? – The collection containing products to show on the home page. See Create a Collection for the Home Page.
  • Number of images in the carousel – How many images do you want to display at the top of the home page in a carousel?
  • Carousel Image X – An image to display in the carousel.
  • Title – A title for the carousel image.
  • Link (optional) – A URL for the carousel image.
  • Show Product Info? – Show info about a product in the image.
  • Product Name – The name of the product in the image.
  • Product Price – The price of the product in the image.
  • Show 3 links under the carousel –  Show link images and text to 3 different pages.
  • Image X – Image for the link under the carousel.
  • Title – Title for the link.
  • Description – Information about the link.
  • Link – A URL for the link.

Product Pages

  • Show breadcrumb? – Show a navigation bar showing the steps taken to reach a page.
  • Product background color – The color to show behind a product image.
  • How many products per page? – How many products per page before showing pagination.
  • Show social buttons? – Show buttons for Google+, Facebook and Twitter.
  • Secondary information tab page – A page to use for secondary information such as shipping information.
  • How many product pitch columns – How many columns of general information to display below a product.
  • Product pitch title – The title for a product pitch column.
  • Product pitch description – The text for a product pitch column.
  • Related products title – The title to show above related products.
  • Related products type – How to determine which products are related to this product.

Base Style, Fonts, Background & Colors

  • Which preset to use as the base style? – The overall preset styling to use.
  • Fontdeck Project ID – The Project ID relating to your site on Fontdeck. See Adding Fonts from Fontdeck.
  • Heading font – The font to use for main headings.
  • Body text font – The font to use for all body text.
  • Bold font – The font to use for bold text.
  • Italic font – The font to use for italic text.
  • Use custom background image? – Use an image uploaded below instead of the default background for the preset.
  • Background image – A custom image to use for the background.
  • Background X position – The distance from the left the background should be positioned to.
  • Background Y position – The distance from the top the background should be positioned to.
  • Background repeat – How the background should repeat.
  • Background color – The color to use for the page background.
  • Text color – The color to use for general text.
  • Link color – The color to use for links.
  • Link hover color – The color to use for links when a cursor is over them.

Customer Area Layout

See the Shopify Wiki.

From The Blog

Sale Now On

Jan 09, 2012

Take advantage of our amazing sale. With many items at less than half price, don't miss out. Take a look...

First Post

Dec 16, 2011

This is your blog. You can use it to write about new product launches, experiences, tips or other news you...
“Lorem ipsum dolor sit amet con ectetur adipiscing elit. Fusce ultrices lorem eu mattis males uada, sapien odio fringilla ipsum, id ornare odio purus sed risus lorem.”

Mr A. Customer