- CSS in checkout.liquid
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.
A Shopify theme includes the following directories:
Use the asset_url filter to reference a theme asset in your templates.
config directory is rendered as the Configs folder in the theme editor. It includes a settings_schema.json file and a
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
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,
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 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 include tag to load a snippet into your theme.
templates directory is rendered as the Templates folder in the theme editor. It contains all other Liquid templates, including those for customer accounts:
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.