Template

From Shopify Wiki

Jump to: navigation, search

The template variable is a global variable that gives you the name of the template used to render the current page, with the .liquid extension omitted. Because the variable is 'global', it is always defined in all layouts, templates and snippets. It is, however, not defined in *.css.liquid and *.js.liquid files.

For example, if you are on a blog landing page it will give you the value blog, whereas if you are on a product page it will give you the value product. That's because a template called blog.liquid is used to render blog landing pages, and a template called product.liquid is used to render product pages.

Alternate Templates Gotcha

Careful when you start making use of alternate templates. For example, if you want to do something on all product pages, and you make use of a few alternate product templates for some of your products, use this:

{% if template contains 'product' %}
WE ARE ON A PRODUCT PAGE.
{% endif %}

Rather than that:

{% if template == 'product' %}
WE ARE ON A PRODUCT PAGE. BUT HERE WE EXCLUDE THESE PRODUCT PAGES THAT USE AN ALTERNATE TEMPLATE. YOU MAY NOT WANT THOSE TO BE EXCLUDED.
{% endif %}

An alternate product template will contain the word 'product' in it. It will be called something like product.shirts.liquid.

The same applies when you use other types of alternate templates.

Theme Design 'best practices'

Use the template name as body class:

<body class="{{ template }}">
....
</body>

And then make use of descendant selectors in your CSS whenever it is appropriate.

I typically use this more verbose, fool-proof and precise variation:

<body class="{{ template | replace: '.', ' ' | truncatewords: 1, '' }}" id="{{ page_title | handle }}">
....
</body>

--Caroline Schnapp 20:14, 26 November 2010 (UTC)