Collection banner

The Collection banner section lets you create a striking visual for each collection page. With flexible image, text, and layout options, it helps make a memorable first impression.

This section is included by default in the collection template.

General section settings

Within this section, you'll find common settings like containers, visibility options, and color settings that are consistent across all sections. For more detailed information on these shared settings, please refer to the Common settings between all sections article.

Section-Specific Settings

• Show Collection Image: Enable to display the collection's designated image as the banner background (default: true).
• Use First Product Image as Collection Image: If toggled, the first product’s image will display as the collection banner if no specific collection image is set.
• Desktop and Mobile Images: Upload separate images for desktop and mobile to ensure optimal display on each device type.
• Overlay Opacity: Adjust the overlay transparency (0-100%) to enhance text visibility over the banner.
• Image Height (Desktop and Mobile): Select between standard sizes ("small," "medium," "large," etc.) or choose "custom" to define your own height.
• Custom Height for Desktop: Set a specific height for the desktop image (300px to 1000px).
• Custom Height for Mobile: Set a custom height for the mobile image (300px to 600px).‍
• Content Position: Control the vertical position of the text within the banner for both desktop and mobile, allowing placement at the top, middle, or bottom.‍
• Content Alignment: Choose text alignment (left, center, right) for better visual balance within the content box.‍
• Content Maximum Width: Define a maximum width (400px-700px) for the content area to keep it compact and aligned with the banner design.
• Enable Parallax: Toggle to add a parallax scrolling effect to the banner image, creating a dynamic, layered look as users scroll.

Block Settings

• Title: Add a title block with customizable sizes ("small" to "extra-large").
• Breadcrumbs: Include breadcrumbs to help users navigate back to previous pages.