One question I see often in Shopify is “how do I make my metadata for the different pages on my store?”. I’m not sure how this affects ranking in search engines (in fact if anyone can clarify this for me, that would be awesome), but in this tutorial I will just show you how this is done. This tutorial will also serve as a refresher on how to use conditional statements with Liquid.

A Brief Overview of Conditional Statements in Liquid

Conditional statements are ways to tell Liquid (or any other programming language) to do something based on certain conditions. For example, you can tell the code “If condition A is true, take action A. If condition B is true, take action B. If neither are true, take action C”. Below is an example of a conditional statement in Liquid:

{% if template == "index" %}
       You are on the index page!
{% elsif template == "collection" %}
       You are on the collection page!
{% else %}
       You are on a page that is NOT the index page nor the collection page!
{% endif %}

The code above will output the line in red if the visitor is on the index page of the Shopify store. Conversely, it will output the line in green if the visitor is on the collection page of the Shopify store. If the visitor is on a page that is not the index page nor the collection page, it will output the line in blue.

You can also have conditional statements within conditional statements. For example:

{% if template == "page" %}
       {% if page.handle == "about-us" %}
              You are looking at the About Us page!
       {% endif %}
{% endif %}

The code above will first run the conditional statement marked in red, which checks if the Liquid template that is currently being used is “page”. If it is, it will go to the next conditional statement below, marked in green. If not, it will go the end of the conditional statement, which will result in nothing being done.

The conditional statement marked in green checks to see if the handle of the page is equal to “about-us”. If it is, it will output the line “You are looking at the About Us page!”. If the handle of the page does not equal “about-us”, it will not do anything.

By using a combination of if and elsif statements, as well as nested conditional statements, you can set up different metadata for every template or even for every different product, page, or collection that you may have.

1. Open theme.liquid

If you are editing directly through the Shopify admin, theme.liquid is accessed by going to Assets > Theme Editor, and clicking on the thumbnail that has the label “theme.liquid”.

If you are editing offline with Vision, open “theme.liquid” in the layout folder of your theme.

2. Add the Conditional Statements

The head section of your theme.liquid should look something like the code below. It may not look exactly the same because you may have extra Javascript or CSS files, but what’s important here is that the if-statement goes under the “Content-Type” meta tag.

A Shopify theme can have up to 9 templates: article, blog, cart, collection, index, page, product, 404, and search. Each template corresponds to a specific section of a site – for example, “index” is the template used the first page of your Shopify store, and “product” is the template used for when you’re viewing a single product. In this example, we will be using 4 of the 9 available templates: index, page, product, and collection.

{% if  template == "index" %}
      Index metadata goes here.
{% elsif template == "collection" %}
      Collection metadata goes here.
{% elsif template == "product" %}
      Product metadata goes here.
{% elsif template == "page" %}
      Page metadata goes here.
{% endif %}

{{ 'main.css' | asset_url | stylesheet_tag }}
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
{{ content_for_header }}

In the code above, I am checking to see which of the four templates the visitor is currently seeing: index, collection, product, or page. Once this is done, you can enter in more conditional statements to set up metadata for specific pages, collections, or products.

{% if  template == "index" %}
      Index metadata goes here.
{% elsif template == "collection" %}
      {% if collection.handle == "all" %}
             Enter in metadata for 'all' collection here.
      {% elsif collection.handle == "summer" %}
             Enter in metadata for 'summer' collection here.
      {% endif %}
{% elsif template == "product" %}
      {% if product.handle == "t-shirt" %}
             Enter in metadata for 't-shirt' product here.
      {% elsif product.handle == "baseball-hat" %}
             Enter in metadata for 'baseball-hat' product here.
      {% endif %}
{% elsif template == "page" %}
      {% if page.handle == "about-us" %}
             Enter in metadata for 'about-us' page here.
      {% elsif page.handle == "contact-us" %}
             Enter in metadata for 'contact-us' page here.
      {% endif %}
{% else %}
      Enter in default metadata in case none of the above conditions are met.
{% endif %}

Using the format above, you can enter in different metadata descriptions and keywords for every different template, product, page, or collection. In this example, I only put two elsifs for each code block, but you can add as many elsif statements as you desire. Please click here to see an example of what the head section of your theme.liquid might look like.

Conclusion

As you can see, conditional statements can give you a lot of control over what is outputted on a page, and metadata is just one of many of its applications. In a future tutorial, I would like to go through how to accomplish the same thing with Liquid’s switch statements.

UPDATE 09/23/2009:

You can pretty much forget about using meta keywords for your sites – as explained by Google here. You should still use meta description though!