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

# Banners

Browse all 10 banner sections in the Avante Shopify theme — hero banners, grids, galleries, scrolling layouts, and fullscreen product banners.

Avante includes 10 banner sections for building high-impact visual layouts — from full-screen homepage heroes to editorial grids, horizontal scroll experiences and promotional tickers. Each one has its own page below.

***

### Section overview

<table data-search="false"><thead><tr><th>Section</th><th>What it does</th></tr></thead><tbody><tr><td><a href="/docs/avante-themes/sections/banners/image-banner.md">Image banner</a></td><td>Full-width hero with one or two background images and overlay content</td></tr><tr><td><a href="/docs/avante-themes/sections/banners/video-banner.md">Video banner</a></td><td>Full-width hero with an autoplaying looping background video</td></tr><tr><td><a href="/docs/avante-themes/sections/banners/slideshow-with-media.md">Slideshow with media</a></td><td>Rotating hero of image and video slides, each with its own content</td></tr><tr><td><a href="/docs/avante-themes/sections/banners/banner-grid.md">Banner grid</a></td><td>Mosaic of mixed-size image and video tiles</td></tr><tr><td><a href="/docs/avante-themes/sections/banners/split-banner.md">Split banner</a></td><td>Two banners side by side, each with its own image and button</td></tr><tr><td><a href="/docs/avante-themes/sections/banners/banners-with-sticky-content.md">Banners with sticky content</a></td><td>Pinned text column with banners scrolling past on both sides</td></tr><tr><td><a href="/docs/avante-themes/sections/banners/banner-gallery.md">Banner gallery</a></td><td>Clean row of image tiles with a heading on each</td></tr><tr><td><a href="/docs/avante-themes/sections/banners/horizontal-scrolling-banners.md">Horizontal scrolling banners</a></td><td>Full-screen band of panels that moves sideways as you scroll</td></tr><tr><td><a href="/docs/avante-themes/sections/banners/fullscreen-banner-with-product.md">Fullscreen banner with product</a></td><td>Hero banner with a live product card you can add to cart from</td></tr><tr><td><a href="/docs/avante-themes/sections/banners/scrolling-promotion.md">Scrolling promotion</a></td><td>Continuously scrolling ticker with text, images and links</td></tr></tbody></table>

***

### Quick decision guide

**Need a homepage hero?** → [Image banner](/docs/avante-themes/sections/banners/image-banner.md) for a single image, [Video banner](/docs/avante-themes/sections/banners/video-banner.md) for a looping video, [Slideshow with media](/docs/avante-themes/sections/banners/slideshow-with-media.md) when the top of the page has to carry more than one message.

**Want a hero that sells directly?** → [Fullscreen banner with product](/docs/avante-themes/sections/banners/fullscreen-banner-with-product.md) — a live product card with **Add to cart** on the banner itself.

**Building a visual grid or lookbook?** → [Banner grid](/docs/avante-themes/sections/banners/banner-grid.md) for mixed-size tiles with headings, text and buttons; [Banner gallery](/docs/avante-themes/sections/banners/banner-gallery.md) for a clean uniform row where each tile is just an image and a label.

**Promoting two collections side by side?** → [Split banner](/docs/avante-themes/sections/banners/split-banner.md), with its own image, copy and button on each half.

**Telling a story rather than making an offer?** → [Banners with sticky content](/docs/avante-themes/sections/banners/banners-with-sticky-content.md) pins a text column while the imagery scrolls past; [Horizontal scrolling banners](/docs/avante-themes/sections/banners/horizontal-scrolling-banners.md) turns a vertical scroll into a full-screen sideways journey.

**Need a promotional ticker?** → [Scrolling promotion](/docs/avante-themes/sections/banners/scrolling-promotion.md) — an animated strip of text, icons and links that works above or below any section.

***

### Shared features

Most banner sections share the same layout, color and content settings — see [Common section settings](/docs/avante-themes/sections/overview.md#common-section-settings) and [Common blocks](/docs/avante-themes/sections/overview.md#common-blocks).

All of them support [Background animation](/docs/avante-themes/features-and-advanced-setup/background-animation.md), and the full-width heroes can run under a [transparent header](/docs/avante-themes/features-and-advanced-setup/transparent-header.md) using **Section width → Overlap by navigation**.

Before uploading media, check [Image & video size recommendations](/docs/avante-themes/faq/performance/image-and-video-size-recommendations.md) — banner sections are the heaviest part of most homepages.


---

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