create own custom Shopify Templates


Templates control the look and feel of accroding to your store’s content. template is 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 and 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’

Advertisements