Skip to Content
Build with FinquLiquid ThemesTheme Structure

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:

DirectoryPurpose
assetsContains images, stylesheets, JavaScript files, and other static assets. Special handling is provided for .liquid and Sass files.
blocksReusable components that can be added to sections. Blocks can have their own settings and are designed for modularity.
configStores theme configuration files, including settings_schema.json (settings schema) and settings_data.json (actual settings).
layoutContains layout files such as theme.liquid. Layouts define the overall structure of pages.
localesHolds translation files for different languages. Each locale is a JSON file, e.g., en.json.
publicPublicly accessible files. All files here can be accessed directly via a browser.
sectionsDefines page-level building blocks. Sections can contain blocks and are the main structural elements of a theme.
snippetsSmall reusable code fragments. Snippets are rendered in their own context and can be included in templates.
templatesPage 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.