Banner
Collection pages
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.
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.
Shopify | The Collection image is a Shopify feature. See their article Add a featured image for a collection for more information.
Set up banner image and text
STEPS
In your theme editor (Customize):
Click on the Collection banner section to open the settings.
Note: These settings apply to all pages that use the same template. To edit specific pages, you can create multiple templates or insert dynamic content with metafields.
Check the Show collection image to display the collection image.
Go to your Shopify admin to change your collection image.
(Optional.) Use the Select image button to replace all collection images with one image for all collection pages.
To show different images on different collections, you can create multiple templates or insert dynamic content with metafields.
To crop collection images to a uniform shape, set the Image aspect ratio to crop your images to Square, Landscape, or Portrait.
The default Natural setting displays the original orientation of your product media.
Choose whether to Show collection description.
Adding a description to a collection is a Shopify feature. See their article Change the name or description for a collection.
Use the Max width of text slider to control the maximum width of the article subheading.
Use this setting to create a clean visual shape for your text and avoid unwanted line breaks.
Click Save.
Show breadcrumbs
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.
STEPS
In your theme editor (Customize):
Click on the Collection banner section to open the settings.
(Optional.) Click Show breadcrumbs to display a row of links so customers can see where they are on your site and can return to the previous page.
Click Save.
Settings reference
In a collections template, click the Collection banner section to find the following settings.
Show breadcrumbs
Display "Breadcrumb links" that show where customers are on your site and allow them to easily return to the previous page.
Show collection description
Show the collection description from the collection settings in your Shopify admin.
Collection image banner
Show collection image
Choose to display an image from your Shopify admin settings or custom image.
Section style
Enable animation
Choose whether to display visual effects when scrolling, hovering, or interacting with the section. See our Section animations to learn more.
\
Related links
Last updated