Collection banner
Select a setting described in the following table:
| Setting | Description |
|---|---|
| Color scheme |
Choose an appropriate color scheme for the banner from the schemes list. The color scheme includes different colors for the background, heading, breadcrumbs, and other elements in the banner. *Applying a color scheme automatically updates all associated colors set in the theme settings according to the created color schemes. You can edit colors in this block, but it will impact the other sections and blocks in which the same color scheme is used. Learn more about color schemes. |
| Banner width | Controls the horizontal width of the banner: Container (matches the width of other sections) or Full width (spans edge to edge). |
| Show breadcrumbs | By enabling this option, breadcrumbs will be displayed above the heading in banner, providing navigation links to help visitors back to main page – homepage. |
| Breadcrumbs text color |
Select the color for the breadcrumbs text from the following options: • Text • Text Secondary • Text Accent Each option adapts to the active color scheme, so the actual color may vary depending on the scheme applied. Only shown when Show breadcrumbs is enabled. |
| Heading size |
The heading size setting offers three options to control the size of the heading: • Small • Medium • Large |
| Font case |
Choose how the heading text is displayed: • None: Keeps the original text formatting. • Capitalize: Capitalizes the first letter of each word. • Uppercase: Displays the heading text in all capital letters. • Lowercase: Displays the heading text in all lowercase letters. |
| Show collection description | Display the collection description from the collection settings. |
| Show container | Enable this option to display the content container when image position is cover. Only shown when Show collection image is enabled. |
|
Show collection image For best results, use an image with a 16:9 aspect ratio. Learn more |
Display the collection image set on the collection page. |
| Disable image border radius | Removes the rounded corners from the collection image, giving it sharp, square edges instead. Only shown when Show collection image is enabled. Disabled by default. |
| Custom image |
This image overrides collection image, use metafield to set different image for each collection. Only shown when Show collection image is enabled. |
| Default image |
This image is used when a collection does not have its own custom image or any products yet. Only shown when Show collection image is enabled. |
| Image position |
Choose how you want the banner image to be positioned on your site: • Left: The image will be aligned to the right side of the banner, with text or other elements appearing on the left. • Cover: The image will cover the entire banner area, ensuring it stretches to fill the space while maintaining its aspect ratio. This option is great for a full-width image. • Right: The image will be aligned to the left side of the banner, with text or other elements appearing on the right. |
| Image position mobile |
Controls how the collection image is positioned specifically on mobile. • Inherit — uses the same behavior as Image position above. • Top — places the image above the content, revealing Image height mobile below. • Cover — the image covers the full mobile banner area. Only shown when Show collection image is enabled. |
| Image height mobile |
Sets the height of the image on mobile: Adapt to image, Small, Medium, Large, or Custom. Only shown when Show collection image is enabled and Image position mobile is set to Top. |
| Image height mobile custom |
Sets a custom image height on mobile as a percentage (20–80%). Only shown when Show collection image is enabled, Image position mobile is Top, and Image height mobile is set to Custom. |