> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/storytelling/multi-content.md).

# Multi-content

**Multi-content** puts different kinds of content in one row: a photo next to a paragraph, a video next to a promotional card. Because the blocks inside it do not have to match, it is the section to use when a single band of the page has to carry more than one idea, for example an image of the product beside the story behind it and a video of it in use. Shoppers meet it in the middle of the home page or on a landing page, where it breaks up a run of product grids.

It is more guided than [Flexible section](/velare/customize-your-pages/storytelling/flexible-section.md): you choose the blocks and the theme handles the arrangement.

### Where to find it <a href="#where-to-find-it" id="where-to-find-it"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. Open the template you want the row on.
3. Click **Add section** and choose **Multi-content** from the **Storytelling** group.
4. Click **Add block** and pick **Image**, **Text**, **Video**, or **Media with text** for each column.
   {% endhint %}

*Result:* the blocks render side by side in the order you added them, sharing the section width.

### Section settings <a href="#section-settings" id="section-settings"></a>

#### General settings <a href="#general-setting" id="general-setting"></a>

<table data-search="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Section width</strong></td><td><p>How much of the screen the row is allowed to take.</p><ul><li><strong>Stretch width</strong>: the row spreads to the browser width, giving each block more room.</li><li><strong>Fixed width</strong>: the row lines up with the rest of your pages, using the width set in <strong>Theme settings > Layout</strong>.</li><li><strong>Full width</strong>: the blocks run edge to edge, which suits image heavy rows with no gap.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>The background and text colors behind the whole row. Schemes are defined in <strong>Theme settings > Colors</strong>. Individual blocks can override it, so set the calmer option here.</td></tr></tbody></table>

#### Section header <a href="#section-header" id="section-header"></a>

<table data-search="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Subheading</strong></td><td>A short label above the headline, useful for naming the theme of the row, for example <em>Our materials</em>.</td></tr><tr><td><strong>Heading</strong></td><td>The headline shoppers read before the blocks, which is what ties several unrelated blocks together into one idea.</td></tr><tr><td><strong>Description</strong></td><td>A sentence under the headline giving the context the individual blocks do not have room for.</td></tr><tr><td><strong>Heading size</strong></td><td><p>How large that headline appears.</p><ul><li><strong>Heading 1</strong>: use it when this row is the main message of the page.</li><li><strong>Heading 2</strong>: the safe middle choice on a home page.</li><li><strong>Heading 3</strong>: keeps the row secondary to the section above.</li></ul></td></tr><tr><td><strong>Alignment</strong></td><td><p>Which edge the heading and description line up with.</p><ul><li><strong>Left</strong>: reads naturally with a full sentence of description.</li><li><strong>Center</strong>: balances a wide row of equal blocks.</li><li><strong>Right</strong>: use it to mirror a neighbouring section.</li></ul></td></tr><tr><td><strong>Column gap</strong></td><td><p>The space between one block and the next.</p><ul><li><strong>No gap</strong>: blocks meet edge to edge, reading as one panel.</li><li><strong>Small</strong>: a thin separation, keeps the row dense.</li><li><strong>Medium</strong>: each block reads as its own idea.</li><li><strong>Large</strong>: airy, best with only two blocks.</li></ul></td></tr></tbody></table>

#### Mobile options <a href="#mobile-options" id="mobile-options"></a>

| Setting                       | Description                                                                                                        |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| **Enable carousel on mobile** | Turns the row into a swipeable strip on phones, so three blocks cost one screen instead of three.                  |
| **Items per row**             | How many blocks share the width of a phone screen. One keeps text readable, two is only workable for image blocks. |

#### Block settings <a href="#block-settings" id="block-settings"></a>

| Setting                     | Description                                                                                                                                        |
| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Equal height adjustment** | Stretches every block to match the tallest one, so the bottom edge of the row stays level even when one block holds far more text than the others. |

#### Section padding <a href="#section-padding" id="section-padding"></a>

| Setting    | Description                                                                                |
| ---------- | ------------------------------------------------------------------------------------------ |
| **Top**    | Adds space above the row. Increase it when the blocks sit too close to the section before. |
| **Bottom** | Adds space below the row. Increase it when the next section starts too abruptly.           |

#### Section divider <a href="#section-divider" id="section-divider"></a>

| Setting          | Description                                                                                                  |
| ---------------- | ------------------------------------------------------------------------------------------------------------ |
| **Show divider** | Draws a thin line between this section and the one above it, which helps when both share a background color. |

### Blocks in this section <a href="#blocks-in-this-section" id="blocks-in-this-section"></a>

| Block                                                                                                                   | Use it for                                                                   |
| ----------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| [Group block - Image](/velare/customize-your-pages/storytelling/multi-content/theme-block-image.md)                     | A single picture, optionally linked, cropped to a ratio you choose           |
| [Group block - Media with text](/velare/customize-your-pages/storytelling/multi-content/theme-block-media-with-text.md) | A picture or video with a heading, wording, badge, and button on or below it |
| [Group block - Text](/velare/customize-your-pages/storytelling/multi-content/theme-block-text.md)                       | Wording on its own, with a button, small grid facts, icons, and social links |
| [Group block - Video](/velare/customize-your-pages/storytelling/multi-content/theme-block-video.md)                     | A hosted or external video with a poster image and playback options          |

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* Blocks share the row in the order they appear in the sidebar, and each one sets its own width, so the widths have to add up to something sensible.
* With **Equal height adjustment** off, blocks end where their content ends, which leaves an uneven bottom edge on the row.
* The section header is optional. Leave the heading and description empty and the blocks stand on their own.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Storytelling](/velare/customize-your-pages/storytelling.md): the group this section belongs to
* [Flexible section](/velare/customize-your-pages/storytelling/flexible-section.md): the more open ended alternative when you need control over direction and height
* [Colors](/velare/set-up-your-store/colors.md), [Typography](/velare/set-up-your-store/typography.md), [Layout](/velare/set-up-your-store/layout.md): the theme settings the blocks inherit from


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/storytelling/multi-content.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.