> For the complete documentation index, see [llms.txt](https://docs.strm.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.strm.design/building-pages/sections-and-blocks.md).

# Sections and blocks explained

The building pieces of every Stratum page - sections, blocks, groups and templates - and how to add, arrange and style them.

Every page in Stratum is built from the same few pieces. Once you know them, you can build any page in the theme editor without code.

## Templates, sections and blocks

| Piece        | What it is                                                                                                                          | Example                                          |
| ------------ | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ |
| **Template** | The layout for one kind of page. Every product page uses the product template, every collection the collection template, and so on. | Default product, Default collection, Page: about |
| **Section**  | A full-width band on a page. You stack sections from top to bottom.                                                                 | Slideshow, Featured collection, Testimonials     |
| **Block**    | A piece of content inside a section. You add, remove and reorder blocks within their section.                                       | A slide, a heading, a button, a product price    |

Changing a template changes every page that uses it. For example, adding a section to the default product template adds it to all product pages.

## Groups: header, footer and overlays

Three areas appear on every page and are edited once for the whole store:

* **Header** group: the **Announcement bar** and the **Header**.
* **Footer** group: the **Footer**.
* **Overlays** group: the **Cart drawer**, **Cookie consent** and **Newsletter popup**. These float above the page rather than taking up space in it.

In the editor's left sidebar the header group is listed at the top, the template's sections in the middle and the footer and overlays groups at the bottom.

## Switch between pages in the editor

The theme editor shows one template at a time. Use the page selector at the top of the editor (it starts on **Home page**) to switch to **Products › Default product**, **Collections › Default collection**, **Pages**, **Blogs** and so on. You can also click links in the preview to move around the store.

## Add a section

1. Open the page you want in the editor.
2. In the left sidebar, click **Add section** where you want it (between existing sections, or at the bottom of the template).
3. Pick a section. Many sections offer several presets, ready-made starting points with different layouts and content, for example **Collection mosaic** or **Stacking cards** for the Collection list section.
4. Fill in the settings on the right, then click **Save**.

Sections marked **Built into its template** in the [Sections reference](/reference/sections.md), such as **Product information** or **Product grid**, are already on their page and cannot be added elsewhere.

## Reorder, hide and remove

* **Reorder**: drag a section or block by its handle (six dots) in the left sidebar.
* **Hide**: click the eye icon. The content stays saved but is not shown to visitors. Useful for seasonal sections.
* **Duplicate**: right-click a section or block, or use its menu, and choose **Duplicate**.
* **Remove**: select it and click **Remove section** or **Remove block** at the bottom of its settings.

## Blocks

Click a section in the sidebar to see its blocks, then **Add block** to add one. There are two kinds:

* **Section-only blocks** belong to one section. A **Slide** only lives in a **Slideshow**, a **Testimonial** in **Testimonials**. Their settings are listed on the section's reference page.
* **Theme blocks** can be added to any section that accepts them, such as **Content**, **Group**, a **Slide**, a **Tab** and the product page. Examples: **Heading**, **Text**, **Button**, **Image**, **Video**, **Icon**, **Collapsible row**, **Divider**, **Spacer**, **Email signup**. See the [Blocks reference](/reference/blocks.md).

Some theme blocks hold other blocks. A **Group** stacks or lines up its contents (vertical or horizontal, with gap, alignment, width, padding and an optional card background), which is how you build columns, cards and stats inside the **Content** section. A **Collapsible row** holds the content that opens below its heading.

## The Content section: build almost anything

**Content** (shown as **Content** in **Add section**, with presets such as **Hero**, **Image with text**, **Multicolumn**, **FAQ**, **Newsletter**, **Team** and **Tier cards**) is a flexible section that arranges any theme blocks. Its settings control:

* **Content width** (**Page**, **Wide**, **Medium**, **Narrow**, **Full width**), **Direction** (**Vertical** or **Horizontal**), alignment, **Gap**, **Text alignment**, **Minimum height** and **Content position**.
* **Show content on a rounded panel** with its own **Panel color scheme**.
* **Background image** or **Background video** with an **Overlay color** and **Overlay opacity**. Turn on **Load background image immediately** only when it is the first section on the page.

See [Home page and content sections](/building-pages/home-page.md#content) for examples.

## Colors per section

Almost every section has a **Color scheme** setting. Color schemes are defined once in **Theme settings › Colors** (background, text, buttons and so on), then any section can use any scheme. Alternate light and soft schemes down a page to separate sections, and keep one dark scheme for emphasis. See [Logo, colors, fonts and buttons](/store-wide-design/brand.md).

## Spacing

Most sections have **Top padding** and **Bottom padding** sliders (0–160px, in steps of 4). Two neighboring sections add their padding together, so to tighten a gap reduce the bottom padding of the first section and the top padding of the next.

To change the spacing of the whole store at once, use **Theme settings › Layout › Space between sections** (50–150%, default 100%). It multiplies every section's padding.

## App blocks

Apps from the Shopify App Store can add their own blocks. Sections that accept them (for example **Content**, **Product information**, **Footer**, **Header**, **Featured product**, **Product reviews**, **Cart** and **Contact form**) show an **Apps** group in **Add block**. Install the app first, then add its block where you want it.

## Custom Liquid

For advanced changes, the **Custom Liquid** section and block let you paste Liquid, HTML or an app's embed code. Settings: **Liquid code**, plus **Full width**, **Color scheme** and padding on the section. Use it for small embeds; anything you paste is your responsibility to maintain, and theme updates do not change it.

{% hint style="warning" %}
Custom Liquid runs exactly as written. A typo can break the page layout, so preview carefully before saving, and keep a copy of what you pasted.
{% endhint %}

## Scroll animations

With **Theme settings › Animations › Reveal sections on scroll** on, headings rise word by word and text, images and product cards fade in as visitors scroll. Nothing needs to be set per section. See [Animations and motion](/store-wide-design/animations.md).

## Related

* [Home page and content sections](/building-pages/home-page.md)
* [Sections reference](/reference/sections.md)
* [Blocks reference](/reference/blocks.md)