Theme architecture

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 thetheme editor.

The following components determine the organization of each page:

Features can be introduced into themes in Liquid template files, sections, blocks, andsnippets. You can implement theme features using Liquid, CSS, and JavaScript. A theme's features determine how customers can interact with the content on an online store. For example, your theme needs to allow customers to add products to a cart by providing aLiquidformtagwith aproducttype.

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.

For example, you need to add assets to style the theme. These assets help to express the merchant's brand by defining the online store's aesthetic and how content sections are styled. The theme's style is defined by the CSS and JavaScript that are applied to layout, template, and section files.

You can store the Liquid and HTML that you want to reuse across your theme insnippets. Store the theme's CSS and JavaScript in the theme'sassetsdirectory.

此外,你可以将你的主题转化为different languages using locale files. Locale files contain a set of translations for text strings used throughout the theme. Store locale files in thelocalesdirectory of the theme.

Merchants can customize their theme from the Shopify admin by using theShopify theme editor. Themes can offer different customization options to enable merchants to create their desired customer experience:

• You can make your theme templates and layout section groups modular by creating multiple sections and blocks. Refer to oursection and block best practicesto learn how to design sections and blocks effectively.
• You can createsettings允许控制外观或商人behavior of the theme. Merchants can set dynamic values for settings by usingdynamic sources.

Themes must use the following directory structure:

Subdirectories, other than the ones listed, aren't supported.

To see an example of a complete theme directory structure, and the various component types, explore theDawn GitHub repository.

Theassetsdirectory contains all of the assets used in a theme, including image, CSS, and JavaScript files.

Use theasset_urlLiquid URL filter to reference an asset within your theme.

You can access limited Liquid functionality in non-binary asset files by appending a.liquidextension. Common use cases include JavaScript (.js.liquid) and CSS (.css.liquid) files. Files with this extension have access to the following features:

• Thesettings object
• Liquidfilters

Theconfigdirectory contains theconfig filesfor a theme. Config files definesettingsin theTheme settingsarea of the theme editor, as well as store their values.

Theme settings are a good place to host general settings such as typography and color options. Theme settings can be accessed through thesettings object.

Thelayoutdirectory contains thelayout filesfor a theme, through whichtemplatefiles are rendered.

Layouts are Liquid files that enable you to include content that should be repeated on multiple page types in a single location. For example, layouts are a good place to include any content you might want in yourelement, as well assection groupsfor headers and footers.

Atheme.liquidfile must exist in this folder for the theme to be uploaded to Shopify.

Thelocalesdirectory contains thelocale filesfor a theme, which are used to provide translated content. Locale files allow you to provide a translated experience in thetheme editor, provide translations for the online store, and allow merchants to customize text in the online store.

Thesectionsdirectory contains a theme’ssectionsandsection groups.

Sections are Liquid files that allow you to create reusable modules of content that can be customized by merchants. They can also includeblockswhich allow merchants to add, remove, and reorder content within a section.

Section groups are JSON containers that allow merchants to add, remove, and reorder sections in areas of the layout file such as the header and footer.

Thesnippetsdirectory contains Liquid files that host smaller reusable snippets of code. You can reference these snippets throughout the theme with the Liquidrendertag.

Thetemplatesdirectory contains a theme’stemplate files, which control what's rendered on each type of page.

Thetemplates/customersdirectory contains the template files for customer-centric pages like the login and account overview pages.

You can use the template to add functionality that makes sense for the page type. For example, you can add additional product recommendations to a product template, or add a comment form to an article template. You can alsocreate multiple versions of the same template typeto create custom templates for different use cases.

No templates are required. However, you need to have a matching template for any page type that you want to render. For example, to render a product page, you need at least one template of typeproduct.