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

# Slideshow

**Slideshow** is a large banner that cycles through several image or video slides, each with its own heading, wording, and button. It is the section to use when more than one promotion is competing for the same spot at the top of the homepage: new arrivals, a seasonal campaign, a featured collection, and a brand message can all take a turn without lengthening the page. Shoppers see it as the first thing under the header, and they can swipe or use the arrows to reach the slides behind the first one.

Keep in mind that most visitors only ever see slide one, so put the promotion that matters most there.

<figure><img src="/files/uBpUB5zzU0No2GXbIN3I" 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 where the slideshow should appear, usually the homepage.
3. Click **Add section** and choose **Slideshow** from the **Banners** group.
4. Add an **Image slide** or a **Video slide**.
5. Upload the media, write the heading, then point the button at a product, collection, or page.
6. Check the mobile preview before you save.
   {% endhint %}

*Result:* the slides render one at a time inside the banner, with arrows and dots shown according to the carousel settings below.

### Recommended setup <a href="#recommended-setup" id="recommended-setup"></a>

For a homepage hero, two to four slides is enough. Give each slide one message and one button with a concrete label such as **Shop now** or **Explore collection**, and upload a separate mobile image or video so nothing important gets cropped on a phone.

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

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

| Setting           | Description                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Section width** | <p>How far the slideshow spreads across the screen.</p><ul><li><strong>Stretch width</strong>: the slides run close to both screen edges whatever the screen size.</li><li><strong>Fixed width</strong>: the slideshow lines up with the page width set in <strong>Theme settings > Layout</strong>.</li><li><strong>Full width</strong>: the slideshow fills the whole browser window and resizes with it, the usual choice for a hero.</li></ul> |
| **Color scheme**  | The colours used for the wording and controls on the slideshow. Schemes are defined in **Theme settings > Colors**, so pick one whose text colour reads clearly over your media.                                                                                                                                                                                                                                                                   |
| **Background**    | The colour behind the slides. Shoppers glimpse it while a heavy image or video is still loading, so choose something close to your media rather than stark white.                                                                                                                                                                                                                                                                                  |

#### Carousel settings <a href="#settings-for-carousel" id="settings-for-carousel"></a>

| Setting                | Description                                                                                                                           |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| **Show navigation**    | Shows the previous and next arrows. Keep them on for desktop, where shoppers have no swipe gesture to reach the other slides.         |
| **Show pagination**    | Shows the dots under the slideshow, which tell shoppers how many slides there are and how far through they have got.                  |
| **Auto-change slide**  | Rotates the slides on their own. Leave it off when a slide carries a message shoppers need time to read.                              |
| **Change slide every** | How long a slide stays on screen before the next one moves in. Longer values suit slides with more words or a video.                  |
| **Slide height**       | How tall the banner is. A taller slideshow dominates the first screen, a shorter one lets shoppers reach the content below it sooner. |

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

| Setting    | Description                                                                                                                              |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| **Top**    | Space added above the slideshow. Set it to zero when the slideshow is the first thing on the page and should sit tight under the header. |
| **Bottom** | Space added below the slideshow. Increase it when the next section feels cramped against it.                                             |

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

#### Image slide <a href="#image-slide" id="image-slide"></a>

Add an **Image slide** when the promotion is carried by a still photo with wording and a button on top of it.

