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.
This Series
Here’s what we’ll cover in the coming articles:
- The Shopify partner programme
- Outstanding ecommerce design
- The key concepts that you'll need to get started with your first store design
- How a Shopify theme is constructed
- Liquid: the Shopify template language
- Advanced techniques to make your themes flexible and powerful
- Resources to take your theme building further
The Shopify Partner Programme
Before we get started I strongly recommend you sign up for a free Shopify partner account. Building themes is 100% free for designers (subscriptions only commence when your client makes their store live).
Having a partner account enables you to create as many fully featured development stores as you need. These have no time limit and are 100% free to use and test with. You can even take dummy payments in order to test the full purchase flow - which comes in very handy when showcasing your work to your clients.
Outstanding Ecommerce Design
You may well have used Shopify without actually realising it. If you've ever purchased a title from A Book Apart, a t-shirt from United Pixel Workers, a temporary tattoo from Tattly, coffee from Has Bean, or (if I may be so bold) bought a copy of a book I co-authored, then you have experienced Shopify.
As you will see from these stores they all look very different. There are no restrictions in terms of how your store can appear, it’s 100% entirely up to you and your imagination. In 2013 Shopify decided to highlight great ecommerce design and launched the inaugural Shopify Design Awards. Over 150 themes were submitted and were judged by three highly respected individuals from the web design world - Jeffrey Zeldman (Founder of A List Apart, and Happy Cog), Tina Roth-Eisenberg (Founder of swissmiss, and Tattly) and Daniel Weinand (Co-founder and Chief Design Officer of Shopify).
The top three themes were:
Another personal favourite of mine, and an honourable mention in the awards, is the Pure Fix Cycles store. As well as showcasing some nice ways to filter products, they also inject fun into their design - a great case in point being their glow wheels product page.
All these themes not only demonstrate great design skill but also highlight the flexibility of Shopify themes. There’s no prescribed HTML, classes or IDs and no restrictions in terms of layout. Whilst many people choose premium themes for their stores, plenty of designers start from scratch. The choice is yours.
Key Concepts
As with all systems Shopify has a number of key concepts that are worth understanding before we dive into a text editor. Let's begin by looking at how we organise our store.
Products
Every online store needs products and Shopify is no different. Products are our base unit in Shopify and central to theme building.
Essentially, a product is anything you wish to sell. Every product in a store has a number of attributes - the most common four being title, description, price and an image. Other attributes a product might possess are weight, colour and size. All of these can be accessed, created and updated via the online admin.
Within Shopify each product can also have a number of variants. By default every product you create has one variant, you can simply add more as you need. Using our t-shirt example once again we could say that it has three colour variants,(black, white and green) and three size variants (small, medium and large). This in turn will result in you being able to sell:
- Small black t-shirt
- Medium black t-shirt
- Large black t-shirt
- Small white t-shirt
- Medium white t-shirt
- Large white t-shirt
- Small green t-shirt
- Medium green t-shirt
- Large green t-shirt
You also have the ability to set specific details for each combination. For example, you could set a different price for the small green t-shirt compared to the large green t-shirt.
Variants are a really powerful feature of Shopify and allow you to display your products in a variety of interesting ways within your templates.
Collections
Once you have added products to your store you may wish to categorise them into collections. I describe a collection as a "logical grouping of products". Other platforms may use the term category.
Collections aren't required, but are very useful. Any product can sit in one or many collections, enabling you to cross categorise your products effectively. As I say, products don’t have to belong to a collection, it’s purely optional.
If we take Best Made Co. as an example, we can see that they use the following collections to categorise their products:
- Clothing
- Accessories & Badges
- Bags & Cases
- Books & Maps
- Home Goods
- Camp Supplies
It is entirely possible that a bag might sit in both the "Bags & Cases" and "Camp Supplies" collections.
As well as defining collections manually Shopify offers a number of other ways we can add products automatically. An example of this might be to include all products where the price is less than $10. There are many more attributes we can use:
- Product title
- Product type
- Product vendor
- Product price
- Product tag
- Compare at price
- Weight
- Inventory stock
- Variant's title
For comparisons we can use the following:
- is equal to
- is greater than
- is less than
- starts with
- ends with
- contains
These are known as "smart collections" within the admin interface. You can order collections in the following ways:
- Manually
- By best selling
- Alphabetically (A-Z)
- Alphabetically (Z-A)
- By price (highest to lowest)
- By price (lowest to highest)
- By date (newest to oldest)
- By date (oldest to newest)
Finally, just like products, collections have attributes which we can edit from the Shopify admin including a title, description and image.
Product tags
In addition to collections we can also use tags to add further meta data to our products. One common use for tags is to help with filtering a collection. Let's demonstrate this with an example using the Pure Fix Cycles store:
As you can see from the above image, we are in the XXX collection and are able to filter it using the drop down list of tags.
Tags are also a really useful way of relating products to each other. We'll look at how to display "related products" in more depth later on in the series.
Themes
With the basics of products, collections and tags understood it's time to start looking at how we construct themes. The good news is that if you have ever built a web site (and I am assuming most of you reading this have, in some form) then creating a Shopify theme won't throw any unwelcome surprises.
Every Shopify theme is made up of four key elements:
- HTML files (with a
.liquidextension) - CSS
- JavaScript (optional)
- Images
These files are neatly organised into five folders. As you will see below there’s only a handful of files needed to get started. Here's the basic folder structure of a Shopify theme:
├── assets
│ ├── screen.css.liquid
│ ├── site.js.liquid
├── config
│ ├── settings.html
├── layouts
│ ├── theme.liquid
├── snippets
├── templates
│ ├── 404.liquid
│ ├── article.liquid
│ ├── blog.liquid
│ ├── cart.liquid
│ ├── collection.liquid
│ ├── list-collections.liquid
│ ├── page.liquid
│ ├── product.liquid
│ ├── product.liquid
│ ├── search.liquid
I have added my own bare bones starter theme to GitHub - feel free to grab a copy for your own projects.
It’s worth noting that Shopify themes don’t allow nested folder structures. Something else you might notice is that all bar one of the HTML files don't have the customary .html extension. In Shopify themes pretty much all HTML focused files have a .liquid extension - e.g. product.liquid and index.liquid.
The Liquid in .liquid is the Shopify templating language. It was developed by the original creators of Shopify and is now available as an open source project on GitHub. You may have come across it already as it can be found in many projects including Mixture and SiteLeaf.
Let’s have a more in-depth look at the folders and their role in a theme.
Assets
The assets folder is home to all your images, JavaScript, and CSS files.
Many people, myself included, often separate files into subfolders based on type, i.e. one for CSS, one for images and another for JavaScript. Be aware that this isn’t possible in a Shopify theme; all your files must be in the root of the assets folder. Also, any files you upload using theme settings via the Shopify admin (which we will look at later) are added to this folder.
Config
When working on your first theme you may not need to encounter the config folder. However as you progress with your theme building you will find it incredibly useful. This folder is home to the settings.html file. You’ll notice that this is the one file that does end in a .html extension.
If you open it up in a text editor you will see that a typical settings.html file contains form elements such as file upload fields, checkboxes, select lists, and text inputs. This file enables theme designers to create input fields for merchants to edit data related to their theme.
To explain this further let’s say we wanted to make it possible to change the background colour of the store. We could do this by adding in a text input in our settings.html file as follows:
<input class="color" id="text_color" type="text" name="text_color" value="#000000" />
The value entered, or the default as specified in the value attribute, is now accessible in our templates using the global (available in every template) settings variable in the following way:
{{ settings.text_color }}Don’t worry if this feels a little alien now, by the end of the series it will make perfect sense.
Layouts
The layout folder usually contains one file called theme.liquid, although it can contain more as we’ll discuss later.
Layouts are really powerful as they enable us to define all the common elements of our site in one single file. When a page is requested Shopify wraps this file around the relevant micro template to render a single page.
One of the main benefits of layouts is that they enable us to keep our code nice and DRY (Don’t Repeat Yourself), enables us to make global changes very easily and makes working with our inner micro templates less complicated as we are dealing with smaller sections of code.
There are two important Liquid tags that you must include in a Shopify layout file. The first is {{ content_for_header }}. This variable must be placed in the section of your layout file. This tag allows Shopify to insert any necessary code in the document head, such as a script for statistics tracking and CSS files for the "logged in" admin bar
The second tag is {{ content_for_layout }}. This is usually found in the middle of your template at the point where you wish your micro template to appear.
Snippets
Snippets are files containing chunks of reusable code, these also have the .liquid file extension.
I often find theme designers use snippets in a number of different ways. Personally the approach I take is as follows:
- The code appears on every page of the site - place the code in a layout file
- The code appears only once on a specific page - place the code in the relevant micro template
- The code appears on more than one page but not every page - place the code in a snippet file
Examples of good use of snippets include social links and pagination blocks. Snippets are easy to include in our templates using the Liquid tag {% include 'snippetname' %}. Note that you don’t have to add the .liquid extension when pointing to the file.
Templates
Finally, we come to the folder you will spend most of your time in. I often refer to the files in the templates folder as micro templates simply because they are small pieces of code that get injected into our layout file.
If the majority of your sites markup is contained in a theme.liquid layout file then these micro templates are often very small.
Here’s a list of the micro templates that make up a theme and their use:
404.liquid— Used when a page is "not found"article.liquid— The article page for a blog postblog.liquid— The archive listing page for a blogcart.liquid— A list page of all the items in your cartcollection.liquid— A list page of all products in a specified collectionindex.liquid— The "home page" that you can customise to display one or more products, blog items, and collectionslist-collections.liquid- A list page for all of your product collectionspage.liquid— A basic page for content, ideal for terms and conditions, about pages, etc.product.liquid— Used to display a specified productsearch.liquid— The template to display search results
Mapping Templates to URLs in Shopify
As you will see, there are a total of ten micro templates in the templates folder. Thankfully, they are well named so it should hopefully be clear when working with them what they do.
The final piece of the puzzle is knowing when these templates are rendered within a store. It’s actually pretty straight forward.
Shopify determines which template is displayed based on the requested URL. If you have ever used one of the popular development frameworks you might be familiar with the concept of routing. Shopify has its own internal routing system and it’s this which determines which template is sent to the browser.
Here’s an overview of which template is rendered as determined by the URL:
/thisisntarealurl→ 404.liquid/blogs/{blog-name}/{article-id-handle}→ article.liquid/blogs/{blog-name}→ blog.liquid/cart→ cart.liquid/collections→ list-collections.liquid/collections/{collection-handle}→ collection.liquid/collections/{collection-handle}/{tag}→ collection.liquid/→ index.liquid/pages/{page-handle}→ page.liquid/products→ list-collections.liquid/products/{product-handle}→ product.liquid/search?q={search-term}→ search.liquid
The elements in { } denote a variable which will have an impact on the data loaded into a template. For example, if we take the /collections/{collection-handle} URL pattern a different set of data would be rendered if we had /collections/bikes compared to /collections/cars.
As you can see, a number of different URL patterns share the same template file, e.g /products and /collections will both render the list-collections.liquid template.
Likewise /collections/, /collections/{collection-handle}/ and /collections/{collection-handle}/{tag} all make use of collection.liquid.
Up Next..
Now that we have a solid understanding of the key concepts associated with Shopify it’s time to move onto more code related matters.
In the next part of this series I will introduce you to Liquid, the Shopify template language, and show you how you can start to easily populate your micro templates with data from your online store. In the meantime, if you would like to learn more, a good place to start is shopify.com/fordesigners.
