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:
For example, an alternate page template could be called:
Or, for an alternate product template, you could use:
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:
- From your Shopify admin, click Online Store, then click Themes
- Find the theme you want to edit, click the … button, then click Edit HTML/CSS
- Under the Template folder, click the Add a new template link
- Choose the appropriate option for your new template and give it a meaningful name
- 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
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).
In this instance, Shopify will load a product template called:
This technique works for all templates. Here’s a collection page example:
In this case, Shopify will load a collection template called:
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.