Collection Banner

The Collection Banner section displays an image and introductory content at the top of a collection page. It helps customers quickly understand the collection and creates a strong visual focus.

1. How banners are displayed

Collection Banner supports three banner display methods, applied in the following priority order:

1.1. Collection Metafield banner (Highest priority – Recommended)

Each collection can display its own banner using a metafield.

• Metafield key: theme.hero_image

• Type: File (Image)

How it works

• If the collection has theme.hero_image, the banner displays this image

• If not, the banner falls back to the banner set in the section settings

1.2. Image / Mobile image (Fixed image)

Upload banner images directly in the section settings:

• Image: desktop banner image

• Mobile image: mobile banner image

This banner is applied to all collections using the same template.
If no mobile banner is set, the desktop banner will be used.

1.3. Show collection image (Not recommended)

Uses the default image assigned to the collection in Shopify Admin.

Limitations

• The same image is also used on the Collection List page

• Typical image ratio is 3:4, which is not suitable for a horizontal banner

• Cropping may occur

2. How do I choose featured products in the Collection Banner?

For the featured products displayed in the Collection Banner, you can manage them using a collection metafield.

Please create a metafield with the following settings:

• Name: Products featured

• Key: theme.products_featured

• Type: List of products

You can then assign the desired products to this metafield for each collection.

3. Collection Banner configuration options

3.1. Image height/Mobile image height

Controls the banner height on desktop and mobile. You can selection "Adapt to image" or fixed height.

3.2. Image behavior

Controls the banner display behavior with None, Ambient movement or Parallax

3.3. Image overlay opacity

Adds a color overlay to improve text readability
Recommended: 20–40%

3.4. Show collection title

Displays the collection name on the banner
Recommended: Enabled

3.5. Show collection description

Displays the collection description
(Content is taken from Collection → Description)
Note: Keep text short (1–2 lines)

3.6. Show breadcrumb

Displays the navigation path:
Home → Collections → Collection name

3.7. Content maximum width

Limits the width of the banner content
Recommended: 600–700px

3.8. Featured Product

You can hide option on mobile with "Hidden featured product on mobile".

With Featured product title, you can change text to show.

3.9. Divider shape

Adds a decorative divider between the banner and collection content
(Visual effect only)

3.10. Color scheme

Applies a color scheme from
Theme Settings → Color schemes

If you would like our team to check your setup, please contact us on Live chat.