> 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/avante-themes/sections/banners/banner-gallery.md).

# Banner gallery

A clean row of up to five image tiles with a heading on each — the simplest way to build a shop-by-category strip.

Banner gallery is the quiet workhorse of the Banners group. Every tile is just an image, a heading and a link, which makes it the fastest way to put a shop-by-category or shop-by-collection row on a page — and the easiest to keep tidy, because there is nothing in a tile to get out of hand.

### How to add

{% stepper %}
{% step %}

#### Add the section

In the theme editor, click **Add section → Banner gallery**. It arrives with five tiles.
{% endstep %}

{% step %}

#### Add a section heading

The section has its own **Heading** above the row — “Shop by category”, “Explore”, a season name. Leave it blank for a bare strip of tiles.
{% endstep %}

{% step %}

#### Fill the tiles

Each **Image** block takes an **Image**, a **Heading** and a **Link**. That is the whole block — there is nothing else to set per tile.
{% endstep %}

{% step %}

#### Choose how many fit across

**Desktop grid type** is **5** by default; **3** and **4** give larger tiles. Add or remove blocks to match, or let them wrap onto a second row.
{% endstep %}

{% step %}

#### Pick a shape

**Image ratio** applies to every tile at once: **Original**, **Square**, **Portrait**, **Narrow portrait**, **Traditional**, **Landscape** or **Wide**. Portrait shapes suit fashion, landscape suits interiors and food.
{% endstep %}

{% step %}

#### Check the mobile version

**Mobile layout** is **One column** or **Two columns** (two by default), and **Mobile navigation** is **Arrows** or **Scrollbar**.
{% endstep %}
{% endstepper %}

### Good to know

{% hint style="info" %}
**Show content only on hover is on by default.** Out of the box the tile headings appear when the cursor is over a tile, so an untouched section can look like a row of bare images. Turn it off if the headings have to be readable at all times — and remember that on touch devices the content is shown anyway, because there is no hover.
{% endhint %}

**Headings sit at the bottom.** **Vertical content position** defaults to the bottom of the tile and **Center text** is on, which is why the row reads as a set of labelled cards rather than as banners with copy over them.

**One ratio for the whole row.** **Image ratio** is a section setting, not a block setting. Tiles are cropped to the shape you choose, so pick images with the subject near the middle and let the crop take the edges.

**Tiles have no text or button fields.** If you need a paragraph, a button, or different sizes per tile, use [Banner grid](/docs/avante-themes/sections/banners/banner-grid.md) instead — same idea, much more per tile.

**The section cannot be used inside the header group.** Like the other banner sections, it belongs in the page body.

### Customization ideas

* Build a five-tile shop-by-category row under the hero, with **Image ratio → Portrait** and short one-word headings.
* Drop to **Desktop grid type → 3** with **Landscape** images for a three-up editorial row on a lookbook page.
* Use ten tiles with grid type 5 to make a two-row brand or designer index.
* Turn hover content off and set **Mobile layout → One column** for an accessible, label-first category list on phones.

### Best practices

* Keep headings to one or two words. They sit inside the tile, which narrows as the row grows.
* Shoot or crop all tiles the same way — a row is read as one image, and a single odd crop stands out.
* Match the number of tiles to **Desktop grid type** so the last row is not left with one lonely tile.
* Compress the images: five of them load at once. See [Image & video size recommendations](/docs/avante-themes/faq/performance/image-and-video-size-recommendations.md).

***

### Related

* [Banner grid](/docs/avante-themes/sections/banners/banner-grid.md)
* [Banners with sticky content](/docs/avante-themes/sections/banners/banners-with-sticky-content.md)
* [Image & video size recommendations](/docs/avante-themes/faq/performance/image-and-video-size-recommendations.md)
* [Common section settings](/docs/avante-themes/sections/overview.md#common-section-settings)


---

# 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/avante-themes/sections/banners/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.