# Sections

Learn how to create and customize theme sections.

## Introduction to Sections

Sections are modular components that allow you to build flexible and customizable theme layouts in Finqu. They can be added, removed, and reordered to create unique page structures.

## How Sections Are Rendered

Sections are rendered in templates using either the `content_for_index` placeholder (which outputs all sections assigned to that template) or the `section` tag to render a specific section:

```liquid
{% section 'section-name' %}
```

## Section Directory

All section files are stored in the `sections` directory of your theme. Each file represents a single section and contains its Liquid markup, logic, and schema.

## Section Schema

Each section file defines its configuration using a `{% schema %}` tag. The schema describes the section’s name, tag, class, category, keywords, and settings. For example:

```liquid
{% schema %}
{
  "name": {
    "en": "Accordion tabs",
    "fi": "Välilehdet"
  },
  "tag": "section",
  "class": "section section-accordion-tabs",
  "category": "theme-featured",
  "keywords": {
    "en": ["accordion tabs", "faq", "guide"],
    "fi": ["välilehdet", "ukk", "opas"]
  },
  "settings": {
    // ...section settings...
  }
}
{% endschema %}
```

- The `category` property must match one of the categories defined in your theme’s `settings_schema.json` file.

## Section Schema Properties

Below is a table describing the main properties available in a section schema, along with explanations and examples for each:

| Property   | Description                                                                 | Example |
|------------|-----------------------------------------------------------------------------|---------|
| `name`     | The display name of the section, usually localized for different languages. | `{ "en": "Accordion tabs", "fi": "Välilehdet" }` |
| `tag`      | The HTML tag or identifier for the section.                                 | `"section"` |
| `class`    | CSS classes applied to the section container.                               | `"section section-accordion-tabs"` |
| `category` | The category for the section, must match a category in [`settings_schema.json`](/build-with-finqu/themes/settings#theme-settings-settings_schemajson). | `"theme-featured"` |
| `keywords` | Search keywords for the section, localized for different languages.         | `{ "en": ["accordion tabs", "faq"], "fi": ["välilehdet", "ukk"] }` |
| `settings` | [Configuration options](/build-with-finqu/themes/settings) for the section, such as text fields, images, etc.    | `{ /* ...section settings... */ }` |
| `blocks`   | (Optional) Defines block types that can be used within the section.         | `[ { "type": "tab", "name": { "en": "Tab" } } ]` |

Each property helps define how the section appears and behaves in the theme editor and on the storefront. For more details on settings and blocks, see the relevant documentation sections below.

## Blocks in Sections

Sections can contain blocks, which are reusable content elements. Blocks are rendered inside a section using the `container` tag. You can optionally define an `id` for the container:

```liquid
{% container 'id' %}
```

The `container` tag is not a block tag, but a way to group and render blocks within a section. The `id` can be used to target a specific container for styling or logic. Id must be unique within the section and must be defined if the section contains multiple containers.

## Section Best Practices

- Use clear and descriptive names and categories for your sections.
- Organize settings and blocks logically for ease of use.
- Reuse blocks and settings where possible to keep sections maintainable.
- Test your sections in different templates to ensure flexibility and compatibility.