The Collection Banner section is designed to highlight a specific product collection with a visually striking banner. It serves as the first impression for customers browsing a collection page, combining compelling imagery with key messaging to draw attention and set the tone.
This guide will help you customize the layout, content, and style of this section to align with your brand identity and campaign goals
You can access a Collection banner section by following these simple steps:
Step 01: From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.
Step 02: In the theme editor (Customize), navigate to the Default collection page > click the Sections button > you will see the Collection banner section displayed in the template area.
After accessing the Collection banner section, you can configure some general options for the Collection banner section below:
Add a description or image by editing your collection.
Color scheme: Choose a color scheme to style the text and background elements of the Collection banner according to your theme presets.
Show collection title: This is a toggle switch. When it's turned on (to the right), the title of your collection will be displayed on the banner. When it's turned off (to the left), the title will be hidden.
Show collection description: This is a toggle switch. When it's turned on (to the right), the description of your collection will be displayed on the banner. When it's turned off (to the left), the description will be hidden.
Desktop content position: This dropdown menu lets you choose where the content within your banner will be positioned when viewed on a desktop. Options included: Top left, Top center, Top right, Middle left, Middle center, Middle right, Bottom left, Bottom center, Bottom right.
Mobile content position: This dropdown menu lets you choose where the content within your banner will be positioned when viewed on a mobile devices. Options included: Top left, Top center, Top right, Middle left, Middle center, Middle right, Bottom left, Bottom center, Bottom right.
Content maximum width: This slider and numerical input field allow you to set the maximum width that the content within your banner will occupy. The value is likely in pixels (px).
Show collection image: This is a toggle switch. When it's turned on (to the right), the image of your collection will be displayed on the banner. When it's turned off (to the left), the image will be hidden.
For best results, use an image with a 16:9 aspect ratio.
Image: This option is where you can upload or select a custom image to be displayed as the background of the banner.
Mobile image: This options allows you to select a different image specifically for how the banner appears on mobile devices. If none is set, desktop image will be used.
Image overlay opacity: Adjust the transparency of a color overlay on top of the image (0% = fully transparent, 100% = fully opaque).
Image height: This dropdown menu gives you control over how the height of your main banner image is determined on desktop. Options included: Adapt to image, Fill screen height, Fixed height.
Fixed height: If you select "Fixed height" for Image height, this option is allowing you to set a specific, fixed height (in pixels) for your desktop banner image. This might cause your image to be cropped if its original height doesn't match the fixed value.
Mobile image height: This dropdown menu gives you control over how the height of your main banner image is determined on mobile. Options included: Adapt to image, Fill screen height, Fixed height.
Mobile fixed height: If you select "Fixed height" for Mobile image height, this option is allowing you to set a specific, fixed height (in pixels) for your mobile banner image. Again, this could lead to cropping if the image's original height differs.
Image behavior: This dropdown menu provides options for how the banner image behaves. Options included: None, Ambient movement, or Parallax.
