Collection list media

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

Key features

Collection links with product count

Feature media on hover

Supports autoplay video

Mobile collection thumbnails

Flexible overlay content

Custom layout and styles


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, 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.

Top text

Small overlay text at the top.

Heading

Overlay heading in the middle.

Bottom text

Small overlay text at the bottom.

Media

Media type

Video Image

Image

Video

Video focal point

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 (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

Vertical alignment

Top Center Bottom Justified

Alignment

Left Center Right

Mobile alignment

Left Center Right

Overlay color scheme

Default Inverse Soft Accent Accent inverse Overlay

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.

Default 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

Mobile media


Show on mobile

Mobile placement

Top Bottom

Mobile media ratio

Left Right

Mobile media type

Video Image

Image

Video

Video focal point

Layout and style

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

Click section to find settings

Placement

Left Right

Heading size

1 - 6

Text size

1 - 4

Content width

360 - 1440px

Media width

30 - 70%

Media ratio

Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (4:5) Custom

Overlay opacity

0 - 100%

Overlay color scheme

Default Inverse Soft Accent Accent inverse Overlay

Last updated

Was this helpful?