1. What is Collection list banner?
Typically displayed prominently on the homepage or a dedicated landing page, the Collection list banner provides an organized and visually appealing way for users to browse through different product categories or collections.
This section serves as a navigational aid, helping users quickly find and access the products they are interested in. It also helps to highlight featured or seasonal collections, promote new arrivals, or showcase best-selling categories.
2. Section Components
| Section | Collection list banner | Showcase a list of collections together with its featured image. |
|---|---|---|
| Available block | Collection banner | Used to add a separate collection, with its own text & banner (e.g. Deep cleanser). |
3. Location & Setup
To add and set up the Collection list banner section:
- Open the Shopify Theme Editor (Online store > Themes > Customize)
- Decide where you want to place the new section.
- Click "Add section".
- Select "Collection list banner".
4. Highlight Features
- Multiple collections showcase: Display up to 6 collections with individual banners, each with its own title and featured media.
- Carousel support: Enable auto-play and choose transition styles for smoother, dynamic interactions.
- Appealing layout: Supports rich media to present your collections like images, videos, and is freely customizable.
5. Common Use Cases
🤔 How to set up the Collection list banner section?
If you want to set up the section but don't know how to start, follow this:
STEP 1: Add the section
Add the Collection list banner section.
STEP 2: Add and set up Collection banner blocks
Under the Collection list banner section, add Collection banner blocks (up to 6). Once added, click on the block to open its settings panel:
- Choose the collection to feature in the banner.
- Enter a Custom title for the banner. If there's no custom title provided, it will use the selected collection's name.
- At Image, you can upload or explore free images for the banner, including separate options for mobile devices at Mobile image.
- You can also feature a video by choosing a video hosted on Shopify or embedding one from a URL (supports YouTube and Vimeo).
If you upload both an image and a video, the video is displayed, and the image is disabled.
Repeat STEP 2 to add more collections to this section.
STEP 3: Customize the section's look
Click on the Collection list banner section to open its settings panel, then:
- Choose the Layout for the section:
| Carousel layout | Flex layout |
|---|---|
 |
|
- Under Collection titles setting group, choose Position to make it appears on Top, at center, or at the bottom of the banner image and adjust the font Size.
- Customize section width, padding, or media height for Desktop 🖥️ and Mobile 📱 layout.
STEP 4: Click "Save" to apply changes.
🤔 How to show the number of products of each Collection on the banner?
To display the number of products on each collection like this, follow these steps:
STEP 1: Click on Collection list banner to open its settings banner.
STEP 2: Scroll down to Collection titles setting group, then:
Enable "Show item count".
STEP 3: Click "Save" to apply changes.
🤔 How to enable carousel for Collection list banner section?
To enable carousel effect for the section, follow this:
STEP 1: Click on the Collection list banner to open its settings banner.
STEP 2: Scroll down to the Carousel setting group, then:
- Toggle "Enable auto-play"
- Choose Transition style among blocks: Slide or Fade.
STEP 3: Click "Save" to apply changes.
6. Support Information
Need help? Contact support@omnithemes.com or visit omnithemes.com.
