> 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/banners/banner-grid-and-banner-gallery.md).

# Banner Grid & Banner Gallery

Volume's Banner Grid and Banner Gallery sections turn a wall of images into a lookbook, a gift guide, or a shoppable category wall — no coding needed.

Two ways to build a grid of promotional images without touching code — the editorial, magazine-style layout that turns a plain "browse our categories" page into something worth lingering on.

* **Banner Grid** — mixed tile sizes with a button on each, built for navigation (categories, collections, campaigns).
* **Banner Gallery** — a uniform grid under one shared heading, built for visual storytelling (lookbooks, brand imagery, UGC).

***

### Banner Grid

#### How to add

In the Theme Editor, click **Add section** → **Banner grid**, then **Add block** → **Image** for each tile (up to 20), and **Save**.

#### Good to know

* **Block order = grid position.** Tiles fill the grid in the order the blocks are listed, top-left first — reordering blocks in the sidebar reorders the visual layout, which surprises merchants who expect to drag tiles directly on the canvas.
* **Custom grid width only applies in Custom grid style** — setting a pixel value while Grid style is set to Page or Alternative has no effect.

#### Customization ideas

* Give one tile **Big square** or **Wide** and the rest **Square** to create a hero-plus-supporting-tiles layout — an easy way to signal "this one matters most" without a separate hero section.
* Turn **Show button** off on tiles meant as pure mood/branding imagery, and keep it on only for tiles that lead somewhere specific.

#### Settings

| Setting                        | What it does                                  |
| ------------------------------ | --------------------------------------------- |
| Full width                     | Stretches the grid edge-to-edge               |
| Grid style / Custom grid width | Page, Alternative, Secondary, or Custom width |
| Grid gap (desktop/mobile)      | Spacing between tiles                         |
| Image radius                   | Corner rounding for every tile                |
| Banner size (per block)        | Square, Big square, Horizontal, or Wide       |
| Show button (per block)        | Toggles that tile's button                    |

***

### Banner Gallery

#### How to add

In the Theme Editor, click **Add section** → **Banner gallery**, add a **Heading**, then **Add block** → **Image** for each tile, and **Save**.

#### Good to know

* **Hover image needs a second setting to work on mobile.** Since there's no hover on touch, the hover-swap image is invisible on phones unless you also set **Mobile hover image** to **Hover** — otherwise it looks like the feature "isn't working" on mobile when it's actually working exactly as designed for desktop.
* **Vertical content position** includes a **Below** option that moves the heading under the grid entirely — useful when the heading is secondary to the imagery.

#### Customization ideas

* Use Banner Gallery instead of Banner Grid when the goal is pure visual impact (a lookbook, a UGC wall) rather than navigation — it skips the per-tile button, keeping the grid clean.
* Set a hover image that shows a styled/lifestyle shot in place of a plain product photo, for a "look closer" reveal on desktop.

#### Settings

| Setting                    | What it does                                |
| -------------------------- | ------------------------------------------- |
| Heading + style            | Shared heading above the grid               |
| Vertical content position  | Start, Center, End, or Below the images     |
| Show content only on hover | Reveals tile content only on hover          |
| Mobile hover image         | Default or Hover — which image mobile shows |
| Media ratio                | Auto or a fixed ratio (e.g. 1:1)            |

### Best practices

* Keep Grid gap consistent with nearby sections so the page doesn't feel disjointed.
* Decide Grid vs. Gallery by intent first: are these tiles meant to be clicked (Grid) or just looked at (Gallery)?


---

# 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/banners/banner-grid-and-banner-gallery.md?ask=<question>&goal=<user_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.