Templates control what's rendered on each type of page in a theme.
Template files are hosted in the
templates directory of the theme.
Template file types
There are two different file types you can use for a theme template:
JSON vs. Liquid
If you want to use sections in a template, then you should use a JSON template.
JSON templates provide more flexibility for merchants to add, remove, and reorder sections, including app sections. Additionally, they minimize the amount of data in settings_data.json. Instead, data is stored directly in the template, which improves the performance of the theme editor.
JSON templates are data files with the
.json file extension. These templates let you easily populate your template with content from sections. Sections can be added, removed, or rearranged by merchants through the theme editor.
To learn more, refer to JSON templates.
Liquid templates are Liquid markup files, with the
.liquid file extension.
You can use the following template types in your theme:
- gift_card.liquid (Liquid only)
- robots.txt.liquid (Liquid only)
In some cases, you might need to create different markup for the same template. For example, you might want to include different sections for specific products. To do this, you can create an alternate template.
You can create an alternate template in two ways:
Alternate template files use the following name structure, where
template-name is the template name,
template-suffix is the alternate name, and
template-file-type is the file type, which is either
For example, if you create an alternate JSON product template with the name of "alternate", then the file name would be the following:
Use an alternate template
After an alternate template has been created, it can be applied in two ways:
- Merchants can assign it to an associated resource within the admin.
- It can be rendered on the storefront with the
Render an alternate template
Alternate templates can be rendered on the storefront with the
view URL parameter, in the format of
[template-suffix] is the template's alternate name.
For example, given the
product.alternate.json template above, and a product called Example product, you can render that product with that template using the following:
Create an alternate template locally
If you want to create an alternate template while editing a theme locally, then you need to ensure that the file name follows the name structure.
Create an alternate template through the theme code editor
You can create an alternate template through the theme code editor by following the steps below:
In the Templates folder, click Add a new template.
In the modal that appears, click the template type that you want to create, and then enter a name.