Chapter 4

Theme.liquid

theme.liquid

Think of theme.liquid as the master template. If you have any HTML element that needs to be on every single page of your website, put it in theme.liquid.

In you Vision folder navigate to your theme and open the layout folder and open theme.liquid in your HTML/CSS editor. Delete the code that is already there - we are starting from scratch.

There are 2 things that every theme.liquid file needs {{ content_for_header }} and {{ content_for_layout }}. Put {{ content_for_header }} in your <head></head> and {{ content_for_layout }} where you want your shop's content to be rendered in the <body></body>. Put the code below in your index.liquid

<html>
<head>
  {{ content_for_header }}
  <title>untitled</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>untitled</title>
</head>

<body>
  <div id="wrapper">
    <div id="header">
      <h1>Simple Theme</h1>
    </div><!-- #header -->
    <div class="content">
      {{ content_for_layout }}
    </div><!-- .content -->
  </div><!-- #wrapper -->
</body>
</html>

Refresh your browser and things look pretty bare.

Theme Contentheader

Your first line of Liquid

Let's generate our shop's name with Liquid

<div id="header">
  <h1>{{ shop.name }}</h1>
</div><!-- #header -->

Remember we use the {{ }} liquid tag because we want to output something. shop.name is a template object.

Generating the <title> tag

We want to show our users a different title tag for each page. Here is a simple way to do it using two template objects:

<head>
  {{ content_for_header }}
  <title>{{ shop.name }} - {{ page_title }}</title>
</head>
Theme Titletag
Navigation

Shopify's navigations are called Linklists. They are template objects and have properties like .id, .title, .handle, .links, etc. Linklists are created in the Shopify Admin in the Navgiation tab. Vision comes with pre-made Linklists.

To display our theme's navigation we use this code:

  …
  <div id="header">
  <h1>{{ shop.name }}</h1>
  <ul class="navigation">
    {% for link in linklists.main-menu.links %}
      <li><a href="{{ link.url }}">{{ link.title }}</a></li>
    {% endfor %}
  </ul>
  </div><!-- #header -->
  …

We are using a lot of new concepts here. The first one is the {% for %} logic tag. This tag tells Shopify to go through every "thing". In this case that "thing" is every link in the Linklist. The syntax for a {% for %} logic tag is this:

{% for something in something %}
   output this
{% endfor %}

{% for link in linklists.main-menu.links %} is a little tricky to understand at first, so let's break it down:

  1. We need to tell Shopify where to look for our navigation links, so we tell it to use the linklist with the handle: main-menu. Giving us linklist.main-menu
  2. Now we need to tell Shopify what to look for in linklist.main-menu so we append .links to linklist.main-menu.links
  3. The last thing we need to tell Shopify is what we want in linklist.main-menu.links. We want to find the individual links so we write {% for link in linklist.main-menu.links %}

Now that we have the logic in place, we need to tell Shopify to output our navigation links. We use the {{ link.url }} and {{ link.title }} to give us that link's url and title.

Finally we have the {% endfor %} to Shopify where we want to end our loop. Below are my results.

Theme Nav