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 Add a featured image for a collection ↗ for more information.
The banner text includes the collection title and description that you’ve added in your Shopify admin. The 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.
Show collection description
Show the collection description from the collection settings in your Shopify admin.
Truncate collection description
Choose to show the full collection description or hide additional lines that can be revealed by clicking ‘more’ button.
You can truncate the description text after 1 line or 2 lines.
By default, the banner will use the image uploaded to the collection settings in your Shopify admin.
See Shopify's guide to Add a featured image for a collection ↗
You can change the image height, define an image focal point, and add a color or gradient overlay on top of your image.
To show custom images for collection pages using the same template, you can use metafields and dynamic sources. Use this option if you want to show different images without changing the collection image in your Shopify admin.
There are three general steps:
Create a 'file' metafield for collections
Add custom images to the new metafield in your collections
In your theme editor, add the metafield as a dynamic source to the banner image setting
Metafields allow you to store extra information about your products. In your Shopify admin, you can create and populate custom fields for specific parts of your store (such as products). In your theme editor, you can use dynamic sources to automatically display the correct content from your metafields.
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
Select the most important part of your image to keep centered.
Use focal points to avoid unwanted cropping across different screen sizes.
Mobile image focal point
For mobile images, select the most important part of your image to keep centered.
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 a Fixed height (in pixels) or Relative height (as a percentage of the window height).
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.
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.
Related links
Using color overlays
Learn how to change overlay colors and use gradients.