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):

1. 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.

2. Check the Show collection image to display the collection image.

   Go to your Shopify admin to change your collection image.

3. (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.

4. 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.

   
5. 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 ↗.

6. 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.

7. 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):

1. Click on the Collection banner section to open the settings.

2. (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.

3. Click Save.

Settings reference

In a collections template, click the Collection banner section to find the following settings.

Setting	Description
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

Setting	Description
Show collection image	Choose to display an image from your Shopify admin settings or custom image.

Section style

Setting	Description
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

Collections template Product grid Filters and sorting