Skip to main content

Alternate templates

When working with template files, you should familiarize yourself with alternate templates and how to use them.

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, or through the theme editor.

Note

You can't replace the default template with an alternate template. If the default template doesn't meet your needs, then you can edit the template code to customize it.

Anchor to Contextual templatesContextual templates

When a merchant adapts 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.<context-string>.json

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. The context value can contain either "market": "market-handle" or "b2b": true. For example, the following code contextualizes the image-banner section for market handle ca:

index.context.ca

{
"context": {
"market": "ca"
},
"parent": "index.json",
"sections": {
"image_banner": {
"blocks": {
"heading": {
"disabled": true,
"settings": {
"heading_size": "h2"
}
},
"settings": {
"show_text_box": true
}
}
}
}

Anchor to Name structureName 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:

template-name.template-suffix.template-file-type

For example, if you create an alternate JSON product template with the name of alternate, then the file name would be the following:

product.alternate.json

Anchor to Use an alternate templateUse an alternate template

After you've created an alternate template, you can apply it in the following ways:

Tip

You can identify which template is currently being used with the template object.

Anchor to Render an alternate templateRender an alternate template

Alternate templates can be rendered on the storefront with the view URL parameter. This parameter should be in the format of ?view=[template-suffix], where [template-suffix] is the template's alternate name.

For example, given the product.alternate.json template from the previous section, and a product called Example product, you can render that product with that template using the following:

/products/example-product?view=alternate
Was this page helpful?