Theme architeture ​

A theme is a structured collection of code that governs storefront looks and features. Theme code must adhere to a predefined directory structure for it to be usable by YouCan. Each theme directory will contain template and configuration files, as well as any other assets a theme builder 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.

Composition ​

The YouCan theme directory structure consists of the following main file categories:

• Markup - Markup files to serve as the organizational and functional basis of the theme. We will be using the Liquid Templating Engine to generate .html markup from .liquid files.
• Config - JSON configuration files that can be leveraged by the Theme Editor, allowing sellers to customize the theme.
• Assets - Scripts, images, localization files and resources that can be accessed from any markup or configuration file in the theme.

Markup ​

Files in the markup category govern the core functionality and organization of each page, partitioned as follows.

Theme developers can implement their features in any Liquid file by leveraging Liquid markup, CSS, and any form of JavaScript. They will have the freedom to control the flow of their storefronts and cater them to specific types of sellers. For example, to allow customers to add products to a cart, a theme builder will have to implement the correct form or do so through an asynchronous request.

Directory structure ​

Directory structure

Themes must adhere to the following structure

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

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

Layouts ​

The layouts directory contains the layout files for a theme, in which templates can be socketed. These are liquid files that allow you to include common and repeated content in a single location. Things like scripts and imports, or elements like headers and footers.

Templates ​

The templates directory contains the theme’s templates files, which control what’s rendered on each page.Template files can be used to organize sections. For example, it can be used to add express checkout of popular products in the home page.

Sections ​

The sections directory contains the theme’s section files. Sections are Liquid files that allow you to create reusable code snippets or features, that are customizable by sellers. They can also include and organize blocks to allow sellers to add, remove, and reorder content within a section. Each section defines its own blocks from within.

Snippets ​

The snippets directory hosts small and reusable Liquid or HTML files. These files can be referenced from a section or layout and included using the render tag.

Config ​

Configuration files allow sellers to customize their theme using the YouCan Theme Editor. The amount and depth of customizability is up to the theme developer, they may choose to create fully modular and customizable themes or “one size fits all” themes.

Assets ​

Assets can be added to aid with the presentation of blocks and features, or to store reusable resources. This can range from images, to custom JavaScript bundles, etc...