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.
How to add
In the Theme Editor, click Add section
Select Fullscreen Banner with Product
Pick the Product to feature and set a Background image or video
Add content blocks (heading, text, button) and Save
Everything else — overlay, colors, product-card details, and spacing — is adjusted live in the editor.
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.
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.
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.
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
Last updated
Was this helpful?