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

---

You can set the section height in pixels to be the exact same height on all devices or as a percentage to adapt to the section height of the screen 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)

Background media

---

Display an image or autoplay video (without sound) as the section background. After uploading your media, you can set the focal point, overlay opacity, and choose to show alternate mobile media to best fit smaller screen sizes.

_{Click section to find settings}

Media type	Image Video

Image

_{Click section to find settings}

Image	Upload an image with a minimum pixel width of 2500px for best results.
Custom mobile image	Upload an alternate image to display on mobile devices. You may want to use an image with portrait orientation.

Video

_{Click section to find settings}

Video	Upload an .mp4 or .mov . For best results, keep the video length under 15 seconds.
Video focal point	Specify the main focus of the video. The focal point will remain centered and within frame to avoid unwanted cropping.
Custom mobile video	Upload an alternate video to display on mobile devices. You may want to use a video with portrait orientation.
Mobile video focal point	Specify the main focus of the mobile video.

Overlay colors

_{Click section to find settings}

Overlay opacity	0 - 100%
Color scheme	Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2

Content block

---

Click the Content block nested under the section to add heading text with buttons that overlay the section background media. You can customize the position and alignment of the content in the section settings.

Content

_{Click Content block to find settings}

Overline	Add small text above the heading.
Overline size	1 - 4
Heading	Add a section title.
Heading size	1 - 6
Text	Add multiple lines of rich text. Use the buttons to make the text bold or italicized, or to add a link.
Text size	1 - 4

Buttons

Add a primary and secondary button under the text content. When both buttons are added, they will appear inline.

_{Click Content block to find settings}

Link	Enter the URL that you want the button to link to.
Label	Add text to the button.
Size	XS S M L
	Solid Outline Text
	Default Primary Secondary Soft Overlay Overlay soft

Layout

Adjust the max width of the content.

_{Click Content block to find settings}

Content width	300 - 1440px
Make full width

Change the position and alignment of the content.

_{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

Product cards

---

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

_{Click section to find settings}

Products	Select one or more products to display as cards with a "View product" button.
Position	Left / Center / Right

Image ratio	Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2) Custom
Image width	60 - 200px
Mobile image width	60 - 120px
Card width (Desktop only)	340 - 420px

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

Section styles

---

Customize general style options for the section and content area. Settings for Content area allow you to adjust the width, borders, and dropshadow of the container of the section content.

_{Click section to find settings}

Content area

Width	Full width Full width padded Page width
Full width on mobile	Available for Full width padded option.
Set content to page width
	Available for Full width padded and Page width options.

Section

Top padding	0 - 27
Bottom padding	0 - 27
Dividers	None Top only Bottom only Both
Force dividers full width
Color scheme	Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2
Anchor ID	Link directly to the section on any page. Learn more