🧰 Collection hover list

Create a visually rich collection list that’s designed to engage. As customers hover over each collection title, the corresponding image appears, bringing each link to life with dynamic, editorial-style energy.

Add the section to a template

Click Customize to open the theme editor for the selected theme.

Open the template (e.g. home page, default product) and click (+) Add section in the sidebar.

Scroll down to the bottom of your default sections list and select 🧰 Collection hover list.

Click the Collection hover list section to open its general settings.

Section heading

Add a heading to introduce the section with the Section heading field.

Content width adjusts the spacing the entire section will occupy. You can choose from Regular, Wide, or Full width. 

The Section heading size can also be adjusted using the available Heading size and Mobile heading size sliders. 

Desktop layout allows you to choose between List or Paragraph - this determines how your collection titles will appear in the section

If Paragraph Layout is enabled, you can choose a link separator option to control how each collection is visually separated from the others.

You can choose between five different options: none, bullet, comma, emdash and hyphen: 

None:  

Bullet: 

Comma: 

Emdash: 

Hyphen: 

Block typography adjusts the Text size, Mobile text size, Link separator, and contains the on/off toggle for Show collection product count. 

You can also adjust the Image aspect ratio, Desktop image width, and Corner radius. 

Image aspect ratio has the following options: 

• Adapt to image
• Vertical (4:5)
• Square (1:1)
• Landscape (3:2) 

Select colors

Choose colors for the section's Text color, Background color, and Background gradient.

You can also toggle the Animations for the section below this setting. 

Adjust spacing

Use the Top padding and Bottom padding sliders to increase or decrease the padding of the section.

Use the Top margin and Bottom margin sliders to increase or decrease the margins of the section.

Add collection blocks

You can add your section content through the Collection block:

In the block setting, you can select the Collection to display by clicking the button beside Collection title. 

As an option, you can also upload an Image or put a Custom title for the block. Hovering over the collection title in the section would show the image you have uploaded in the block.