Templates

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

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

Liquid templates are Liquid markup files, with the .liquid file extension.

Template files

You can use the following template types in your theme:

Alternate Templates

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:

Name structure

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 json or liquid:

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:

Render an alternate template in a published theme

Alternate templates can be rendered on the storefront with the view URL parameter, in the format of ?view=[template-suffix], where [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:

Render an alternate template in an unpublished theme

Alternate templates can be rendered in the theme editor with the view URL parameter. Use the format %3Fview%3D[template-suffix], where [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 in the theme editor 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:

  1. In the Templates folder, click Add a new template.

  2. In the modal that appears, click the template type that you want to create, and then enter a name.