Collection banner
Collection banner
To set up a collection image section:
Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a collection banner section.
Select Collections > Default collection.
From the side panel, select the Collection banner block.
You can select Description or Image.
Click Save.
Heading size
Customization of "Heading size" as follows:
Small
Medium
Large
Heading alignment
Customization of "Content alignment" as follows:
Left
Center
Show collection description
Enabling this checkbox will allow you to display the added description in the collection.
Default collection image
Use "Default collection image" to add the image to the section.
Show collection image
Enabling this checkbox will allow you to display the added image in the collection.
Layout
Customization of the "Layout" in the collection banner is as follows:
Column
Overlay
Banner background
Modifying the color of the banner background will result in a corresponding color change for the banner background.
Banner text
Modifying the color of the banner text will result in a corresponding color change for the banner text.
Background overlay
By enabling this checkbox, you have the ability to change the opacity of the image overlay. Modify the "Background overlay" setting to increase or decrease the opacity level of the overlay on the collection banner image.
Adding Collection banner via metafield
Before you can add Collection image(metafield value) to specific collections, you need to add the necessary metafield definition for this information.Comment
From your Shopify admin, go to Settings > Custom data > Collections
Click Add definition
In the Name field, enter
Collection imageIn the Namespace and key field, enter
custom.collection_image
Click Select type then select File.
than select Accept all file types
Click Save to save the definition
You should see the Collection image in the list of definitions by now
Setting the Collection image
In your admin, within Collections, click on the collection you want to add the Collection image
Scroll down to the Metafields. You should see the Collection image here.
To set an image, click on the Collection image field
Click Save to save your changes
Last updated