# 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.