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 typeproduct. Similarly, to render a metaobject page, the theme needs at least one template of typemetaobject/{metaobject-type}, for example:metaobject/bookormetaobject/author, depending on the type of metaobject definition.
You can createmultiple versions of the same template typeto 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.
Location
锚点链接到秒tion titled "Location"Template files are located in thetemplatesdirectory of the theme:
Subtypes
锚点链接到秒tion titled "Subtypes"You can use two different templatefile typesin your theme. These template file types can be used to build multiple模板类型, each of which represents a type of content in a merchant's online store.
File types
锚点链接到秒tion titled "File types"There are two different file types you can use for a theme template: JSON and Liquid.
Some template types support only the Liquid file type, while other template types support either template file type.
| Type | Description |
|---|---|
| JSON | JSON templates are data files with the.jsonfile extension. These templates let you easily populate your template with content from部分. 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 toJSON templates. |
| Liquid | Liquid templates areLiquidmarkup files, with the.liquidfile extension. You can add Liquid and HTML directly to Liquid templates. |
JSON vs. Liquid
锚点链接到秒tion titled "JSON vs. Liquid"If you want to use部分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 insettings_data.json. Instead, data is stored directly in the template, which improves the performance of the theme editor.
Template types
锚点链接到秒tion titled "Template types"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 typeproduct.
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.
| Type | Description |
|---|---|
| 404 | Renders page content that is shown to customers if they enter an invalid URL for the store. |
| article | Renders 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. |
| blog | Renders the blog page, which lists all articles within a blog. |
| cart | Renders the/cartpage, which provides an overview of the contents of a customer’s cart. |
| collection | Renders the collection page, which lists all products within a collection. |
| customers/account | Renders the customer account page, which provides an overview of the customer’s account. |
| customers/activate_account | Renders the customer account activation page, which hosts the form for activating a customer account. |
| customers/addresses | Renders the customer addresses page, which allows customers to view and manage their current addresses, as well as add new ones. |
| customers/login | Renders the customer login page, which hosts the form for logging into a customer account. |
| customers/order | Renders the customer order page, which displays the details of a customer’s past orders. |
| 客户/注册 | Renders the customer register page, which hosts the form for customer account creation. |
| customers/reset_password | Renders the password reset page, which hosts the form to reset the password for a customer account. |
| gift_card.liquid | Renders the gift card page, which displays the gift card issued to a customer upon purchase. This must be a Liquid template. |
| index | Renders the home page of the store, located at the root URL (/). |
| list-collections | Renders the collection list page, which lists all the store's collections. This page is located at the/collectionsURL of the store. |
| page | Renders the shop’s pages, such asAbout usandContact us. |
| password | Renders the/passwordpage, which is a landing page shown when youadd 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. |
| product | Renders 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.liquid | Renders therobots.txtfile, which is hosted at the/robots.txtURL. This file tells search engines which pages can, or can't, be crawled on a site.This must be a Liquid template. |
| search | Renders the/search页面,该页面显示的结果storefront search. |
| metaobject | Renders 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. |
Schema
锚点链接到秒tion titled "Schema"A Liquid template doesn't have a fixed schema. Refer toContentfor information about what you can include in a Liquid template.
A JSON template accepts only a JSON file with a fixed schema and list of accepted attributes. For information about the schema of a JSON template, refer toJSON templates.
Content
锚点链接到秒tion titled "Content"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 theproductobject, which renders product details, and theproduct 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 asectionthat you reference in the template.
A Liquid template accepts standard HTML and Liquid. Liquid templates can access anyglobal Liquid objects, as well as the object that's associated with the template. For more information, refer to thedocumentation for each template type.
A JSON template accepts only JSON with a fixed schema and list of accepted attributes. For more information, refer toJSON templates.
When working with template files, you should familiarize yourself with alternate templates and how to use them.
Alternate templates
锚点链接到秒tion titled "Alternate templates"In some cases, you might need to create different markup for the same template. For example, you might want to create an alternate template that includes different sections for specific products.
You can create an alternate template locally, through the theme code editor, orthrough the theme editor.
Contextual templates
锚点链接到秒tion titled "Contextual templates"When a merchantadapts a template for a specific buyer context, a new contextual template file is created. The file takes the name of the context in the following format:index.context.
A contextual template file includes the overrides that you make to the template for a context. The context and parent template are defined at the top of the template. Thecontextvalue can contain either"market": "market-handle"or"b2b": true. For example, the following code contextualizes theimage-bannersection for market handleca:
Name structure
锚点链接到秒tion titled "Name structure"Alternate template files use the following name structure, wheretemplate-nameis the template name,template-suffixis the alternate name, andtemplate-file-typeis the file type, which is eitherjsonorliquid:
For example, if you create an alternate JSON product template with the name ofalternate, then the file name would be the following:
Use an alternate template
锚点链接到秒tion titled "Use an alternate template"After an alternate template has been created, it can be applied in the following ways:
- It can beassigned to an associated resourcein the Shopify admin.
- It can bepreviewed in the theme editor.
- It can berendered on the storefrontwith the
viewURL parameter.
Render an alternate template
锚点链接到秒tion titled "Render an alternate template"Alternate templates can be rendered on the storefront with theviewURL parameter. This parameter should be in the format of?view=[template-suffix], where[template-suffix]is the template's alternate name.
For example, given theproduct.alternate.jsontemplate from the previous section, and a product calledExample product, you can render that product with that template using the following: