tetchi blog

Tetchi's blog about life and stuff

Shopify Theme from Scratch Part 1: theme.liquid

Shopify Theme from Scratch – setting up the theme.liquid template.


The first thing we want to do is set up our theme.liquid file. The theme.liquid file is the heart of our theme – it is required to load all of the other templates in the theme. All elements of a theme that should appear on every page of your shop should reside in theme.liquid. This includes the navigation, logo, search bar, cart link, as well as any calls for stylesheets or scripts.

This first part is a big one, so go grab a coffee, do some stretches, and let’s get going!

Have a look at Figure 1.1 below. It shows you how we’re going to be breaking up our basic theme.


Figure 1.1: The theme.liquid file broken up in to different sections

1. Add the stylesheets

Open the theme.liquid file, found inside the ‘layout’ folder. It should now look like this:

  {{ content_for_header }}

  {{ content_for_layout}}

Inside the assets folder, you’ll find two stylesheets: normalize.css and style.css. normalize.css is a CSS reset file that makes it so that browsers render elements consistently. It’s always good to start a new project with a CSS reset file included because by default, browsers render elements differently. The style.css file is where we’re going to be writing our own CSS.

Add the two lines up code in red below, right below {{ content_for_header }}.


  {{ content_for_header }}

  {{ "normalize.css" | asset_url | stylesheet_tag }}
  {{ "style.css" | asset_url | stylesheet_tag }}

Your theme is now loading the two stylesheets!

2. Add the required scripts

Next we’re going to be adding the scripts that are required to run the theme. There are four scripts that we need to add:

  • option_selection.js – contains Javascript required for the product.liquid template
  • shopify_common.js – contains Javascript required for customer accounts templates
  • customer_area.js – also contains Javascript required for the customer accounts templates
  • jquery.js – a handy Javascript framework used by many themes and websites

Below the stylesheets that we added in Step 1, add the following code in red.


  {{ content_for_header }}

  {{ "normalize.css" | asset_url | stylesheet_tag }}
  {{ "style.css" | asset_url | stylesheet_tag }}

  {{ "option_selection.js" | shopify_asset_url | script_tag }}
  {{ "shopify_common.js" | shopify_asset_url | script_tag }}
  {{ "customer_area.js"  | shopify_asset_url | script_tag }}
  {{ '//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js' | script_tag }}

3. Add the title tag

Next we’re going to add the <title> tag for our theme. We’re going to be using some Liquid to dynamically generate the title of the page that we’re on, followed by the name of your shop. The <title> is really important because it tells the user where they are on the page (it’s also very important for SEO).


Figure 1.2: The <title> tag is shown on top of the browser’s window and/or tab

Add the code in red below.

  {{ page_title }} - {{ shop.name }} 

  {{ content_for_header }}

4. Set up the HTML markup

Still in theme.liquid, have a look at the section between the <body&rt; tags.

  {{ content_for_layout}}

You may be wondering, “what on Earth is this {{ content_for_layout }} tag?”. This is a very important Liquid tag that resides in theme.liquid, and it outputs the contents of the template you’re currently viewing. For example, if you’re on a product page, {{ content_for_layout }} looks at the contents of the product.liquid template and outputs it.

Wrap the {{ content_for_layout }} with a div with class “content”. Then, wrap it in another div with class “container”, as follows:

{{ content_for_layout}}

The .container class will be used to give our layout a fixed width, and also to horizontally center our layout in relation to the browser. The .content class will be used to target elements within this div later on. Please make sure that the .container div is the parent of the .content div!

Next we’re going to add the shop’s name. It’s standard practice for websites to have the logo/shop name be a link to the homepage. Let’s go ahead and add the code for that. The {{ shop.name }} variable outputs the shop name that you put it in General Settings.


{{ shop.name }}

{{ content_for_layout}}

Let’s add the main navigation. To do this, we’re going to set up a Liquid for loop that goes through every link in the link list with handle “main-menu”, and output each one. The “main-menu” link list is a default link list that is found in every shop. The “link.active” part of the code checks if the URL of the page that you’re currently looking at matches the URL of the link, and if it does, it applies a class called “active” to the link. This is so we can highlight the current link in the main menu.

Paste the code in red below, right under the line for the shop name.


{{ shop.name }}

{{ content_for_layout}}

We’ll then add the code for the “footer” link list, which is also a default link list. Paste the code in red below.


{{ shop.name }}

{{ content_for_layout}}

Finally, we’ll add the code for the toolbar. Paste the code in red below. Notice that the code for the toolbar sits outside of .container – this is because we want the black area of the tool bar to stretch to the full width of the browser. Within it, we have a div with .container so that everything within the black bar is centered.

For now, we’re just going to put in some dummy text in the toolbar. We’ll be filling that up with some useful links later :)

Tool bar here!

{{ shop.name }}

{{ content_for_layout}}

Alright, now that we have the basic skeleton of the theme set up, we’ll make it a bit prettier with some CSS.

