Banner
Last updated
Was this helpful?
Last updated
Was this helpful?
In the Collection banner settings, you can customize its overall section style, along with the banner image and description. You can also choose to enable breadcrumb navigation.
The Collection image is a Shopify feature. See their article for more information.
In the Collection banner settings, you can change the banner heading's text position and text color, and choose to hide the collection description.
The banner text uses the Heading and Body font styles chosen in the Theme settings.
To edit your collection's title or description, go to Products > Collections in your Shopify admin. See to learn more.
Click Collection banner section to find settings
Show collection description
Show the collection description from the collection settings in your Shopify admin.
Text position
Choose one of nine positions to place the description text within the banner.
Mobile text position
Choose one of nine positions to place the description text within the banner.
By default, the banner will use the image uploaded to the collection settings in your Shopify admin.
Use the style settings to change the image height, define an image focal point, and add a color or gradient overlay on top of your image.
You can use an image metafield and dynamic source to display unique banner images for collections using the same template.
You might want to use this option if you want to use an image that’s different than the default image uploaded to your collections in the Shopify admin.
Click Collection banner section to find settings
Show collection image
Choose to display an image from your Shopify admin settings or custom image.
Image
Select or upload a custom image for the banner to override the image from your Shopify admin settings.
Mobile image
Select or upload an alternate custom image for the banner when on mobile devices.
Image focal point
Mobile image focal point
Banner height
Set the banner height to either Adapt to image (use your image’s height) or select a Custom height.
Custom desktop height
Choose a Fixed height (in pixels) or Relative height (as a percentage of the window height).
Custom mobile height
Choose to display the Collection image or First product image for the collection items.
The image overlay adds a layer of color to your image. Overlays help balance image and text for clarity and readability.
Select colors the overlay and overlay text
Change the opacity to make the overlay more or less transparent
Click Collection banner section to find settings
Text color
Select a custom color for the heading and text of the banner.
Overlay color
Select a custom overlay text color.
Overlay opacity
Use the slider to adjust the transparency of the overlay color.
Set the opacity to 0% to turn off the overlay color. If set to 100%, the overlay will be opaque.
Overlay gradient
Choose to use a Solid overlay color or Gradient overlay for the tint. The gradient style fades across a range of hues. You can select the angle and direction of the gradient from one of four options.
You can display "Breadcrumb links" that show where customers are on your site and allow them to easily return to the previous page.
Breadcrumbs appear at the bottom-left of the banner when customers have navigated to the collection page from another page.
Click Collection banner section to find settings
Show breadcrumbs
Display "Breadcrumb links" that show where customers are on your site and allow them to easily return to the previous page.
Click Collection banner section to find settings
Enable animation
Padding
Add spacing between sections. Choose between Top and bottom, Top only, Bottom only, or set it to None.
Related links
See Shopify's guide to
to learn more about specifying a focal point for an image used within a section or for an uploaded image file when used anywhere on your site.
You can choose the style, angle, position, and opacity of the gradient. See Shopify's to learn more.
Select the most important part of your image to keep centered. Use focal points to avoid unwanted cropping across different screen sizes. You can specify a focal point for an image used within a section or for an uploaded image file. Learn more in our .
Select the most important part of your image to keep centered. Use focal points to avoid unwanted cropping across different screen sizes. You can specify a focal point for an image used within a section or for an uploaded image file. Learn more in our .
Choose whether to display visual effects when scrolling, hovering, or interacting with the section. See our to learn more.
Breadcrumbs