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
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
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
Border
Corner radius
Available for Full width padded and Page width options.
Dropshadow
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
Last updated