> For the complete documentation index, see [llms.txt](https://flexi-library.gitbook.io/flexi-sections/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://flexi-library.gitbook.io/flexi-sections/docs/global-styles.md).

# Structure

{% embed url="<https://www.youtube.com/watch?v=I-y-b-1Sgxg>" %}

Learn how the Flexi Theme Library structure works in Shopify. Every Flexi section follows a four-tiered structure:

{% stepper %}
{% step %}

#### Sections

The top-level container that defines a reusable component, like a hero banner or product slider. Sections can be dropped into any Shopify theme.
{% endstep %}

{% step %}

#### Layouts

Each section contains one or more layout options—these control the structure, such as a single-column, grid, or split layout.
{% endstep %}

{% step %}

#### Groups (Optional)

Groups organize related content or functionality within a layout. They let you bundle settings or blocks together (e.g., “Card”, “Image Background”) for clearer content management.
{% endstep %}

{% step %}

#### Blocks

The most granular unit in Flexi. Blocks are individual content elements—like headings, images, buttons—that can be mixed and matched inside groups.
{% endstep %}
{% endstepper %}