Collection list hero

Display collection links alongside a media showcase that changes when links are hovered over.

Header

---

Add heading text that displays above the collection list links. You can adjust the heading size and bottom padding.

Overline
Overline size	1 - 4
Heading
Heading size	1 - 6
Bottom padding	0 - 27

Collection list

---

The collection list displays collection links in a single column.

Add collection blocks

Add collection link blocks for each collection you want to display. In the block settings, select your collection, add overlay text, and choose an image or video to display on hover in the media showcase.

Media

Choose which media to display when collections are hovered.

_{Click collection block to find settings}

Media type	Collection Image Video
Image
Video
Video focal point
Override overlay opacity

Mobile thumbnail

_{Click collection block to find settings}

Media type	Collection Image
Image

_{Click section to find settings}

Show thumbnails
Image ratio	Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2) Custom
Corner radius
Crop to circle
Width	60 - 120 px
Placement	Left Right

List style and layout

Change the alignment and style of the collection list, including the font, spacing, and visual dividers. Choose to show the product count of each collection, and adjust the hover dot size.

Alignment

Adjust the alignment of the collection list links for both desktop and mobile.

Click section to find settings

Alignment	Left Center Right
Mobile alignment	Left Center Right

Style

Change the style of the collection list, including the font, spacing, and visual dividers. Choose to show the product count of each collection, and adjust the hover dot size.

Click section to find settings

Font	Body Heading
Font size	20 - 120 px
Mobile font size	20 - 60 px
Vertical gap	1 - 10
Mobile vertical gap	1 - 10
Hover dot size	8 - 40 px
Product count
Dividers
Make dividers full width
Overlay color scheme	Default Inverse Soft Accent Accent inverse Overlay

Default background media

---

Display an image, solid color, or autoplay video (without sound) as the default background media, before visitors hover over the collection links.

_{Click section to find settings}

Media type	Color Image Video

Image

_{Click section to find settings}

Image

Color

_{Click section to find settings}

Content area > Color scheme	Match section Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2

Video

_{Click section to find settings}

Video
Video focal point
Mobile video focal point

Showcase 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

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