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.
Collection Banner supports three banner display methods, applied in the following priority order:
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
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.
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
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.
Controls the banner height on desktop and mobile. You can selection "Adapt to image" or fixed height.
Controls the banner display behavior with None, Ambient movement or Parallax
Adds a color overlay to improve text readability
Recommended: 20–40%
Displays the collection name on the banner
Recommended: Enabled
Displays the collection description
(Content is taken from Collection → Description)
Note: Keep text short (1–2 lines)
Displays the navigation path:
Home → Collections → Collection name
Limits the width of the banner content
Recommended: 600–700px
You can hide option on mobile with "Hidden featured product on mobile".
With Featured product title, you can change text to show.
Please note that from Athora v2.2.0, we have added additional options for the Collection Banner featured products, including:
Change product every – Automatically rotate featured products after a specified number of seconds.
Show circle image animate – Display animated circular product images for a more dynamic visual effect.
You may consider updating to the latest version to access these new features and improvements.
Adds a decorative divider between the banner and collection content
(Visual effect only)
Applies a color scheme from
Theme Settings → Color schemes