Templates
From Shopify Wiki
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.
- 404.liquid - Your theme's 404 page
- Article.liquid - Renders articles in the blog
- Blog.liquid - Renders your blogs
- Cart.liquid - Renders your cart page
- Collection.liquid - Renders your collection page
- Index.liquid - Renders your index/home page
- Page.liquid - Renders your pages
- Product.liquid - Renders your products
- Search.liquid - Renders your search
- Checkout CSS - Your checkout's css stylesheet
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'
