Theme architeture

A theme is a structured collection of code that determines a storefront's looks and features. Theme code must adhere to a standard directory structure for it to be valid. Each theme directory will contain template and configuration files, as well as any other assets a theme may need (e.g. scripts, images, etc..).The end goal is to give sellers and theme builders full control over storefronts, allowing them to create unique user experience that could serve to distinguish them from other YouCan stores.

Number	Component	Description
1	Layout	The base file wrapping every page, holding common elements like the header and footer.
2	Template	Determines what is rendered on a given page, and where.
3	Section	Reusable, customizable areas of a page that can be added to JSON templates.
4	Block	Reusable, customizable units that sellers can add, reorder, and remove within a section.
5	Snippet	Small reusable Liquid or HTML fragments included from a section or layout.

Directory structure

Themes must adhere to the following structure

.
├── assets
├── config
├── layouts
├── locales
├── sections
├── snippets
└── templates

Any directories or subdirectories, that were not listed above, are not supported.

assets

The assets directory contains assets used in a theme, including images, JavaScript, and CSS files.

Use the asset_url Liquid filter to reference an asset within your theme.

config

The config directory contains config files which defines the settings in the Theme settings area of the theme editor and their values.

layouts

The layout directory contains the layout files for a theme, through which template files are rendered.

INFO

Note that a theme.liquid file is required in the layouts directory.

locales

The locales directory contains the locale files for a theme, which are used to both provide translated content but also provide a translated settings in the theme editor,.

sections

The sections directory contains all the sections files

These Liquid files allow you to create reusable modules of content that can be customized by sellers. They can also include blocks which allow sellers to add, remove, and reorder content within a section.

snippets

The snippets directory contains Liquid snippet files that host reusable snippets of code that can be rendered anywhere in your theme, and are invisible to sellers in the theme editor.

templates

The templates directory contains a theme’s template files, which control what's rendered on each type of page.

You can use the template to add functionality that makes sense for the page type. For example, you can add a product reviews section to a product template.