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
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
Displays a featured product on the banner. You can hide option on mobile with "Hidden featured product on mobile".
Title for the featured product block
Adds a decorative divider between the banner and collection content
(Visual effect only)
Applies a color scheme from
Theme Settings → Color schemes