A theme controls the organization, features, and style of a merchant's online store. Theme code is organized with a standard directory structure of files specific to Shopify themes, as well as supporting assets such as images, stylesheets, and scripts.
Theme files fall into the following general categories:
- Markup and features - These files control the layout and functionality of a theme. They use Liquid to generate the HTML markup that makes up the pages of the merchant's online store.
- Supporting assets - These files are assets, scripts, or locale files that are either called or consumed by other files in the theme.
- Config files - These files use JSON to store configuration data that can be customized by merchants using the theme editor.
Markup and features
The following components determine the organization of each page:
|1||The layout file||The base of the theme. Use the layout file to host repeated theme elements like headers and footers.|
|2||The template||The template that controls what's displayed on a page. Each theme should include different types of templates to display different types of content, such as the home page and products. You can also create multiple templates for the same resource type and associate them with your store resources, to allow for variation.
JSON templates act only as a wrapper for sections, while Liquid templates contain code.
|3||The sections rendered by the template||Reusable, customizable modules of content that merchants can add to JSON templates.|
|4||The blocks that each section contains||Reusable, customizable modules of content that can be added to sections, and removed and reordered.|
form tag with a
You can add supporting assets to your theme to control the presentation of components and features, or to store reusable pieces of code that can be used across components.
In addition, you can translate your theme into different languages using locale files. Locale files contain a set of translations for text strings used throughout the theme. Store locale files in the locales directory of the theme.
Allowing for customization of theme components
Merchants can customize their theme from the Shopify admin by using the Shopify theme editor. Themes can offer different customization options to enable merchants to create their desired customer experience:
- You can make your theme templates modular by creating multiple sections and blocks. Refer to our section and block best practices to learn how to design sections and blocks effectively.
- You can create settings to allow the merchant to control the appearance or behavior of the theme. Merchants can set dynamic values for settings by using dynamic sources.
Themes have a specific file structure, which contains the following directories:
templates directory contains a theme’s template files, which control what's rendered on each type of page.
sections directory contains a theme’s sections, which are reusable modules of content that merchants can customize. Sections also define the blocks that can be used inside of them.
snippets directory contains Liquid files that host smaller reusable snippets of code. You can reference these snippets throughout the theme with the Liquid render tag.
Use the asset_url Liquid URL filter to reference an asset within your theme.
You can access limited Liquid functionality in non-binary asset files by appending a
.js.liquid) and CSS (
.css.liquid) files. Files with this extension have access to the following features:
locales directory contains the locale files for a theme, which are used to provide translated content.