Section

Displays a customizable grid of collections and promotional banners.

Available blocks

Showcases an individual collection with its featured image and name.

Highlights a special promotion or announcement with an image and text.

🤔 How to show the list of collections?

Want to have an area to show your specific store collections? The Collection list section is your go-to! Here's how to set it up:

STEP 1: Add the Collection list section:

Add the Collection list section to your page. 

⚠️ Note: By default, the section displays all collections. To feature specific collections, add blocks as guided in Step 2.

STEP 2: Use Collection blocks to choose what collections to show:

• Click “Add block” > Collection
• Click “Select” the desired collection

STEP 3: Customize the look of the whole section:

Tap on the Collection list section to open its setting panel, and you can adjust how many collections to show in a row:

• For desktop 🖥️: Find Desktop layout > adjust the Number of columns (from 1-12).
• For mobile 📱: Find Mobile layout > adjust the Number of columns (from 1-4).

STEP 4: Click “Save” when done.

🤔 How to Add a Promotional Image in the Collection List?

Want to highlight sales, featured collections, or seasonal campaigns? Here's how:

STEP 1: Add the Collection list section:

Add the Collection list section to your page.

STEP 2: Add & set up a Promotion Block.

• Click “Add block” > Promotion block.
• Add a Heading and Content.
• Upload a background image or video and adjust the Image overlay opacity.
• Choose an icon from the list to show it (optional).
• Add a button label and link (optional).

STEP 3: Click “Save” when done.

🤔 How to show customized collection images with metafield?

Want to display unique, high-resolution images for collections without altering their featured images? Here’s how:

STEP 1: Create a Collection Metafield.

• Go to Settings > Custom Data > Collection > Add Definition.
• Name your metafield, select File as the type, choose One file, and click Save.

STEP 2: Assign a Value to the Metafield.

• Go to Products > Collection, select a collection, and scroll to Metafields.
• Upload an image for the metafield and click Save.

STEP 3: Set it Up in the Theme Editor.

• In Theme Editor, open the Collection list section.
• Scroll to Auto-fill collection images with metafield.
• Copy the metafield's key after “custom.” and paste it into the field.

STEP 4: Click “Save” when done.

🤔 How to Enable Carousel for the Collection List?

Want to create a scrolling collection display for better navigation? Here's how:

STEP 1: Open the Collection list section setting:

In Theme Editor, click on the Collection List section.

STEP 2: Enable carousel:

Find the Carousel setting group, then:

• For desktop 🖥️: Turn on Enable carousel on desktop.
• For mobile 📱: Turn on Enable swipe on mobile.

STEP 3: Click “Save” when done.

🤔 What other customization options can you give your Collection list?