Collection banner
Last updated
Last updated
Display a banner/ background with highlighted features/ offers on a collection page can effectively improve customers' shopping experiences and boost your sales.
Steps:
In the theme editor (Customize), open the template selector.
Select Collections, then Default collection.
On the left-side bar, add Collection banner section.
To display unique images for each collection, you can use Shopify metafields, which allows you to assign a banner image for desktop and mobile view per collection dynamically.
Steps to Add Collection Banner Metafields:
You need to create two metafield definitions, one for desktop and one for mobile view.
Go to Shopify Admin > Settings > Custom Data > Collections.
Create 2 new metafield definitions:
Namespace and key:
For desktop banner: foxtheme.collection_banner
For mobile banner: collection_banner_mobile
Type: File (Image)
Save the metafield definition.
Navigate to Products > Collections, select a collection, and upload an image under the new metafield.
Once set up, your collection pages will dynamically display the assigned banner image.
Default image: If no colletion metafield for banner is set, this image will be displayed as the collection banner.
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)
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 default image for the banner on the mobile view.
You have 2 options for adjusting the Image height (Auto/ Adapt to image).
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).
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.
If you want to make your website more visually appealing and dynamic, consider using the parallax effect by selecting the Enable parallax effect checkbox.
Additionally, you can enable the Show collection description checkbox to display the collection description.
