> 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/fullscreen-banner-with-product.md).

# Fullscreen Banner with Product

A fullscreen hero banner with an embedded product card and scroll animations — parallax, zoom, and sticky effects for immersive product showcases.

A full-screen hero that sells directly. Set a bold image or video background, drop in your heading and call-to-action, and embed a live product card — with **Add to cart** and **Quick view** — right on top of it. Perfect for a launch, a hero product, or a seasonal drop where you want the first thing a visitor sees to also be buyable.

<figure><img src="https://795663372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6DraMvJNYYlFJqlho1aV%2Fuploads%2FJ74fJpcgOXeaMwn6bFY0%2FGroup%202.png?alt=media&amp;token=8b3589ff-1620-4873-8183-0f45ac92dd9e" alt=""><figcaption></figcaption></figure>

***

### How to add

1. In the Theme Editor, click **Add section**
2. Select **Fullscreen Banner with Product**
3. Pick the **Product** to feature and set a **Background** image or video
4. Add content blocks (heading, text, button) and **Save**

Everything else — overlay, colors, product-card details, and spacing — is adjusted live in the editor.

<figure><img src="https://795663372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6DraMvJNYYlFJqlho1aV%2Fuploads%2FpRvIKqY1QdInxE4QpZCK%2FGroup%202%20(1).png?alt=media&amp;token=eb51f1c7-d462-4be0-abf6-d704f2e4aed9" alt=""><figcaption></figcaption></figure>

***

### Good to know

* **The hero is shoppable.** The embedded card is a real product card — keep **Add to cart** and **Quick view** on so a visitor can buy, or open product details in a pop-up, without leaving the banner.

<figure><img src="https://795663372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6DraMvJNYYlFJqlho1aV%2Fuploads%2FuJYn95Yo4rg4j12hyzwr%2FGroup%202%20(2).png?alt=media&amp;token=7c83502a-ade3-428c-bffd-1052b648939c" alt=""><figcaption></figcaption></figure>

* **Cinematic background.** Under **Background animation → On scroll**, choose **Parallax**, **Zoom in/out**, or **Sticky** to make the media move as the page scrolls. Set it separately for mobile if needed.

<figure><img src="https://795663372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6DraMvJNYYlFJqlho1aV%2Fuploads%2FtZJPKzQXKxqGN16cpRzP%2FGroup%202%20(3).png?alt=media&amp;token=51a28e4f-986e-40fd-8689-2ba9645849f5" alt=""><figcaption></figcaption></figure>

* **Sticky product card.** With **Enable sticky content on desktop** on, the content and card stay pinned while the tall background scrolls past — great for a long, immersive hero.
* **Add urgency.** This banner takes the shared content blocks, so you can drop a **Countdown timer** or **Promo code** straight onto the hero for a launch or limited drop.

<figure><img src="https://795663372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6DraMvJNYYlFJqlho1aV%2Fuploads%2FVLxzfkQeisZIarBpax6g%2Ffullscreen-banner-with-product.gif?alt=media&amp;token=0f278cda-e889-4c65-b7d7-660a9dae05cd" alt=""><figcaption></figcaption></figure>

***

### Best practices

* Always set a separate **Mobile background image** — a wide desktop shot gets badly cropped on phones.
* Keep an **image overlay** if text or the product card sits over a busy photo, so both stay readable.
* Use **Swap media position** to flip which side the card sits on and balance it against your artwork.
* Reserve this section for one hero product — a launch, a bestseller, or a campaign — not a full catalog.

***

### Related

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


---

# 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://staylime.com/docs/avante-themes/sections/banners/fullscreen-banner-with-product.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.