Collection banner
The 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.
Settings
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
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
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.
Borders
See our documentation on Border shapes and Color underneath sections for details on how to style these.