> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/volume-themes/sections/media/multicolumn.md). # Multicolumn Lay out images, looping videos and text in equal columns — the section behind feature rows, brand values and "how it works" strips. Most of what a store needs to say isn't a banner and isn't a paragraph — it's three or four short things of equal weight. Free shipping, 30-day returns, carbon-neutral delivery. Step one, step two, step three. **Multicolumn** is the section for exactly that: a row of equal columns, each holding an image, a looping video or a block of text, that keeps its rhythm on a phone as well as on a desktop.
{% hint style="info" %} **At a glance** | Where to find it | **Add section → Media** | | ---------------- | ------------------------------------------------------------ | | Blocks | Image, Loop video, Text | | Allowed on | Any template, and the footer | | Typical use | Feature row, brand values, "how it works", care instructions | | {% endhint %} | | *** ### How to add {% stepper %} {% step %} ### Add the section Click **Add section** and pick **Multicolumn** from the **Media** group. {% endstep %} {% step %} ### Add your columns Each column is a block: **Image**, **Loop video** or **Text**. Add one per thing you want to say. {% endstep %} {% step %} ### Raise the column count **Desktop max columns** ships at **2**. If you added four blocks and the page shows two per row, this is the setting you're looking for — not a bug. {% endstep %} {% step %} ### Choose the media ratio A fixed ratio crops everything to the same shape and gives you a tidy grid. **Original** keeps each image's own proportions — the only way to get a true masonry look. {% endstep %} {% step %} ### Check it on mobile Columns restack on small screens. Four short labels work; four paragraphs become a very long page. {% endstep %} {% endstepper %} {% hint style="warning" %} **The column count quietly drops to fit your blocks.** Three columns need more than two blocks, four need more than three, and so on. Set **Desktop max columns** to 4 with three blocks in the section and you get three columns, with no warning that your setting was overruled. Add the missing block and the layout you asked for appears. {% endhint %} {% hint style="success" icon="lightbulb" %} ### Good to know * **An entirely empty section disappears.** If every block is blank, the section doesn't render at all. A half-filled section does render — including the empty columns. * **Loop video is silent by design.** Tile videos loop, muted, with no native controls and no autoplay sound. The mute and pause checkboxes don't unmute anything; they add the theme's own small overlay buttons so a visitor can stop the motion. * **Masonry only works with Media ratio = Original.** Any fixed ratio crops every tile to the same shape, which is the opposite of masonry. * **It's allowed in the footer.** A three-column row of policies or payment reassurance above the footer links is one of the most common uses of this section. * **Text blocks and image blocks mix freely.** A column of copy next to two image columns is a perfectly valid layout — the blocks don't have to match. {% endhint %} ### Customization ideas
The reassurance row Three or four short blocks — free shipping, easy returns, secure checkout, real humans on support — placed just above the footer or directly under the add-to-cart area. Short labels, no paragraphs.
"How it works" in three steps Three Image blocks, each with a numbered heading and one line of copy. Clearer than a wall of text, and it survives the restack to mobile because each step is self-contained.
Silent product clips Three **Loop video** blocks with 5-second clips — a zip closing, a fabric draping, a bottle pouring. Motion with no sound and no commitment from the visitor.
Editorial masonry **Media ratio** set to *Original*, four columns, images deliberately shot in different proportions. Reads as a moodboard rather than a grid.
Care and materials On the product template: one column per material or care instruction, each with an icon-sized image. Replaces a collapsible tab that nobody opens.
*** ### Settings reference
Section settings | Setting | What it does | | ------------------- | ------------------------------------------------------------------------------------------------------------- | | Desktop max columns | How many columns a row holds. **Defaults to 2.** Silently reduced when there aren't enough blocks to fill it. | | Media ratio | Crops every tile to one shape, or *Original* to keep each image's own proportions. | **Section layout, Color and Spacing** — the standard Volume groups: width and grid, colour scheme, top and bottom spacing and inner padding.
Block reference **Image** — a picture with optional heading, copy and link. **Loop video** — a looping, muted clip in place of the image. The mute and pause options add the theme's own overlay controls; they do not enable sound. **Text** — a text-only column: heading, body and an optional button.
### Best practices * **Keep the columns parallel.** Same kind of thing, same length of copy, same image treatment. The moment one column is three times longer than the others, the row stops reading as a set. * **Three or four, rarely more.** Five columns on a desktop means five very narrow tiles, and a scroll of five stacked cards on a phone. * **Write labels, not sentences, for a reassurance row.** "Free shipping over €50" beats "We are proud to offer free shipping on all orders over €50." * **Mind the restack order.** Blocks stack top-to-bottom in the order they appear in the editor, so put the strongest column first. ## Related * [Media with Text](/docs/volume-themes/sections/media/media-with-text.md) — when one image needs much more copy beside it * [Social Grid](/docs/volume-themes/sections/media/social-grid.md) — for a grid of social-style tiles with links * [Video](/docs/volume-themes/sections/media/video.md) — for one long video rather than several short loops --- # 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 by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://staylime.com/docs/volume-themes/sections/media/multicolumn.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.