How to Use Alternate Templates in Shopify Theme Development

How to Use Alternate Templates in Shopify Theme Development

Shopify theme development tutorial: alternate templates

If you are new to Shopify theme building your first impression might be that every collection, page, and product page is controlled by a single template. Luckily this isn’t the case and there are, in fact, a number of ways you can apply different, or “alternate”, templates to these various page types.

This Shopify tutorial will run you through the basics of creating your first alternate template so that you can start customizing your Shopify themes even further.

You can see a full demo in the Shopify tutorial screencast below:

Creating an alternate template

Creating an alternate template is straightforward. There are two approaches.

If you are using the Shopify Theme gem or are uploading your theme using a ZIP file, you can simply add a file to your themes templates folder using the following filename syntax:

default_template_name.*.liquid

For example, an alternate page template could be called:

page.about.liquid

Or, for an alternate product template, you could use:

product.shoes.liquid

The name itself is irrelevant — the more obvious the better so your clients can recognize it's purpose easily.

The second approach is to create an alternate template within the Shopify admin itself. Here’s how:

  1. From your Shopify admin, click Online Store, then click Themes
  2. Find the theme you want to edit, click the … button, then click Edit HTML/CSS
  3. Under the Template folder, click the Add a new template link
  4. Choose the appropriate option for your new template and give it a meaningful name
  5. Edit and save your new template as you normally would

A full description and run through is available in the Shopify Docs.

Selecting an alternate template 

Shopify tutorial: Liquid and selecting alternative templates

Once an alternate template exists, a new drop-down menu will appear in the relevant edit page in the Shopify admin. This will allow you to select which template you would like applied to the collection, page, or product. Shopify will use the base template by default so you won’t need to change every existing item — just the ones you wish to be rendered with the new alternate template.

Switch templates via the URL

Finally, there’s one other option for template selection that you have at your disposal. That is being able to select a particular template using the view querystring.

Here's an example for you to review (NB: these links are for demo purposes only).

http://store.myshopify.com/products/blue-t-shirt?view=special

In this instance, Shopify will load a product template called:

product.special.liquid

This technique works for all templates. Here’s a collection page example:

http://store.myshopify.com/collections/computers?view=list

In this case, Shopify will load a collection template called:

collection.list.liquid

If the template requested does not exist, Shopify will fail gracefully and use the default template, or the template specified in the admin. You can see a full demo of this with a live theme in the Shopify tutorial screencast above.

A really common use case for this technique is for switching between a list and grid view within a product collection.

Start implementing this Shopify tutorial today

Alternate templates are a great example of the power of Shopify themes. By taking a few minutes to understand how to create them, apply them, and even switch them via a querystring, you start to expose the power of the platform and offer your clients, and their customers, even richer ecommerce experiences.

This is the first in a series of Shopify tutorials covering Liquid and themes that we'll be publishing throughout 2016. If you would like to be notified of new articles, subscribe for updates.

Photo of Keir Whitaker

About the Author

Keir is based in the UK and works on the Partner Growth Team at Shopify. You'll often find him at conferences and running workshops on Shopify theme building. You can subscribe to his newsletter, read his latest articles on Medium, listen to his podcast, and follow him on Twitter.

Grow your business with the Shopify Partner Program

Learn more