> 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/volume-themes/sections/banners/fullscreen-banner-with-product.md). # Fullscreen Banner with Product Volume's Fullscreen Banner with Product section pairs a full-bleed hero image or video with a live, shoppable product card — turn your homepage hero into a direct sales moment. A hero banner and a product page in one section. Instead of sending shoppers from your homepage hero into the catalog to find "that product," this section puts a live product card — real price, real availability — right over the banner image, one tap from checkout. It's the fastest way to sell a flagship launch, a single hero product, or a seasonal bestseller without building a separate landing page. *** ### How to add In the Theme Editor, click **Add section** → **Fullscreen banner with product**, pick a **Product**, upload your background image or video, and **Save**. ### Good to know {% hint style="success" icon="lightbulb" %} **Content offset only matters when Overlap is on.** It's the extra top gap for your overlaid content under a transparent header — with Overlap disabled, moving this slider has no visible effect, which is a common "why isn't this doing anything" moment. {% endhint %} * **Product card visibility is set per device** (Disable / Enable / On hover). On mobile there's no hover, so "On hover" effectively hides the card outside a tap — if a merchant tests on their phone and the card seems to have disappeared, this setting is usually why. Set mobile visibility to **Enable** if the card should always show on mobile. * **Sticky content** pins your heading/text/button in place while the background scrolls or zooms underneath — it's what creates the "cinematic" effect on flagship launch pages. It only reads well paired with a tall banner and a Custom scroll animation (Parallax or Zoom). * **Transparent background** on the product card looks best over a clean, uncluttered image. Over a busy or high-contrast photo, price and title can get hard to read — add an overlay to the banner in that case rather than turning the transparency off. ### Customization ideas * Combine **Custom animation mode** with **Zoom in** for a hero that "settles into place," or **Parallax** for subtle depth as visitors scroll past. * Use **Swap content position** to alternate two of these sections down the homepage — one product each, content flipped left/right — for a rhythm without building a full featured-collection grid. * Turn on **Overlap** and set **Logo style** to Overlapped to let this section double as the very first section on the homepage, sitting flush under a transparent header. *** ### Settings reference #### Media & layout | Setting | What it does | | ------------------------ | ---------------------------------------------------------------------------------------- | | Product | The product shown in the overlaid card | | Overlap | Sits the banner under a transparent header — Disable, Enable, or split by Desktop/Mobile | | Content offset | Extra top gap for overlaid content — only visible when Overlap is on | | Background (image/video) | Desktop and mobile media, with focal point control | | Swap content position | Flips which side the content and the product card sit on | | Content width | Narrow or Regular column width | | Sticky content | Pins the content while the banner scrolls past | #### Background animation | Setting | What it does | | --------------------------------- | --------------------------------------------------------- | | Animation mode | Default, Disable, or Custom | | On scroll behavior | *(Custom)* Static, Parallax, Sticky, Zoom in, or Zoom out | | Parallax direction / speed | *(Parallax)* Vertical or horizontal drift, and how fast | | Zoom | *(Zoom in/out)* How much the background scales | | Enable custom animation on mobile | Separate direction/speed/zoom values for mobile | #### Product card | Setting | What it does | | ---------------------------------------------------------------------- | --------------------------------------------- | | Transparent background | Removes the card background (on by default) | | Desktop / mobile visibility | Disable, Enable, or On hover — set per device | | Card content style, Quick buy, Price/Options position | Layout and add-to-cart behavior on the card | | Show vendor / title / rating / short description / pickup availability | Toggle each on the card | | Max product name characters, Show card border | Title truncation and border toggle | #### Layout, colors & spacing | Setting | What it does | | ------------------------------------------ | ------------------------------------------------ | | Grid style / Custom grid width | Page, Alternative, Secondary, or Custom width | | Show bottom line | Adds a divider under the section | | Banner / Product color scheme | Independent schemes for content and product card | | Overlapped header color scheme, Logo style | Header appearance while it overlaps this banner | | Top/bottom spacing, banner paddings | Standard spacing, set separately for mobile | ### Blocks The widest content-block library of any banner section: Heading, Subheading, Text, Image, Icon (with text), Button, Video button, Context image, Line, Empty space, Custom liquid, Promo code, Countdown timer, plus **Stacking images on hover** and **Inline image reveal**. {% hint style="success" icon="sparkles" %} The product itself is the **Product** setting, not a block — only the surrounding content (heading, text, buttons) is built from blocks. {% endhint %} --- # 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/volume-themes/sections/banners/fullscreen-banner-with-product.md?ask=&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.