Theme files
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 includes the following directories:
Assets
The assets directory is rendered as the Assets folder in the theme editor. 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.
Configs
The config directory is rendered as the Configs folder in the theme editor. It includes a settings_schema.json file and a settings_data.json file.
Layouts
The layout directory is rendered as the Layouts folder in the theme editor. 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.
Locales
The locales directory is rendered as the Locales folder in the theme editor. 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.
Sections
The sections directory is rendered as the Sections folder in the theme editor. It contains a theme's sections, which are reusable modules of content that can be customized and re-ordered by users of the theme.
Snippets
The snippets directory is rendered as the Snippets folder in the theme editor. 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 Liquid render tag to load a snippet into your theme.
Templates
The templates directory is rendered as the Templates folder in the theme editor. 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:
Inside the Edit HTML/CSS, click Add a new template.
In the modal that appears, select the type of template that you want to create and enter a name.
Navigate to the admin page for the content that you want to apply the alternate template to, and look for the drop-down under the Template heading.
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. The template object has several convenient attributes to help with this.
{% if template.name == 'product' %}
We are on a product page!
{% endif %}
{% if template.suffix != blank %}
We are on an alternate template!
{% endif %}