Theme templates

Shopify themes are made up of Liquid template files, each serving their own unique purpose. For example, collection.liquid is used to display multiple products, and product.liquid is used to show the details of a single product. Shopify themes also include a settings_schema.json file, which is a form that makes it easy for the user to customize the look-and-feel of the theme.

Theme Structure

A Shopify theme comprises the following directories:

The assets directory

The assets directory is rendered as the Assets folder in the Admin. It contains all the assets used in the theme, including images, stylesheets, and javascript files.

Use the asset_url filter to reference a theme asset in your templates.

The configs directory

The config directory is rendered as the Configs folder in the Admin. It includes a settings_schema.json file and a settings_data.json file.

The settings_schema.json file can be used to render a theme's Theme Settings form when changing the look and feel of a store.

This directory also contains the settings_data.json file, which stores the merchant's Theme Settings preferences.

The layout directory

The layout directory is rendered as the Layouts folder in the Admin. It contains theme layout templates, which by default is the theme.liquid file. All Liquid templates inside the templates folder are rendered inside the theme.liquid file.

In addition to the theme.liquid, stores on Shopify Plus also have a checkout.liquid layout file.

The locales directory

The locales directory is rendered as the Locales folder in the Admin. It contains the theme's locale files, which are used to provide translated content for the theme.

Among other files, this folder contains the default English locale file, en.default.json.

The snippets directory

The snippets directory is rendered as the Snippets folder in the Admin. It contains all the theme's Liquid snippet files, which are bits of code that can be referenced in other templates of a theme.

Use the include tag to load a snippet into your theme.

The templates directory

The templates directory is rendered as the Templates folder in the Admin. It contains all other Liquid templates, including those for Customer Accounts:

Alternate Templates

There might be cases where you need a different markup for the same template. For example, you might want a sidebar on one product page but not in another. The workaround for this is to create alternate templates.

To create an alternate template:

  1. Inside the Edit HTML/CSS, click Add a new template.

  2. In the modal that appears, select the type of template that you want to create and enter a name.

    Alt template
  3. Navigate to the Admin page of the content that you want to apply the alternate template to, and look for the drop-down under the Template heading.

    Alt template select
  4. Select the template that you want to apply, and hit Save.

Alternate templates inside if statements

There might be cases where you have several versions of a template and want to write an if statement that applies to all of them. For example, you might have multiple alternate product templates and need to output a message for all product templates. In this case, use contains as follows:


{% if template contains 'product' %}
We are on a product page!
{% endif %}

Do not use the == operator, as shown in this example:


{% if template == 'product' %}
We are on a product page, but here we exclude these product pages that use an alternate template. You may not want those to be excluded.
{% endif %}

The effect of == would be to ignore all alternate product templates and output the message only for the default product.liquid template.

Want to discuss this page?

Visit the Shopify Community