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
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
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
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
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
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.
Was this helpful?