Templates

From Shopify Wiki

Jump to: navigation, search

Templates control the look and feel of you store's content. Let's say a customer views one of your shop's products, Shopify will use the product.liquid template to show render the product page. If a customer views your shop's blog, Shopify will use blog.liquid to render the blog page.

Shopify Templates

  • Theme.liquid - Think of this as your "container" template. All the other templates below render inside of theme.liquid. If your site has a reoccuring element like a sidebar or navigation put it inside of theme.liquid.

Include Tag & Snippets

The include tag let's you include snippets in your layout. Snippets are great if you use the same html over and over on certain templates. The syntax is simple...

{% include 'snippet-name' %}

When you include a snippet it will have access to the currently assigned variables within the parent template. The optional with clause lets you specify a value which is bound to the snippet's name within the snippet's context:

{% include 'foo' with 'bar' %}

Here is an example: Pretend we have a snippet called color.liquid and it contains this..

color: '{{ color }}'
shape: '{{ shape }}'

Our theme.liquid file looks like this...

{% assign shape = 'circle' %}
{% include 'color' %}

{% include 'color' with 'red' %}

{% include 'color' with 'blue' %}

{% assign shape = 'square' %}
{% include 'color' with 'red' %}

Output is:

color: shape: 'circle'

color: 'red' shape: 'circle'

color: 'blue' shape: 'circle'

color: 'red' shape: 'square'