Collection banner
A complete guide to add banner on the collection page
Take the following steps:
Go to the Customizer
Go to Collections > Create template
Click on the "Collection banner" section
Follow the given screenshots -
Section settings
Page width
Boxed: With boxed width, page content can be displayed within the maximum width. The page width can be changed in Theme Settings > Layout.
Full width: With the "Full width" option, page content can be displayed in its entirety full-width. When you show content at full width, you can add padding to the left and right sides.
Disable Offset (left & right)
It will work if you select the "Full width" of the page. When you enable this option, the padding on the left and right sides will be removed.
Heading size
You can change the heading size by following the options -
Large
Medium
Small
Title transform
You can change the heading transform by following the options -
Uppcarse
Lowercase
Capitalize
Default
Show breadcrumb navigation
You can show/hide the breadcrumb navigation.
Show collection description
You can show/hide the collection description.
Image
You can add an image -
Optional! Instead of the collection's image, the selected image will be displayed.
Image height
You can change the image height by following the options -
Adapt to image
Small
Medium
Large
Enable collection image overlay
If you enable it, The image will be positioned as a background.
Overlay opacity on image
You can enable overlay on the image. The opacity range is, 0 to 100%
Desktop content alignment
You can change the content alignment for desktop devices.
Round the corners of the box
You can add a border radius to the collection banner box.
Colors
You can change color of the section.
Section padding
Desktop: Padding top
The section’s top inner space height is determined. From 0 to 150 px, will be incremented by 5px. It will affect the desktop.
Desktop: Padding bottom
The section’s bottom inner space height is determined. From 0 to 150 px, will be incremented by 5px. It will affect the desktop.
Mobile: Padding top
The section’s top inner space height is determined. From 0 to 150 px, will be incremented by 5px. It will affect the mobile.
Mobile: Padding bottom
The section’s top inner space height is determined. From 0 to 150 px, will be incremented by 5px. It will affect the mobile.
Example demo
Last updated