Collection banner

How to add banners to your collections

Displaying a banner/ background with highlighted features/ offers on a collection page can effectively improve customers' shopping experiences and boost your sales.

With banner image

Without banner image

How to add a Collection banner section

Steps:

1. In the theme editor (Customize), open the template selector.

2. Select Collections, then Default collection.

3. On the left-side bar, add Collection banner.

Add a description or image by editing your collection. Learn more

How to edit a Collection banner

Section settings

Layout

• Container: You can adjust the banner to display full width or within a fixed-width container using the two options Full / Fixed.

• Set an Image height for the banner:

  • Adapt to image

  • Large

  • Medium

  • Small

• Enable header overlay if you want the header to overlay your banner.

Media

• Show image: Enable Show image to display a banner image for the collection.

If Show image is disabled, no banner image will be displayed from this section.

Image display priority

When multiple image sources are available, the banner image is chosen in the following order:

1. Collection metafield image. See How to add an image banner to your collection using metafields

   
2. Collection featured image (set in the collection editor. Learn more)

   
3. First product’s image (from the first product in the collection)

4. Section image (set in this section setting).

Special cases:

• If no metafield image and no featured image are set, the first product’s image will be used as the collection banner.

• If the collection has no products, the section image will be displayed instead.

• Media overlay: Enable Media overlay if you want to add a color overlay on top of the image, then customize the color Overlay color.

Mobile settings

This setting gives you 2 options for adjusting the image height: Auto or Adapt to image.

Collection banner block

Content

Layout

• Alignment allows you align the banner text to the left/center/right, and adjust the position of the banner content to wherever you want it to appear.

• You can also adjust the content width with three options: Fit / Custom / Fill.

Mobile settings

Alignment and Position allow you to adjust the banner content specifically for mobile view.

Padding

You can also adjust the padding for both mobile and desktop to make the banner display properly.

Breadcrumbs

You can also adjust the padding for the Breadcrumbs in these settings.

Heading

You can add the Text you want to display in the Collection banner. There are also three Highlight Style options available if you want to emphasize your text:

• None

• Wavy underline

• Solid background

Typography: These settings allow you to choose a typography preset to control the heading size, and select between Text or Subtext color options to match your design.

Padding: Adjust the spacing around the heading:

• Top padding

• Bottom padding

• Mobile scale

Animation: Select an entrance animation for the heading, or choose none if you prefer no animation.

Text

The text lets you add a short description to your Collection banner, and you can also adjust the typography, padding, and animation for the short text.

Add an Image banner to your Collection using Metafields

Step 1: Create product metafield definitions

You can add collection banner for desktop and mobile view separately by setting up two metafield definitions for Collections.

1. Go to Shopify Settings > Custom data > Collections

2. Select Add definition

1. Create 2 new metafield definitions:

   • Namespace and key:

     • For desktop banner: foxtheme.collection_banner

     • For mobile banner: foxtheme.collection_banner_mobile

   • Type: File (Image)

1. Save the metafield definition.

Add metafield value for collections

Once you have created the metafield definitions, go to Products > Collections > select the collection you want to add collection banner to.

In the Metafields section, select an image to be featured and there you have it 🎉