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 and config/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.

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.