Theme Architecture
Understanding the architecture and design principles of themes.
Overview
Finqu themes are built to be modular, flexible, and easy to customize. The architecture separates content, layout, and presentation, allowing developers to create unique storefronts while maintaining maintainability and scalability.
A theme consists of templates, sections, blocks, assets, and configuration files. These components work together to define the structure, appearance, and behavior of a storefront.
Theme Engine
The theme engine processes theme files and renders storefront pages dynamically. It interprets Liquid templates, processes section and block schemas, and merges user settings to generate the final HTML output. The engine supports localization, dynamic content, and extensibility through custom sections and blocks.
Template Structure
Templates define the overall layout and structure of pages. They use placeholders like content_for_index
to render sections and can include specific sections or blocks using tags. Templates are stored in the templates
directory and are responsible for the page’s main structure, such as headers, footers, and content areas.
Sections
Sections are modular components that can be added, removed, or reordered within templates. They are stored in the sections
directory and defined by a schema that describes their settings, blocks, and appearance. Sections are rendered using the content_for_index
placeholder or the section
tag.
Blocks
Blocks are reusable content elements that live inside sections. They are defined in the blocks
directory and configured via a schema. Blocks cannot contain other blocks or sections. They are rendered within sections using the container
tag or can be rendered statically with the block
tag.
Asset Pipeline
Assets such as CSS, JavaScript, images, and fonts are stored in the assets
directory. The asset pipeline processes and delivers these files efficiently to the storefront, supporting features like minification, versioning, and caching.
Settings and Configuration
Theme settings are defined in settings_schema.json
and individual section/block schemas. These settings allow merchants to customize the look and feel of their store without editing code. Settings are exposed in the theme editor and merged with defaults during rendering.
Best Practices
- Keep templates, sections, and blocks modular and reusable.
- Use settings and schema definitions to maximize flexibility.
- Organize assets and configuration files logically.
- Test themes thoroughly to ensure compatibility and performance.
This architecture enables developers to build powerful, maintainable, and customizable themes for the Finqu platform.