Collection banner
How to add banners to your collections
Display a banner/ background with highlighted features/ offers on a collection page can effectively improve customer's shopping experiences and boost your sales.
How to add a Collection banner section
Steps:
In the theme editor (Customize), open the template selector.
Select Collections, then Default collection.
On the left-side bar, add Collection banner.
Add a description or image by editing your collection. Learn more
How to edit a Collection banner
Section settings
General
You can adjust the Color scheme for the Collection banner section
Settings
Add an outstanding Image to display on the Collection banner.
You can set the banners for mobile and desktop view separately.
After you have chosen a suitable banner image, you can adjust the Image overlay opacity.
Image position can be set as Top/ Left/ Right/ Bottom/ Use image as background to the content (Collection title and description).
Set an Image height for the banner:
Adapt to image
Large
Extra medium
Medium
Small
Extra small
and Text alignment (Left/ Center/ Right)
If you want to make your website more visually appealing and dynamic, consider using the parallax effect by selecting the ✅ Enable parallax effect checkbox.
Then, select your preferred direction for this effect in the Parallax direction field (Vertical/ Horizontal/ Zoom)
Mobile settings
This setting allows you to add a different image for the banner on the mobile view in the Image mobile field.
You have 2 options for adjusting the Image height (Auto/ Adapt to image).
Block settings
In the Collection banner section, you can add 1 Collection information block.
Change the Heading size to a suitable option (Heading xs/ Heading sm/ Heading md/ Heading lg/ Heading xl/ Heading 2xl/ Display md/ Display lg/ Display xl).
Especially, choose the suitable Heading tag for the collection title (H1/ H2/ H3/ H4/ H5/ H6).
Additionally, you can enable the ✅ Show collection description checkbox to display the collection description.
You can also modify the spacing above and below the Collection information block by adjusting the slider to change the values of the Top padding and Bottom padding.
Add Image banner to your Collections using Metafields
Step 1: Create product metafield definitions
You can add collection banner for desktop and mobile view separately by setting up two metafield definitions for Collections.
Go to Shopify Settings > Custom data > Collections
Select Add definition
Create two definitions with the given namespaces and keys below:
Collection banner for desktop: foxtheme.collection_banner
Collection banner for mobile: foxtheme.collection_banner_mobile
Select Type as File and click Save.
Add metafield value for collections
Once you have created the metafield definitions, go to Products > Collections > select the collection you want to add collection banner to.
In the Metafields section, select an image to be featured and there you have it 🎉
Last updated
Was this helpful?