> 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/scrolling-banners.md).

# Scrolling banners

**Scrolling banners** turns several promotions into one horizontal strip of cards that shoppers move through sideways instead of scrolling past one at a time. Each card pairs an image with its own heading, wording, and color scheme, so a seasonal sale, a new arrival, and a gift guide can share a single band of the page. It saves the vertical space that three stacked banners would take, and it lets a shopper choose which promotion to look at.

Shoppers usually meet it in the upper half of the home page, under the hero, where the promotions still get attention.

<figure><img src="/files/8KD5kIVbALgidGtwr88M" alt=""><figcaption></figcaption></figure>

### 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 banners on.
3. Click **Add section** and choose **Scrolling banners** from the **Storytelling** group.
4. Add one block per promotion, then give each an image and its wording.
   {% endhint %}

*Result:* the blocks render as cards in a horizontal strip, each one following the card and content settings below.

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

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

| Setting           | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Section width** | <p>How much of the screen the strip of cards is allowed to take.</p><ul><li><strong>Stretch width</strong>: the strip spreads to the browser width, so more of the next card is visible.</li><li><strong>Fixed width</strong>: the strip 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 cards run edge to edge, which makes the strip feel like it continues off screen.</li></ul> |
| **Color scheme**  | The background and text colors behind the strip. Schemes are defined in **Theme settings > Colors**. Individual cards can override it, so set the calmer option here.                                                                                                                                                                                                                                                                                                               |

#### 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 what the cards have in common, for example <em>This week</em>.</td></tr><tr><td><strong>Heading</strong></td><td>The headline shoppers read before the cards, which is what ties several separate promotions into one idea.</td></tr><tr><td><strong>Description</strong></td><td>A sentence under the headline giving context the individual cards have no room for, such as how long the offers run.</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 the promotions are 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 strip 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 strip of equal cards.</li><li><strong>Right</strong>: use it to mirror a neighbouring section.</li></ul></td></tr><tr><td><strong>Show view all button</strong></td><td>Adds a button beside the heading for shoppers who want the whole list rather than the few promotions on show. It is the way out of the strip for anyone browsing rather than buying.</td></tr><tr><td><strong>Button label</strong></td><td>The words on that button. Say where it goes, for example <em>See all offers</em>, rather than leaving it generic.<br><em>* Note: Only appears when <strong>Show view all button</strong> is enabled</em></td></tr><tr><td><strong>Button link</strong></td><td>Where that button leads: a page, a collection, or a blog holding the full list.</td></tr><tr><td><strong>Button type</strong></td><td><p>How much the button stands out from the heading beside it.</p><ul><li><strong>Primary</strong>: a solid block of color, for when you want the click.</li><li><strong>Outline</strong>: a bordered style, so the cards stay the focus.</li><li><strong>Link</strong>: plain underlined text, the quietest option.</li></ul></td></tr></tbody></table>

#### Card settings <a href="#card-settings" id="card-settings"></a>

| Setting                    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Image ratio**            | <p>The shape every card image is cropped to, so a mix of uploads still reads as one set.</p><ul><li><strong>Adapt to image</strong>: no cropping, each picture keeps its own shape and the cards vary in height.</li><li><strong>Golden (1.618:1)</strong>: the widest option, closest to a classic banner.</li><li><strong>Square (1:1)</strong>: neutral and easy to pair.</li><li><strong>Portrait (3:4)</strong>: taller, gives the wording more room beside it.</li><li><strong>Landscape (4:3)</strong>: wider, suits scenes rather than single products.</li><li><strong>Product (4:5)</strong>: matches the crop used on product cards.</li></ul> |
| **Desktop image position** | <p>Which side of the wording the picture sits on inside each card.</p><ul><li><strong>Left</strong>: the picture is seen first, which suits image led promotions.</li><li><strong>Right</strong>: the wording is read first, which suits an offer that needs explaining.</li></ul>                                                                                                                                                                                                                                                                                                                                                                        |

#### Content settings <a href="#content-settings" id="content-settings"></a>

| Setting                   | Description                                                                                                                                                                                                                                                                                                                                                                        |
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Content alignment**     | <p>Which edge the wording inside each card lines up with.</p><ul><li><strong>Left</strong>: easiest to read for a full sentence.</li><li><strong>Center</strong>: suits a card with only a heading.</li><li><strong>Right</strong>: pair it with a picture on the right of the card.</li></ul>                                                                                     |
| **Gap**                   | <p>The space between one card and the next.</p><ul><li><strong>No gap</strong>: cards meet edge to edge, reading as one continuous strip.</li><li><strong>Small</strong>: a thin separation, keeps the strip dense.</li><li><strong>Medium</strong>: each promotion reads as its own card.</li><li><strong>Large</strong>: airy, best with only two or three promotions.</li></ul> |
| **Card width on desktop** | How wide a single card is allowed to grow on large screens, which is what decides how much of the next card shoppers can see and therefore whether they know to scroll.                                                                                                                                                                                                            |
| **Padding inline/block**  | The breathing room inside each card. **Inline** controls left and right, **Block** controls top and bottom. Increase it when the wording presses against the edge of the card.                                                                                                                                                                                                     |

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

| Setting    | Description                                                                                 |
| ---------- | ------------------------------------------------------------------------------------------- |
| **Top**    | Adds space above the strip. Increase it when the cards sit too close to the section before. |
| **Bottom** | Adds space below the strip. 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. |

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

| Setting                              | Description                                                                                                                                                                                    |
| ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Color scheme**                     | The background and text colors of this card alone, taken from **Theme settings > Colors**. Give each promotion a different scheme when you want the strip to read as a set of distinct offers. |
| **Image**                            | The picture desktop shoppers see on this card, usually the product or the collection the promotion is about.                                                                                   |
| **Mobile image**                     | A second version for phones. Crop it tighter, because the desktop shot loses its subject in a narrow card.                                                                                     |
| **Heading, Subheading, Description** | The wording on the card: the big line shoppers read first, a short label above it, and a sentence spelling out the offer.                                                                      |

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

* Each block is one card, in the order the blocks appear in the sidebar. Put the promotion you most want seen first, since it is the one on screen before anyone scrolls.
* Cards carry their own color scheme, so a strip can hold promotions that look nothing alike. Use that deliberately or the section looks disorganised.
* The view all button is the only link the section adds on its own, so decide early whether the cards are meant to be browsed or clicked through.

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

* [Storytelling](/velare/customize-your-pages/storytelling.md): the group this section belongs to
* [Slideshow](/velare/customize-your-pages/banners/slideshow.md): the alternative when one promotion at a time should fill the screen
* [Gallery image](/velare/customize-your-pages/storytelling/gallery-image.md): the picture only version of a horizontal strip
* [Colors](/velare/set-up-your-store/colors.md) and [Layout](/velare/set-up-your-store/layout.md): where the color schemes and the fixed page width come 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/scrolling-banners.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.