Theme Structure
A Finqu theme is organized into a set of well-defined directories, each serving a specific purpose. Understanding this structure is essential for developing, customizing, and maintaining themes efficiently.
Directory Overview
The typical theme directory contains the following folders:
Directory | Purpose |
---|---|
assets | Contains images, stylesheets, JavaScript files, and other static assets. Special handling is provided for .liquid and Sass files. |
blocks | Reusable components that can be added to sections. Blocks can have their own settings and are designed for modularity. |
config | Stores theme configuration files, including settings_schema.json (settings schema) and settings_data.json (actual settings). |
layout | Contains layout files such as theme.liquid . Layouts define the overall structure of pages. |
locales | Holds translation files for different languages. Each locale is a JSON file, e.g., en.json . |
public | Publicly accessible files. All files here can be accessed directly via a browser. |
sections | Defines page-level building blocks. Sections can contain blocks and are the main structural elements of a theme. |
snippets | Small reusable code fragments. Snippets are rendered in their own context and can be included in templates. |
templates | Page templates for different store pages (e.g., frontpage.liquid , cart.liquid ). |
Required Files and Folders
layout/theme.liquid
: The main layout file. Additional layouts can be defined as needed.config/settings_schema.json
andconfig/settings_data.json
: Define and store theme settings.- At least one template in the
templates
directory (e.g.,frontpage.liquid
). - Locale file for each supported language in
locales
(e.g.,en.json
).
Optional Components
- Blocks: Modular components for use within sections. Useful for creating dynamic, customizable content areas.
- Snippets: Reusable code pieces for icons, widgets, or other small features.
- Additional layouts: For special page types (e.g.,
campaign.liquid
).
Configuration Files
settings_schema.json
: Defines the structure and available options for theme settings.settings_data.json
: Stores the actual values for the theme settings..data
directory (optional): Used by the Finqu editor to store drafts.
Best Practices
- Use the
assets
directory for all static files. Sass files are compiled with Dart Sass, and.liquid
files are processed and cachebusted automatically. - Reference assets using the
asset_url
filter:{{ 'my_file.svg' | asset_url }}
. - Organize blocks and sections for maximum reusability and maintainability.
- Use the translation system in
locales
to support multiple languages and dynamic content. - Keep configuration files up to date and well-documented.
Related Articles
- Blocks: Learn how to create and use modular blocks within your theme.
- Sections: Understand how to structure and configure sections for flexible layouts.
- Settings: Configure theme settings and provide customization options for users.
- Templates: Explore how to build and organize page templates for different store views.
Last updated on