Shoppable hero

Showcase multiple products overtop a full-size image or autoplay video (without sound).

Key features

Featured product cards

Supports autoplay video

Mobile-specific media options

Flexible overlay content

Custom layout and styles

Blocks

Content

Section height

---

Click section to find settings

Section height	Adapt to screen height (50 - 100%) Fixed height (300 - 800px)
Mobile section height	Adapt to screen height (50 - 100%) Fixed height (300 - 800px)

Content layout

---

Click section to find settings

Position	Top / Middle / Bottom Left / Center / Right
Mobile position	Top / Middle / Bottom Left / Center / Right
Alignment	Left Center Right
Mobile alignment	Left Center Right

Background media

---

Media type	Video Image

Image

Click section to find settings

Image
Mobile image
Overlay opacity	0 - 100%

Video

Click section to find settings

Video
Video focal point
Mobile video
Mobile video focal point
Overlay opacity	0 - 100%

Product cards

---

Select a list of products to display over the hero media.

Click section to find settings

Products
Position	Left Center Right

Image ratio	Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (4:5) Custom
Image width	60 - 200px
Mobile image width	Left Center Right
Card width

Color scheme	Default Inverse Soft Accent Accent inverse Overlay
Vendor
Out of stock badge
Card padding	Use globals Custom (1 - 8)
Corner radius
Button style	Solid Outline Text
Button color scheme	Default Primary Secondary Soft Overlay Overlay soft
Sale price color

Content block

---

Add heading text with buttons.

Layout

Click Content block to find settings

Content width	300 - 1440px
Make full width

Content

Click Content block to find settings

Overline
Overline size	1 - 4
Heading
Heading size	1 - 6
Text
Text size	1 - 4

Buttons

Add a primary and secondary button.

Click Content block to find settings

Link
Label
Size	XS S M L
Style	Solid Outline Text
Color scheme	Default Primary Secondary Soft Overlay Overlay soft