Banner

Collection pages

Theme retirement Ira is no longer available on the Shopify theme store. Theme support and updates for current users will end after May 18, 2024. Learn more here.

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.

Set up banner image and text

Shopify | The Collection image is a Shopify feature. See their article Add a featured image for a collection for more information.

STEPS

In your theme editor (Customize):

1. Click 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. Choose a Collection image style: Text only, Half width image, or Full width image.

   

   

   

   The Collection image is a Shopify feature. See their article Add a featured image for a collection for more information.

3. Choose an Image position for the collection image.

   This setting lets you set a focal point for the image. Customers may view this page on any size of screen. So, if the image needs to be cropped, you can choose which part of the image should be kept.

   Note that this setting applies to all of your collection pages with this template.

4. Choose whether to Enable full width.

   If enabled, the collection image spans the width of the page. This is required to use the transparent header feature.

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. (Optional.) Select an Overlay color to display overtop of the image and adjust the Overlay opacity using the slider.

   The Overlay lets you control the brightness and tone of images. Use this setting to balance it with other images and to increase contrast with headings so they're readable.

   Set the opacity to 0% to turn off the overlay color; set it to 100% to create a solid color block with no image.

7. (Optional.) Click the Overlay gradient option to add a color overlay that fades across a range of hues.

   You can choose the style, angle, position, and opacity of the gradient. See Shopify's color gradient guide to learn more.

8. Click Save.

---

Related links

Collections template Product grid Filters and sorting