Skip to content

Collection banner

This guide describes setting up your store's Collection banner section. Use the section on your store's collection pages to display a banner image above a collection.

In the following video, a collection banner section is displayed on a store's collection page. To adjust the shape of the collection banner's image, inside the section, the Crop image setting is changed from Super wide to Letterbox.

For general guidance with modifying sections, refer to Sections overview.

Set up a collection banner section

To set up a collection banner section:

  1. Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a collection banner section. For example, select Collections > Default collection.


    The section is available only on default collection pages.

  2. From the side menu, select Collection banner.

    The collection banner section selected in Theme editor

  3. Select a section setting described in the following table.

Section setting nameDescription
WidthSelect the Width dropdown to set the width of the banner image to Full width or Content width. Full width uses the entire width of the section, and Content width uses the width of the section's content area.
Crop imageUse the Crop image dropdown to set the shape of the banner image inside the section. The dropdown options are No crop, Portrait, Square, Landscape, Super wide, and Letterbox.
Overlay collection titleSelect the checkbox Overlay collection title to show/ hide the collection's title text inside the section. With this setting enabled, the collection's title text is displayed on the banner image.
Overlay text colorSelect the dropdown Overlay text color to set the color for the collection's title text to Primary, Secondary, Tertiary, White, or Black. The setting applies to overlaid title text when the Overlay collection title option is enabled.