Collection banner

by Admin on Oct 03, 2025

1. What is Collection banner section?

A Collection banner shows the featured image of the collection when customers visit the collection page. It helps showcase key content, including featured images and breadcrumbs, while improving aesthetics and boosting user engagement.

⚠️ Note: This section can ONLY be used in the collection pages.

2. Section Components

Section		Showcase key content, including featured images, title, description, and breadcrumbs for the collection.
Available block		Display navigational links that show the path back to previous pages.
Available block		Add a brief description or details about the collection.

3. Location & Setup

Go to "Online Store" > "Themes" > "Customize".
Click on the Homepage dropdown menu > Collection > Default collection.
Click "Add Section".
Search for "Collection banner".
Click on it to add.

4. Core Features

Flexibility in design, allowing you to adjust the banner's appearance to align with your store's branding and style.
Easy to navigate with breadcrumbs, enhancing user experience.

5. Common Use Cases

🤔 How to show a banner on a collection page?

Want to show a collection banner on a collection page but don't know how to start? Here's how:

STEP 1: Add the section

In the collection page, add a Collection banner section.

STEP 2: Customize the section

Show collection image: Display the collection image on the banner.
Show collection title: Add a specific title to the collection banner.
Image height: In the Desktop layout and Mobile layout setting group, choose the preferred image height display.

STEP 3: (Optional) Add a custom image as the banner

In case you don't want to use the default collection image as the banner, upload your custom one by:

Scroll down to Desktop layout/Mobile layout setting group.
At Image setting, upload your preferred image.

STEP 4: Click "Save".

🤔 How to show breadcrumbs under this collection banner?

Want to show breadcrumbs under the collection banner? Here's how:

STEP 1: Add the block

Under Collection banner section, add Breadcrumbs block.

STEP 2: Click "Save".

🤔 How to show a description under the collection banner?

Want to add relevant details or promotional content about the collection? Here's how:

STEP 1:

Under the Collection banner section, add a Description block.

STEP 2:

Customize the block with these:

Choose the desired Default content height. Selecting a height other than Full will display a "Read more" button.
Label the "Read more"/"See less" button.
Adjust the Desktop content alignment 🖥️ and Mobile content alignment 📱.

STEP 3:

Click "Save".

🤔 What customization options can you give your Collection banner?

Option	How to set it up?
✨ Change color scheme	Click on the Collection banner section, and choose the overall scheme you want to use in both light and dark mode in the Color scheme.
✨ Change the Image overlay opacity	Click on the Collection banner section, and choose the Image overlay opacity from 0-100%.
✨ Change the Collection title size	Click on the Collection banner section, and choose the Heading size to be Small, Medium, or Large.
✨ Change the Heading tag (for SEO purposes)	Click on the Collection banner section, find and choose the Heading tag from the list.
✨ Change the Desktop/Mobile layout	Click on the Collection banner section, scroll down to the Desktop layout 🖥️ and Mobile layout 📱, you can customize Collection title position, upload Image and adjust Image height.
✨ Change the height of images	Click on the Collection banner section, scroll down to Mobile layout 📱 and Desktop layout 🖥️, and choose your preferred Image height.
✨ Change the section width or add padding	Click on the Collection banner section, and scroll down to the Section layout group, select one of 4 options in the Section width dropdown and adjust Top padding/Bottom padding from 1-100px to distance the section from the above/below section as you desire.

Need help? Contact our support team at Omni Themes Support.