Overview
Templates manage the content shown on each type of page within a theme.
Each page type in an online store has a related template type. You can use templates to add features that are relevant to the page type. For instance, to show a product page, the theme needs at least one product type template.
You can create different versions of the same template type for various use cases. For example, you can make a separate product template or a different page template for pages with video content.
Location
Template files are stored in the templates directory of the theme:
└── theme
├── layout
├── templates
| ├── blog.json
| ├── 404.json
| ...
...
Subtypes
Two different template file types can be used within a theme. These template file types can be used to build various template types, each representing a different type of content in the merchant’s online store.
File Types
Theme templates can use two different file types: JSON and HTML.
Some template types only support HTML file types, while others support either file type.
| Type | Description |
|---|---|
| JSON | JSON templates are data files with the .json file extension. These templates allow you to easily fill templates with content from sections. Merchants can add, remove, or rearrange sections using the theme editor.If you are using JSON templates, any HTML code must be included in sections referenced by the template. For more information, refer to JSON templates. |
| HTML | HTML templates are files with the .html file extension. You can use Handlebars helpers to access template data. |
Comparing JSON and HTML
If you want to use sections in your template, you should use JSON templates.
JSON templates offer merchants more flexibility to add, remove, and reorder sections, including app sections. Additionally, they reduce the data stored in settings_data.json by storing data directly in the template, improving theme editor performance.
Template Types
Each available template type represents a type of content in the merchant’s online store. It is possible to omit a template type. However, any page type that needs to be shown must have a matching template. For example, to show a product page, you need at least one product type template.
The following template types can be used in your theme. To learn more about each template type, click on the template name.
The gift_card template cannot be a JSON template and must be an HTML template.
| Type | Description |
|---|---|
| 404 | Renders the page content shown to customers when an invalid store URL is entered. |
| article | Renders the article page, displaying the full content of an article with a comment section for customers. This template is used for individual blog posts and similar items. (Tips: OS1.0&2.0 theme template path is /blogs/detail.) |
| blog | Renders the blog page, listing all articles within the blog. (Tips: OS1.0&2.0 theme template path is /blogs/list.) |
| cart | Renders the /cart page, providing an overview of the customer's cart contents. |
| collection | Renders the collection page, listing all products within a collection. |
| customers/account | Renders the customer account page, providing an overview of the customer's account. |
| customers/activate_account | Renders the customer account activation page, hosting the form for activating a customer account. |
| customers/addresses | Renders the customer address page, allowing customers to view and manage their current addresses and add new ones. |
| customers/login | Renders the customer login page, containing the form for logging into the customer account. |
| customers/orders | Renders the customer order list page, displaying the customer's past orders. |
| customers/order | Renders the customer order page, showing details of the customer's past orders. |
| customers/register | Renders the customer registration page, hosting the form for creating a customer account. |
| customers/forgot_password | Renders the forgot password page, allowing users to reset their password through the forgot password process. |
| gift_card.html | Renders the gift card page, displaying the gift card issued to the customer upon purchase. This must be an HTML template. |
| index | Renders the store's homepage located at the root path (/). |
| activity | Renders the store's activity page. (Tips: OS2.1 theme does not support the activity page.) |
| collections_all | Renders the collection list page, listing all collections in the store. This page is located at the store's /collections-all URL. |
| page | Renders a custom page in the store, such as About Us. |
| password | Renders the /password page, the login page shown when password protection is added to the online store. This page includes an editable message and a password form for customer access. |
| product | Renders the product page, displaying the product's media and content, along with a form for customers to select variants and add them to their cart. |
| search | Renders the /search page, displaying search results from the storefront. |
| proofing | Renders the store's proofing page. |
Structure
HTML templates have no fixed structure. For information on the content that can be included in HTML templates, see Content.
JSON templates only accept JSON files with a fixed schema and a list of acceptable attributes. For information on the JSON template schema, refer to JSON templates.
Content
The content you can reference in a template depends on whether it is a JSON template or an HTML template.
When deciding what content to include in a template, you should always consider the purpose of the template type. For example, product templates or sections within a product template should always include the product object and product form helper for customers to add product variants to their cart. Depending on your template type and approach, you may want to include these items in the sections you reference in your template.
HTML templates accept standard HTML and Handlebars. HTML templates can access any global Handlebars objects and objects associated with the template. For more details, refer to the documentation for each template type.
JSON templates only accept JSON with a fixed schema and a list of acceptable attributes. For more information, refer to JSON templates.
Usage
When using template files, you should be familiar with alternate templates and how to use them.
Alternate Templates
In some cases, you may need to create different markup for the same template. For instance, you might want to create an alternate template with different sections for specific products.
You can create alternate templates locally using the theme code editor or the theme editor.
You cannot replace the default template with an alternate template. If the default template does not meet your needs, you can edit the template code for customization.
Naming Structure
Alternate template files use the following naming structure where template_name is the template name, template_suffix_name is the alternate name, and template_file_extension is the file type, either json or html.
template_name.template_suffix_name.template_file_extension
For example, if you create an alternate JSON product template named alternate, the filename will be as follows:
collection.alternate.json
Using Alternate Templates
Once an alternate template is created, it can be applied in the following ways:
- Assign it to the associated resource in the SHOPLINE admin.
- Preview it in the theme editor.
You can identify the currently used template via the template object.
