> 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.md).

# Banners

**Banners** is the group of sections built around a large image or video with a message on top of it. These are the sections shoppers meet first: the hero at the top of the homepage, the campaign strip halfway down a landing page, the brand video near the footer. Each one pairs media with a heading and a button, so a visitor understands the offer and has somewhere to click within a second or two of arriving.

Use this group to answer the two questions a new visitor has: what does this store sell, and where should I go next.

### 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 to edit, usually the homepage.
3. Click **Add section**.
4. Open the **Banners** group and choose the section you need.
5. Drag it into position in the left sidebar, then upload your media and write the text.
   {% endhint %}

*Result:* the banner renders in the preview. Check the mobile view as well, because a heading that fits comfortably on desktop often wraps on a phone.

### Sections in this group <a href="#sections-in-this-group" id="sections-in-this-group"></a>

| Section                                                                                    | What it does                                                                               | Use it when                                                      |
| ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | ---------------------------------------------------------------- |
| [Image with text](/velare/customize-your-pages/banners/image-with-text.md)                 | Places a picture beside a text column, so image and wording sit side by side               | The message needs more than a line or two and must stay readable |
| [Image with text overlay](/velare/customize-your-pages/banners/image-with-text-overlay.md) | Places the wording on top of a full width picture, with an adjustable overlay for contrast | You want a bold hero and the image has calm space for text       |
| [Slideshow](/velare/customize-your-pages/banners/slideshow.md)                             | Rotates several image or video slides, each with its own heading and button                | You have more than one promotion competing for the same spot     |
| [Video](/velare/customize-your-pages/banners/video.md)                                     | Shows a single video with a heading above it, from a URL or an uploaded file               | The video is the content, not the background                     |
| [Video with text overlay](/velare/customize-your-pages/banners/video-with-text-overlay.md) | Uses a video as the background and places the wording on top of it                         | You want motion behind a hero message                            |

### Suggested reading order <a href="#suggested-reading-order" id="suggested-reading-order"></a>

1. Start with [Image with text](/velare/customize-your-pages/banners/image-with-text.md). It is the simplest of the five and its content and button settings repeat across the rest of the group.
2. Then [Image with text overlay](/velare/customize-your-pages/banners/image-with-text-overlay.md), which introduces the overlay opacity and content position settings the video sections reuse.
3. Read [Slideshow](/velare/customize-your-pages/banners/slideshow.md) when one banner is not enough. Keep it to a few slides, since only the first one is seen by most visitors.
4. Read [Video](/velare/customize-your-pages/banners/video.md) and [Video with text overlay](/velare/customize-your-pages/banners/video-with-text-overlay.md) last. Video files are heavy, so add them once the rest of the page is settled.

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

* [Storytelling](/velare/customize-your-pages/storytelling.md): text led sections for the part of the page after the banner has done its job
* [Shopables](/velare/customize-your-pages/shopables.md): media sections where shoppers buy from the image or video itself
* [Colors](/velare/set-up-your-store/colors.md) and [Typography](/velare/set-up-your-store/typography.md): where the schemes and font presets used by these sections are defined
* [Animation](/velare/customize-your-pages/animation.md): the store wide motion settings that affect how banners appear on scroll


---

# 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.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.