Skip to main content

Templates

Templates control what's rendered on each type of page in a theme.

Each page type in an online store has an associated template type. You can use the template to add functionality that makes sense for the page type. For example, to render a product page, the theme needs at least one template of type product. Similarly, to render a metaobject page, the theme needs at least one template of type metaobject/{metaobject-type}, for example: metaobject/book or metaobject/author, depending on the type of metaobject definition.

You can create multiple versions of the same template type to create custom templates for different use cases. For example, you can create a separate product template for outerwear products, or a separate page template for pages with video content.

Templates control what is rendered on each type of page in a theme.
Templates control what is rendered on each type of page in a theme.

There are two different file types you can use for a theme template: JSON and Liquid. These template file types can be used to build multiple template types, each of which represents a type of content in a merchant's online store.

TypeDescription
JSONJSON 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 using the theme editor.

If you're using a JSON template, then any HTML or Liquid code needs to be included in a section that's referenced by the template.

To learn more, refer to JSON templates.
LiquidLiquid templates are Liquid markup files, with the .liquid file extension. You can add Liquid and HTML directly to Liquid templates.

To learn more, refer to Liquid templates.

Anchor to Choosing JSON vs LiquidChoosing 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.


Each available template type represents a type of content in a merchant's online store. No template types are required. However, you must have a matching template for any page type that you want to render. For example, to render a product page, you need at least one template of type product.

You can have a maximum of 1000 JSON templates in your theme, across all template types. For example, if you have 20 JSON product templates, 10 JSON page templates, and 5 JSON collection templates, then you can add up to 965 additional templates to the theme.

You can use the following template types in your theme. To learn more about each template type, click on the template name.

TypeDescription
404Renders page content that is shown to customers if they enter an invalid URL for the store.
articleRenders the article page, which contains the full content of the article, as well as an optional comments section for customers. This template is used for items like individual posts in a blog.
blogRenders the blog page, which lists all articles within a blog.
cartRenders the /cart page, which provides an overview of the contents of a customer’s cart.
collectionRenders the collection page, which lists all products within a collection.
customers/accountRenders the customer account page, which provides an overview of the customer’s account.
customers/activate_accountRenders the customer account activation page, which hosts the form for activating a customer account.
customers/addressesRenders the customer addresses page, which allows customers to view and manage their current addresses, as well as add new ones.
customers/loginRenders the customer login page, which hosts the form for logging into a customer account.
customers/orderRenders the customer order page, which displays the details of a customer’s past orders.
customers/registerRenders the customer register page, which hosts the form for customer account creation.
customers/reset_passwordRenders the password reset page, which hosts the form to reset the password for a customer account.
gift_card.liquidRenders the gift card page, which displays the gift card issued to a customer upon purchase.

This must be a Liquid template.
indexRenders the home page of the store, located at the root URL (/).
list-collectionsRenders the collection list page, which lists all the store's collections. This page is located at the /collections URL of the store.
pageRenders the shop’s pages, such as About us and Contact us.
passwordRenders the /password page, which is a landing page shown when you add password protection to your online store. This page includes a message that is editable by merchants, and the password form for customers to gain access to the store.
productRenders the product page, which contains a product's media and content, as well as a form for customers to select a variant and add it to the cart.
robots.txt.liquidRenders the robots.txt file, which is hosted at the /robots.txt URL. This file tells search engines which pages can, or can't, be crawled on a site.

This must be a Liquid template.
searchRenders the /search page, which displays the results of a storefront search.
metaobjectRenders metaobject pages, such as “artists” or “authors”. To render each metaobject entry as an individual page, the metaobject definition must have the web page capability.
Note

The gift_card and robots.txt templates can't be JSON templates, so you must make them Liquid templates. Other template types support either template file type.


Template files are located in the templates directory of the theme:

└── theme
├── layout
├── templates
| ├── 404.json
| ├── article.json
| ...
...

The content that you can include in a template depends on whether it is a JSON template or a Liquid template.

You should always keep the goal of the template type in mind when deciding what content you want to include in a template. For example, a product template, or a section in the product template, should always include the product object, which renders product details, and the product form tag, which lets customers add a product variant to the cart. Depending on your template type and approach, you might want to include these items in a section that you reference in the template.


Was this page helpful?