Collection banner

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

#How to add a Collection banner section

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

• 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

1. Go to Shopify Settings > Custom data > Collections
2. Select Add definition

3. Create 2 new metafield definitions:
   • Namespace and key:
     • For desktop banner: foxtheme.collection_banner
     • For mobile banner: foxtheme.collection_banner_mobile
   • Type: File (Image)

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