| Setting                                              | Description                                                                                                                                                                                                                                                                                                                                                                                                       |
| ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Image**                                            | The picture for this slide on desktop, sharpest at ***(1920px x 840px recommended)***. Leave calm space where the wording will sit.                                                                                                                                                                                                                                                                               |
| **Mobile image**                                     | A separate picture for phones, sharpest at ***(390px x 572px recommended)***. Without it the desktop photo is cropped to a tall frame and the subject often falls outside it.                                                                                                                                                                                                                                     |
| **Image overlay opacity**                            | Darkens the picture behind the wording. Raise it until the heading is comfortable to read, lower it when the text is drowning out a calm photo.                                                                                                                                                                                                                                                                   |
| **Highlight text, Subheading, Heading, Description** | The wording on this slide: a small badge line, a short label for context, the line shoppers read first, and a sentence spelling out the offer.                                                                                                                                                                                                                                                                    |
| **Select icon**                                      | A small symbol shown beside the highlight text, for example a spark or a tag, so a short badge such as `New in` reads as a badge rather than stray text.                                                                                                                                                                                                                                                          |
| **Background color**                                 | The colour of the badge behind the highlight text. Pick something that stands out from the photo, since the badge is meant to be noticed first.                                                                                                                                                                                                                                                                   |
| **Text color**                                       | The colour of the highlight text itself. Check it against the badge colour above, not against the photo.                                                                                                                                                                                                                                                                                                          |
| **Heading size**                                     | <p>How large the main line is rendered.</p><ul><li><strong>Default</strong>: follows the theme preset, the safe starting point.</li><li><strong>Heading 1</strong> to <strong>Heading 3</strong>: progressively smaller display sizes for a hero.</li><li><strong>Heading 4</strong> to <strong>Heading 6</strong>: smaller again, for slides where the picture should lead and the wording support it.</li></ul> |
| **Button label**                                     | The words shoppers click on this slide. Leave it empty and the slide shows no button at all.                                                                                                                                                                                                                                                                                                                      |
| **Button link**                                      | Where that click takes shoppers: a product, a collection, a page, or an external URL.                                                                                                                                                                                                                                                                                                                             |
| **Type**                                             | <p>How much the button stands out over the picture.</p><ul><li><strong>Primary</strong>: solid and filled, the clearest choice over photography.</li><li><strong>Outline</strong>: bordered and lighter, for a slide that should feel quieter.</li></ul>                                                                                                                                                          |
| **Desktop content position**                         | Which part of the picture the wording sits over on wide screens. Move it to the emptiest area of your photo so the text never covers the subject.                                                                                                                                                                                                                                                                 |
| **Content alignment**                                | <p>Where each line starts inside the text block.</p><ul><li><strong>Left</strong>: easiest to read for more than a few words.</li><li><strong>Center</strong>: the classic hero look for a short headline and one button.</li><li><strong>Right</strong>: use when the subject of the photo sits on the left.</li></ul>                                                                                           |
| **Mobile layout/Content position**                   | <p>Where the wording sits over the mobile image.</p><ul><li><strong>Top</strong>: keeps the message visible even before the shopper scrolls.</li><li><strong>Middle</strong>: balanced, for photos with an empty centre.</li><li><strong>Bottom</strong>: puts the wording next to the thumb, close to the button.</li></ul>                                                                                      |
| **Mobile layout/Content alignment**                  | <p>Where each line starts on phones, set separately from desktop.</p><ul><li><strong>Left</strong>: the safest for a heading that wraps onto several lines.</li><li><strong>Center</strong>: keeps a short headline and button balanced.</li><li><strong>Right</strong>: use only to match a mobile image whose subject sits left.</li></ul>                                                                      |

#### Video slide <a href="#video-slide" id="video-slide"></a>

Add a **Video slide** when motion tells the story better than a photo. Keep the clip short and upload a mobile version, so the slide loads quickly and stays readable on a phone.