5. Sprinkle in some CSS

Open style.css. We’ll start off by adding some styles to some selectors for basic HTML elements under a section called “global css”. Later on, we’ll also add classes that are re-used often here.

/**** global css ****/

body{font-family:Arial, Helvetica, sans-serif;}
a {text-decoration:none; color:#5fa6d8;}

To keep things organized, we’re going to create sections within our stylesheet for each template and snippet. Below the global CSS section, add the following code in red:

/**** global css ****/

body{font-family:Arial, Helvetica, sans-serif;}
a {text-decoration:none; color:#5fa6d8;}

/**** theme.liquid ****/

.container{width: 960px; margin: 0 auto;}
.header-toolbar{background:#000; color: #fff; font-size:12px; padding:10px 0;}

.logo{font-size: 60px; margin:40px 0; text-align:center;}
.logo a{color: #000;}

.main-menu{text-align: center; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}
.main-menu li{display: inline-block; padding:0px 20px;}
.main-menu a{ color: #4e4e4e; font-weight:bold;}
.main-menu a:hover, .main-menu .current a{color:#989898;}

.content{padding:30px 0;}

footer{text-align:center; font-size: 12px; border-top: 1px solid #ccc; margin-bottom:150px;}
footer ul{padding:10px 0;}
footer li{display:inline-block;}
footer li a{padding:0 20px; color: #989898;}


Your theme should now look like this:


Not too shabby! I mean, it doesn’t actually do anything yet, but it’s a good start :D

← Back to table of contents


  • Rachel
    Rachel on May 15th, 2013

    I believe that in Step 3, it should be “page.title” rather than “page_title”… Unless I’m mistaken?

    Thank you so much for writing this! Super helpful :)

  • tetchi
    tetchi on May 16th, 2013

    @Rachel Thank you very much for reading! :)

    {{ page_title }} is actually the correct Liquid there :) It’s a global variable used to output the page’s title (listed here: http://docs.shopify.com/themes/liquid-variables/global). {{ page.title }} would output the title of a page that you would make in the Pages section of the admin (part of the “page” object: http://docs.shopify.com/themes/liquid-variables/page). It’s very easy to mix those up though, haha!

  • Rachel
    Rachel on May 16th, 2013

    Ooooh geez, hahahaha. WHHHHYYYY did they do that. That hurts my brain. Thanks for responding so speedily! Much appreciated. Can’t wait to keep reading more! :)

  • Ben
    Ben on June 2nd, 2013

    Hey tetchi,

    Great tutorial, I’m going through this to migrate a theme from WordPress and make sure I have all the basic functionality of Shopify covered.

    One thing on your zip file – in the assets directory, style.css is named “style.css.liquid” instead of “style.css”. Minor thing but might switch a few people up.


  • Ben
    Ben on June 2nd, 2013

    Ah weird so that’s intentional? There’s an autogenerated .css file that comes from a .css.liquid file? Does that hold true for any .css.liquid file?

  • tetchi
    tetchi on June 3rd, 2013

    @Ben Ah, I can see how that can be confusing! Thanks for catching that, I’ve changed it back to “style.css”.

    It’s not required to add a .liquid extension to stylesheets. It’s only necessary if you want to use Liquid for theme settings in your stylesheet (will be covered in later chapters :)). If you do have stylesheet with a .liquid extension, it will still be parsed as a regular stylesheet by theme.liquid.

  • Kas
    Kas on August 27th, 2013

    Me again ;). I’ve got a question about the javascript files. We’ve added them, but they are not in the assets folder. Is it how it’s supposed to be?

  • tetchi
    tetchi on August 27th, 2013

    Hey Kas, yep that is totally fine. option_selection.js, shopify_common.js, and
    customer_area.js are stored on Shopify’s servers, and the jQuery script is stored on Google’s servers, so they don’t need to be added to the theme assets. :)

  • Kas
    Kas on September 4th, 2013

    Hello, me again :). I was just wondering recently – do you need to link to option_selection.js, shopify_common.js and customer_area.js files, and if yes, what does each of it do?

  • Kas
    Kas on September 4th, 2013

    Hah, sorry, forgot I’ve asked the question already. You can delete it ;)

  • Anna
    Anna on October 30th, 2013

    Hi, I’m a complete newbie. I’m really struggling to understand this whole liquid coding. I already have a html 5 theme that I want to use, but I have to get it into liquid coding first :/. I’m so confused as to where I even begin :?. Can someone help me out please? Can I email you it or can I get major pointers?

  • Nigel
    Nigel on February 3rd, 2015

    hello, how can i use custom fonts for the header and also body texts. :)

  • Kasra Khosravi
    Kasra Khosravi on May 26th, 2016

    Great article Tetchi. Thanks ;)

    RANIEL RILLON on July 16th, 2016


    Nice TUTS..

    actually this is my 2nd time AROUND to visit ur TUTS..

Post a comment