[]

Overview

As a framework for an online store, the theme defines the visual style, user experience, and functional features.

The directory structure of the theme adheres to SHOPLINE standards, enabling various code modules such as page templates, sections, and blocks to work in harmony. These modules collectively contribute to the presentation and functionality of the theme.

The standard theme structure is as follows:

.
├─ blocks          		# Reusable blocks
├─ components      		# Common code snippets
├─ i18n            		# Multilingual configuration files
├─ layout          		# Page layout files
├─ public          		# Static assets, including images, CSS files, JS files, and fonts
├─ sections        		# Page sections and section groups
├─ templates       		# Page templates
├─ theme.config.json  # Theme global configuration data
└─ theme.schema.json  # Theme information and theme global configuration definitions

Theme directory description

layout

The layout directory includes the theme's layout files, which define the basic framework of pages and enable consistent management of page structures and styles.

Layout files must include the following placeholders:

header: the header section
content: the page content
footer: the footer section

These placeholders are used to inject global scripts, such as JavaScript and CSS files, and render page contents.

Additionally, you can add custom HTML, CSS, or JavaScript in the layout files to efficiently propagate consistent changes across multiple pages.

Refer to layout to learn more.

templates

The templates directory includes the theme's template files. These template files are the foundation for rendering theme pages, and they store the merchant's custom configuration data~~~~.

Template files contain various page types, such as the product details page and the blog list page.

Template files support two file extensions:

.json: suitable for dynamic pages, allowing flexible page structure construction through sections.
.html: suitable for static pages, with fixed content that does not rely on dynamic data.

Refer to templates to learn more.

sections

The sections directory contains sections and section groups of the theme, which are the core elements for page construction. They are primarily used to define the structure and functions of different page modules. Merchants can freely add, delete, move, and edit content in a section.

Refer to Sections to learn more.

blocks

The blocks directory contains reusable blocks for different sections in a theme. For example, a button block can be used in both a carousel slider and an image banner. Merchants can freely add, delete, move, and edit the block content in the theme editor.

Refer to blocks to learn more.

components

The components directory contains reusable common code snippets for the theme, such as icon and input code snippets. You can reference the same snippet across different pages and sections, and pass different parameters to the same snippet to achieve varied presentations.

Refer to blocks to learn more.

public

The public directory contains all static assets of the theme, such as images, CSS files, JS files, and fonts.

Refer to public to learn more.

i18n

The i8n directory contains multilingual configuration files for the theme, supporting two file extensions for different scenarios:

**.json**: contains text displayed on the customer side.
**.schema.json**: contains text displayed on the merchant side, mainly relating to the configuration controls in the visual editor.

Refer to i18n to learn more.

theme.config.json

The theme.config.json contains styles and global configurations (such as colors and fonts) for the theme, which can be adjusted through the theme editor.

Refer to theme.config.json to learn more.

theme.schema.json

The theme.schema.json contains theme global configuration definitions and metadata (such as name, version, and author).

Refer to theme.schema.json to learn more.

Theme page organization

The following image shows the positions of different theme modules on a theme page.

No.	Theme module	Description
1	layout	The basic framework, defining reusable elements for different pages, such as the header and footer.
2	page template	Defines the page layout and content, supporting the dynamic configuration of sections.
3	section group	Used in layout files, supporting the dynamic configuration of sections, such as the noticeboard and menu.
4	section	The independent and reusable section, supporting data configuration and dynamic addition in the page template and section groups.
5	section block	The reusable block in page sections, supporting data configuration. The section block can only be added, deleted, or similarly manipulated within page sections.
6	global block	The global reusable block, supporting data configuration. The section block can only be added, deleted, or similarly manipulated within page sections.