Collection banner

coThe collection banner is the first section on the Default collection template. It has similar design and settings to the Image banner section. Here's the settings available for this section.

Show collection image

When this box is checked, an image will show if there is a designated image on the collection. 

An example of a collection banner with an image:

If the collection does not have a designated image or if this box is unchecked, the banner will look like this:

Image settings

The following options are available for both desktop and mobile so you can use separate images for both cases if you want to. If there is no specific mobile image selected and there is a desktop image, then the desktop image will used on mobile as well.

Custom image

If you'd like to use an image here that is different than the collection image, you can designate that here. We'd recommend creating a banner image metafield on collections and then connect to the metafield dynamically by clicking on the 3 oval icon in the upper left of the image input. Recommended size for this image is at least 2500px wide on desktop and 1000px on mobile and either a landscape or wide aspect ratio (e.g. 4:3 or 16:9). The image will automatically crop itself to be the full width of the screen, and the height that you specify in the next field, so it's good to pick and image that can still look good when it's a bit cropped.

Banner height

Chose a percentage height on this range slider for how much of the screen that you want the image to take up in the browser window.

Image focal point

Choose where you want to focus of the image to be when it gets cropped.

Text box settings

Show breadcrumbs

Check this box to show breadcrumbs above the Collection title. The breadcrumbs will show the collection title and a link to "Home".

Show collection description

Check this box if you want to show the collection description in the text box, if a collection description exists for the collection.

Collection title size

Choose the size you'd like the collection title to be. This title will display in the Heading font.

Description text size

Choose the size you'd like the description text to be. 

Make description text bold

Check this box to make the text bold which can help make it easier to read, especially if it's on a transparent background.

Text animation

See the documentation for text animations for more details.

Text box position

Choose where you want the text box to be positioned over the image on desktop. It will automatically be positioned at the bottom and full screen width on mobile.

Text box color scheme

Choose from one of the theme's color schemes, or chose "Transparent background" to have the text lay on top of the image directly without a background. If you choose this setting, make sure that all of your images on all of your collections. You can add an tinted overlay and select a font color in the Transparent text box settings section to help with this.

Example of a text box with a transparent background.

Solid text box options

These do not apply if "Transparent background" is chosen for the Text box color scheme.

Text box shape

The box can be a rectangle, or have an arch shape on one side.

Text box overlap size (mobile)

You can adjust in px how much the text box overlaps the image above it, or if you want it to overlap at all.

Transparent text box options

These only apply if "Transparent background" is chosen for the Text box color scheme.

Font color

Choose a color for all of the text that will sit on top of the image. You could connect to a collection metafield dynamically to allow for different colors on different collections.

Tinted overlay

Check this box if you want to add a slightly transparent overlay on top of the image. This can help make the text more easily readable. 

Overlay color

Choose a color for the overlay that will sit on top of the image. You could connect to a collection metafield dynamically to allow for different colors on different collections.

Overlay opacity

Select the percentage of transparency you want to apply to the overlay color. A higher number is a more opaque/solid color.


See our documentation on Border shapes to learn more about how to use the settings in this section.

Still need help? Contact Us Contact Us