Collection list media

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

Key features

Collection links

Collection product count

Feature media on hover

Supports autoplay video

Mobile collection thumbnails

Flexible overlay content

Custom layout and styles

Header

---

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

_{Click section to find settings}

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 upload an image or video to display on hover in the media showcase.

Content

Add text to overlay the collection media showcase. Leave the fields blank to remove the text.

_{Click collection block to find settings}

Top text	Small overlay text at the top.
Heading	Overlay heading in the middle.
Bottom text	Small overlay text at the bottom.

Media

Upload media to appear when collections are hovered.

_{Click collection block to find settings}

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

Mobile thumbnail

_{Click collection block to find settings}

Mobile 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}

Vertical alignment	Top Center Bottom Justified
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

Media showcase

---

The media showcase displays the images or videos uploaded for each collection, appearing when collection links are hovered over.

Desktop media

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

_{Click section to find settings}

Default media type	Image Video

Image

Click section to find settings

Default media type	Image Video
Default image

Video

Click section to find settings

Default video
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

Media style and layout

Change the media and content layout, text size, and the overlay color.

_{Click section to find settings}

Placement	Left Right
Media ratio	Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2) Custom
Heading size	1 - 6
Text size	1 - 4
Content width	360 - 1440px
Media width	30 - 70%

Mobile media

Upload an image or video to appear with the collection list on mobile devices.

_{Click section to find settings}

Show media
Placement	Top Bottom
Media ratio	Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2) Custom
Default media type	Image Video
Default image
Default video
Video focal point

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