Search limit to:

Eurus

Ironworks

OT: Theme Sections

OT: WhatsApp Chat & FAQs

OT: Easy Instagram Feed

Collection list #1 - #2 - #3 - #4 - #5

by Admin on Aug 08, 2025

A Collection list is a compilation of different collections, often displayed prominently on the homepage. Collection lists serve as a convenient way for users to explore a variety of product categories right from the homepage, streamlining the browsing experience and guiding them towards relevant products of interest.

1. Section Components

Section	Collection list	Display different collections on the homepage.
Available block	Collection	Add collections to showcase.
Available block	Promotion	Describe a promotion, make announcements, or welcome customers to your store.

2. Location & Setup

To add & set up the Collection list section:

Open the Shopify Theme Editor (Online Store > Themes > Customize)
Decide where you want to place the new section in Template.
Click "Add Section".
Select "OT: Collection list (#number of variant)".

3. Highlight Features

Flexible media display: Upload and customize various media types like images, videos, collections, and products.
Carousel support: Carousel mode and navigation button for space-saving and better navigation.
Promotional blocks: Highlight campaigns or special collections to drive conversions.
Pre-designed layout options: Choose from 5 layout styles to match your store's aesthetic.

4. Common Use Cases

🤔 How to set up the Collection list?

To set up the Collection list section, please follow these steps:

STEP 1: Add collections

Under the Collection list section, add Collection blocks. You can add multiple collection blocks, each representing a single collection in the section.

STEP 2: Set up Collection blocks

Click on Collection block to open its setting panel. Then you can:

Select the Collection you want to display.
Upload a Custom image to replace the default collection image.
Enter the Title for the collection.

STEP 3: Repeat the above steps for other blocks to add more collections.

STEP 4: Click "Save" when done.

🤔 How to customize the Collection list section's look?

To customize the section's look, follow these:

STEP 1: Click on Collection list to open its setting panel

STEP 2: Customize the section's look

Enter the Heading for the entire section.
Adjust the size and alignment of the section heading. Select the Heading tag for this section to enhance the SEO of the page.
(Optional) Toggle to Show "View all" button.
Choose the Background color for the section.
In the Grid setting group, adjust the number of columns to display on desktop and mobile devices.

STEP 3: Customize the section Desktop 🖥️/ Mobile 📱 layout

Scroll down to Desktop/Mobile layout, you can:

Enable section divider.
Change the block spacing, section width, and top/bottom padding.

STEP 4: Click "Save" when done.

🤔 How to customize the look of the collection card?

To customize the collection cards' visuals, you should:

STEP 1: Click on the Collection list to open its setting panel

STEP 2:

Scroll down to the Collection card setting group, then:

If you want to…	You can…
Adjust your collection card image ratio:	Choose the Image style:
Adjust the title size of your collection card	Slide left or right or enter a number to the box under the Title size section
Adjust the title alignment	Choose your desired alignment under Content alignment
Make the title of the collection card appear on top of the image:	Tick the box Enable text overlay
Adjust the transparency background on top of the image to make the title more outstanding	Slide left-right or enter a specific number to the box under Overlay opacity section
Change the title position on the image	Choose your desired position under the Content position section Note: This is only applicable when the Text overlay setting is enabled.

If you want to…

You can…

Adjust your collection card image ratio:

Choose the Image style:

Adjust the title size of your collection card

Slide left or right or enter a number to the box under the Title size section

Adjust the title alignment

Choose your desired alignment under Content alignment

Make the title of the collection card appear on top of the image:

Tick the box Enable text overlay

Adjust the transparency background on top of the image to make the title more outstanding

Slide left-right or enter a specific number to the box under Overlay opacity section

Change the title position on the image

Choose your desired position under the Content position section

Note: This is only applicable when the Text overlay setting is enabled.

STEP 3: Click "Save" when done.

🤔 How to enable carousel for the section?

To make the section display blocks in a slide type, follow this:

STEP 1: Click on Collection list to open its setting panel

STEP 2:

Scroll down to the Carousel setting group, then:

Toggle "Enable carousel on desktop" to display the collection list in a carousel format on desktop devices.
Select "Enable swipe on mobile" to allow users to swipe through the carousel on mobile devices.
Turn on "Enable mobile navigation button" to show the navigation arrows on mobile. You can also set the color for elements of the navigation button.

STEP 3: Click "Save" when done.

🤔 How to add a promotion or image in the collection list?

The purpose of a promotion image is to provide information about featured collections, ongoing sale campaigns, or create focal points to attract customers' attention. It serves as a visual representation to highlight specific products or collections, enticing users to explore further and potentially make a purchase.

To add a promotion or image in the collection list, follow these steps:

STEP 1: Under Collection list section, click on "Add block" and select Promotion block.

STEP 2:

In the Promotion block setting panel, customize these:

Choose to show Icon in the block, with 3 options: Use available icon, choose icon from the icon list or custom icon with SVG code. Adjust the Icon size if needed.
Enter the Heading & the text of the section that will be displayed under the heading.
Select an Image to set as the background of the promotion block and adjust its overlay opacity.
Enter the label of the button. Leave empty if no button is required. Enter the link users will be redirected to when they click on the button.
Adjust the alignment of all elements (heading, text, button) in the promotion block.
In the Button design setting group, choose the button style, animation, and colors.