| Setting                                              | Description                                                                                                                                                                                                                                                                                                                          |
| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Video**                                            | The clip that plays on desktop, sharpest at ***(1920px x 840px recommended)***. Short and quiet works best behind a headline.                                                                                                                                                                                                        |
| **Video mobile**                                     | A separate clip for phones, sharpest at ***(390px x 572px recommended)***, so the frame is not cropped to a tall shape that loses the subject.                                                                                                                                                                                       |
| **Video overlay opacity**                            | Darkens the footage behind the wording. Raise it when the video has bright or changing scenes that make the heading flicker in and out of legibility.                                                                                                                                                                                |
| **Highlight text, Subheading, Heading, Description** | The wording on this slide: a small badge line, a short label for context, the line shoppers read first, and a sentence spelling out the offer.                                                                                                                                                                                       |
| **Select icon**                                      | A small symbol shown beside the highlight text, so a short badge such as `Limited` reads as a badge rather than stray text.                                                                                                                                                                                                          |
| **Background color**                                 | The colour of the badge behind the highlight text. Solid colour holds up better over moving footage than a transparent one.                                                                                                                                                                                                          |
| **Text color**                                       | The colour of the highlight text itself. Check it against the badge colour above, not against the video.                                                                                                                                                                                                                             |
| **Heading size**                                     | How large the main line is rendered. Larger sizes hold their own over busy footage, smaller ones let the video lead.                                                                                                                                                                                                                 |
| **Button label**                                     | The words shoppers click on this slide. Leave it empty and the slide shows no button at all.                                                                                                                                                                                                                                         |
| **Button link**                                      | Where that click takes shoppers: a product, a collection, a page, or an external URL.                                                                                                                                                                                                                                                |
| **Type**                                             | <p>How much the button stands out over the footage.</p><ul><li><strong>Primary</strong>: solid and filled, the safer choice over moving images.</li><li><strong>Outline</strong>: bordered and lighter, which can be lost against a bright scene.</li></ul>                                                                          |
| **Desktop content position**                         | Which part of the frame the wording sits over on wide screens. Pick an area that stays calm through the whole clip, not just the first second.                                                                                                                                                                                       |
| **Content alignment**                                | <p>Where each line starts inside the text block.</p><ul><li><strong>Left</strong>: easiest to read for more than a few words.</li><li><strong>Center</strong>: the classic hero look for a short headline and one button.</li><li><strong>Right</strong>: use when the action in the clip happens on the left.</li></ul>             |
| **Mobile layout/Content position**                   | <p>Where the wording sits over the mobile clip.</p><ul><li><strong>Top</strong>: keeps the message visible from the first frame.</li><li><strong>Middle</strong>: balanced, for footage with a calm centre.</li><li><strong>Bottom</strong>: puts the wording next to the thumb, close to the button.</li></ul>                      |
| **Mobile layout/Content alignment**                  | <p>Where each line starts on phones, set separately from desktop.</p><ul><li><strong>Left</strong>: the safest for a heading that wraps onto several lines.</li><li><strong>Center</strong>: keeps a short headline and button balanced.</li><li><strong>Right</strong>: use only to match footage whose action sits left.</li></ul> |

### Tips for better results <a href="#tips" id="tips"></a>

| Tip                       | Recommendation                                                                                                                        |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| Keep each slide focused   | One promotion and one button per slide. Two competing messages on a slide usually means neither is read.                              |
| Prepare mobile media      | Upload the mobile image or video for every slide, otherwise the desktop file is cropped and the subject drifts out of frame.          |
| Make text readable        | If a heading is hard to read, raise the overlay opacity on that slide before you change the colour scheme.                            |
| Use autoplay carefully    | With **Auto-change slide** on, set **Change slide every** long enough for a shopper to finish reading the slide and reach the button. |
| Link every promotion      | A slide that promotes something should have a **Button link**, otherwise shoppers have to go and find the product themselves.         |
| Preview before publishing | Look at the desktop and mobile previews, and step through every slide rather than only the first.                                     |

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

* Shoppers see one slide at a time, and reach the others by swiping, using the arrows, or waiting when **Auto-change slide** is on.
* Slides all share the same **Slide height**, so images of different proportions are cropped to fit it.
* An empty **Button label** removes the button from that slide only, the other slides keep theirs.

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

* [Banners](/velare/customize-your-pages/banners.md): the group this section belongs to
* [Image with text overlay](/velare/customize-your-pages/banners/image-with-text-overlay.md): a single banner, for when one promotion is enough
* [Video with text overlay](/velare/customize-your-pages/banners/video-with-text-overlay.md): a single video banner with the same content position settings
* [Colors](/velare/set-up-your-store/colors.md), [Typography](/velare/set-up-your-store/typography.md), and [Logo and favicon](/velare/set-up-your-store/logo-and-favicon.md): where the schemes, presets, and store logo 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/banners/slideshow.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.