Collection banner

Overview #

The Collection Banner block is designed to enhance the visual appeal of a collection page by allowing users to add a customizable banner. This block provides various settings to adjust the banner's size, background, and content alignment, making it a versatile tool for creating engaging and visually appealing collection pages.

Key components and functionality #

Banner size

The banner size setting allows you to choose the size of the banner displayed on the collection page. You can select between small and large options to fit your design needs.

• Options: Small, Large

Background settings

Background settings provide options to customize the banner's background with images or videos, ensuring it aligns with your brand's aesthetic.

• Background image fit: Choose how the background image should fit within the banner. Options include contain, cover, and default, with cover as the default.
• Background image: Select an image to use as the banner's background.
• Background image (mobile): Choose a different image for mobile devices to ensure optimal display.
• Background video: Add a video as the banner's background for a dynamic effect.
• Background video (mobile): Select a different video for mobile devices.

Foreground content

Foreground content settings allow you to adjust the alignment and content of the banner's foreground elements, such as text and icons.

• Horizontal alignment: Align the content to the left, center, or right.
• Vertical alignment: Align the content to the top, middle, or bottom, with bottom as the default.
• Icon: Add an icon to the banner for additional visual interest.
• Caption: Include a caption to provide context or additional information.
• Heading: Set the main heading for the banner, with Collection banner as the default.
• Heading type: Choose the HTML tag for the heading, ranging from paragraph to heading 6, with h2 as the default.
• Subheading: Add a subheading for more detailed information.

Button settings

Button settings allow you to add and customize a button on the banner, enhancing user interaction.

• Button icon: Add an icon to the button for visual emphasis.
• Button text: Specify the text displayed on the button.
• Button link: Set the URL the button will link to.
• Open link in a new tab: Choose whether the link opens in a new tab, with false as the default.
• Button style: Select the button's style, with options like primary, secondary, extra large, plain, small, and small secondary.
• Button layout: Decide the button's layout, such as icon left, icon right, or icon only.

Foreground media

Foreground media settings allow you to add an image to the banner's foreground, enhancing its visual appeal.

• Image: Select an image to display in the foreground.
• Image style: Choose the style of the image, such as default, rounded corners, or circle.
• Max image width: Set the maximum width for the image, with a default of 160 pixels.

Visibility settings

Visibility settings control the visibility of the banner on different devices.

• Visibility: Choose whether to hide the banner on desktop, mobile, or not at all, with do not hide as the default.

Available in sections #

• Collection

Usage examples #

1. Promotional Banner: Use the Collection Banner block to highlight a sale or special promotion by adding a large, eye-catching background image and a prominent call-to-action button.

2. Brand Storytelling: Incorporate a video background to tell your brand's story, with a centered heading and subheading to provide context and engage visitors.

3. Responsive Design: Customize the banner's background and foreground images for mobile devices to ensure a seamless and visually appealing experience across all screen sizes.

By leveraging the Collection Banner block's settings, you can create a dynamic and engaging collection page that captures visitors' attention and enhances their browsing experience.