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.

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).

Add the code in red below.

  
   

  {{ 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;}
a:hover{color:#84ddf2;}
p{line-height:1.45em;}

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;}
a:hover{color:#84ddf2;}
p{line-height:1.45em;}


/**** 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;}

Conclusion

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