Skip to content

Templates ​

Last updated View as Markdown

Templates control what’s rendered on each page in a theme.

Each page type in the storefront should have an associated template type. These can be used to add functionalities and experiences that belong in said pages. For example, to render a product page, the theme needs at least one template of type product likewise for cart.

Location ​

Templates are located in the templates directory of the theme

bash
└── theme
    ├── layout
    ├── templates
    │   ├── article.json
    │   ├── product.json
    │   ...
    ...

Format ​

Templates are JSON files. Each one lists the sections that render on the page, their order, and their settings, and the theme editor reads and writes this file as sellers customize the page. See JSON templates for the full property reference.

Template types ​

Each available template type represents a type of page that is available in the seller’s storefront. No types are required, but you must have implemented a type for each page that you want to render, otherwise it will fall back to the defaults.

TypeDescription
pageRenders a standalone content page.
cartRenders the cart page.
indexRenders the store's landing page.
searchRenders the search results page.
productRenders the product page.
thankyouRenders the post-purchase thank-you page.
collectionRenders a single collection's products.
list-collectionRenders the list of all collections.
upsellRenders the upsell offer page.
customer-loginRenders the login and password recovery pages.
customer-registerRenders the page that creates an account.
customer-accountRenders the customer account and its orders.
customer-orderRenders one order of the customer.
customer-addressesRenders the customer addresses.
customer-reset-passwordRenders the page that sets a new password.

Content ​

Let the template type's purpose drive its content. A product template (or a section it references) needs the product object to render details and the product form tag to let customers add a variant to the cart. Put shared building blocks in a section and reference it from the template.