Advertisement
Other

Let’s Design a Shopify Theme

by

Themeforest recently opened a new section where you can buy or sell themes for Shopify! Shopify is a hosted e-commerce solution that makes it easy to get started with an online business. You can have a shop up and running in minutes.

To kick-start ThemeForest's Shopify catalog, the authors of each accepted template will receive a $100 bonus - until there are ten templates in the category.

Shopify is well known for its flexibility of design. See some examples. Shopify created (and later released as open source) the Liquid Templating Engine. Liquid allows complete design freedom for designers.

In this tutorial I will show how to design a Shopify theme using Liquid. Once you have the basics, you can design a theme, and submit it to Themeforest.

Let’s Design a Shopify Theme

What is Liquid?

Liquid is the templating engine developed for and used by Shopify. It processes Liquid template files, which have the “.liquid” extension. Liquid files are simply HTML files with embedded code. Since Liquid allows full customization of your HTML, you can literally design a shop to look like anything.

Liquid was originally developed in Ruby for use with Shopify and was released as an open source project. Since then, it has been used in other Ruby on Rails projects, and has been ported to PHP and javascript.

A Quick Preview of Liquid

Let’s look at what it takes to get started with liquid.

  <ul id="products">      
    {% for product in products %}
      <li>
        <h2>{{ product.title }}</h2>
        Only {{ product.price | money_with_currency }}
      
        <p>{{ product.description | prettyprint | truncate: 200 }}</p>
                    
      </li>      
    {% endfor %}      
  </ul>

As you can see, Liquid is just HTML with some embedded code. This is why Liquid is so powerful, it gives you full power over your code and makes it easy to work with the variables you have available.

What is going on above?

Shopify banner

In Liquid, there are two types of markup: Output and Tags. Liquid Tags are surrounded by curly brackets and percent signs; output is surrounded by two curly brackets.

In the above snippet, the first line of Liquid is: {% for product in products %} .... {% endfor %} This is an example of a Liquid Tag. The for Tag loops over a collection of items and allows you to work with each one. If you have ever used for loops in PHP, Ruby, javascript, or (insert any programming language here), it works the same way in Liquid.

The next line of Liquid in the above snippet is {{ product.title }}. This is an example of a Liquid Output. This will ask for a product’s title and display the result to the screen.

The next line of Liquid introduces something new: {{ product.price | money_with_currency }} Here we have an example of a Liquid Filter. They allow you to process a given string or variable. Filters take the value to the left of themselves and do something with it. This particular Filter is called format_as_money; it takes a number, prepends it with a dollar sign and wraps it with the correct currency symbol.

A simple example:

  {{ product.price | money_with_currency }}

could generate the following HTML

  $45.00 USD

The last line of Liquid above: {{ product.description | prettyprint | truncate: 200 }} shows how you can chain filters together. Filters act on the value that is to the left of them, even if that value happens to be the result of another filter. So the snippet in question will apply the prettyprint filter to product.description, and then will apply the truncate filter to the results of prettyprint. In this way, you can chain together as many Liquid filters as you need!

What Else Does Liquid Offer?

In terms of Liquid Tags, besides the for tag, there are several others. Th most common ones are:

Comment:

    {% comment %} This text will not be rendered {% endcomment %}

If/Else:

    {% if product.description == "" %}
      This product has no description!
    {% else %}
      This product is described!
    {% endif %}

Case:

    {% case template %}	
      {% when 'product' %}
        This is a product.liquid
      {% when 'cart' %}
        This is a cart.liquid
    {% endcase %}

Check out the full list of Tags.

Liquid also offers plenty of filters you can use to massage your data. Some common ones are:

Capitalize:

  {{ “monday” | capitalize }} #=> Monday

Join:

  {{ product.tags | join: ’, ’ }} #=> wooden, deep snow, 2009 season

Date:

  Posted on {{ article.created_at | date: “%B %d, ’%y” }} #=> Posted on January 26, ’09

Check out the full list of filters available.

Anatomy of a Shopify Theme

