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 link blocks for each collection you want to display. In the block settings, select your collection, and upload an image or video to display on hover.

Media

Click collection block to find settings

Collection
Media type	Video Image
Image
Video
Video focal point
Overlay opacity	0 - 100%
Mobile image

Mobile thumbnails

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

Layout

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

---

Upload an image or video to appear by default, before visitors hover over the collection links.

Click section to find settings

Media type	Video Image
Image
Video
Video focal point
Overlay opacity	0 - 100%