Shopify themes all have a simple directory structure. It consists of an assets, layout, and templates folder. Let’s look at what goes where:

  1. assets folder: In the assets folder you store all of the files that you want to use with your theme. This includes all stylesheets, scripts, images, audio files, etc. that you will be using. In your templates you can access these files with the asset_url Filter.

     
        {{ "logo.gif" | asset_url | img_tag: "Main Logo" }} #=> <img src="/files/shops/random_number/assets/logo.gif" alt="Main Logo" />
  2. layout folder: This folder should contain just one file called theme.liquid. The theme.liquid holds the global elements for your Shopify theme. This code will be wrapped around all of the other templates in your shop. Here is an example of a very basic theme.liquid:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
          <title>{{shop.name}}</title>
          {{ 'layout.css' | asset_url | stylesheet_tag }}
    
          {{ content_for_header }}
        </head>
    
        <body>
          <div id="header">
            <h1 id="logo"><a href="/">{{ shop.name }}</a></h1>
          </div>
    
          <div id="content">
            {{ content_for_layout }}
          </div>
    
          <div id="footer">
            All prices are in {{ shop.currency }} |
            Powered by <a href="http://www.shopify.com" title="Shopify, Hosted E-Commerce">Shopify</a>
          </div>
        </body>
      </html>

    Required Elements

    There are two VERY important elements that must be present in a theme.liquid file. The first is {{ content_for_header }}. This variable must be placed in the head of your theme.liquid. It allows Shopify to insert any necessary code in the document head, such as a script for statistics tracking. For thsoe familiar with WordPress, this is quite similar to the wp_head() function.

    The other VERY important element is {{ content_for_layout }}. This variable must be placed in the body of your theme.liquid; it's the place where all of your other Liquid templates will be rendered.

  3. templates folder: This folder holds the rest of your Shopify templates. It consists of:
    1. index.liquid: Displayed as the main index page of your shop.
    2. product.liquid: Each product will use this template to display itself.
    3. cart.liquid: Displays the current user’s shopping cart.
    4. collection.liquid: Displayed for collections of products.
    5. page.liquid: Displayed for any static pages that the shop may have created.
    6. blog.liquid: Displayed for any Shopify blogs for the shop.
    7. article.liquid: Displayed for any blog articles and includes a form for submitting comments.
    8. 404.liquid: Displayed for anytime the shop returns a 404.
    9. search.liquid: Displayed for shop search results.

As you might have guessed, each of these templates has access to different variables. For example, product.liquid has access to a product variable which contains the current product being displayed, blog.liquid has access to a blog variable, and index.liquid has access to all of them. If you’re interested in which variables you can use in which template, please review the Liquid documentation.

A Basic Skeleton to Get Started

The best thing about designing for Shopify is that you get to use all of the skills that you already have: HTML, CSS, JS, etc. The only roadblock in the process is becoming familiar with which Liquid variables are available in each template.

This is where Vision comes in.

Vision – Shopify in a Box

What is Vision?

Vision is a stand-alone application that allows you to create themes for Shopify stores on your local machine without having to sign up for a shop or setup a database or all that other geeky stuff.

What do I need to run Vision?

Vision comes complete with everything needed to run straight out of the box. If you’ve got a text editor and a web browser installed, you are ready to roll.

As if that wasn’t enough, Vision comes pre-loaded with Shopify's ready-made themes. Shopify has allowed people to use these themes as building blocks, so you can start with one of these existing themes as a base and expand upon on it!

Summary

Shopify is a fast growing e-commerce platform already with thousands of sellers looking to show off their products. Using Vision, you can hit the ground running and begin developing in no time. The first ten templates posted to Themeforest's Shopify category get an extra $100. So get started!

If you need more information about designing with Shopify, they have extensive documentation on their wiki. Check out The Shopify Theme Guide, Using Liquid, and Getting Started with Vision.

The Best Shopify Templates from ThemeForest....So Far!

  • Drifter

    Drifter

    "This sleek Shopify theme features clean lines and modern design accents that showcase your products. Custom jQuery lightboxes allow your products to be viewed in full detail."

    View Theme

  • Drifter

    Fancy Pink

    "A shopify theme with modern, fancy web 2.0 design."

    View Theme

  • Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.


Related Posts
  • Web Design
    eCommerce
    An Overview of My Shopify Workflow ToolsShopify thumb
    Following the publication of the recent Shopify Theme Series I have had a few people get in touch and ask me about some of the workflow tools I use when building themes. Let's look at just a few of them.Read More…
  • Web Design
    eCommerce
    Taking Shopify Theme Development FurtherShopify thumb
    In this final part of our Shopify series we will look at how a deeper knowledge of Liquid will enable you to make your themes even more flexible. This will help you deliver richer and more imaginative store designs.Read More…
  • Web Design
    eCommerce
    Getting Started With Liquid; Shopify's Template LanguageShopify 2 preview
    This tutorial will introduce Liquid, the Shopify template language. We'll look at the benefits of Liquid, discuss how it enables us to pull in and manipulate data from our stores and finally showcase a number of its key features that you will find yourself using daily in your Shopify theme development.Read More…
  • Web Design
    eCommerce
    A Web Designer's Introduction to ShopifyShopify 1 thumb
    Over the course of three articles here on Tuts+ we'll be looking at how to build a theme for the hosted ecommerce platform Shopify. My goal is to equip you with all the skills you’ll need to get started, as well as show you a number of creative ways to make your themes flexible and powerful.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Creating an Archive TemplateCreating wordpress theme from html 400
    If you've been working your way through this series, you now have a functioning theme with two page templates. The steps I've demonstrated to this point are: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file creating template files for static pages. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…