Versions 1.0.0-1.7.3
How to find these settings...
- Online Store
- Customize (Theme Editor)
- Visit a collection page
- Collection pages
- BANNER
If a collection has a featured image, it will be displayed in the Banner area at the top of the page.
Recommended reading
Show collection image
If a collection image is available, you can choose to display it. If an image is not available, you can set the Background Color below. The background image dimensions depend on 2 options:
- Whether full width or container width. Refer to 'Full width' below
- The height will depend on your 'Height' settings below
Image position
Set the focus of the image to ensure consistency regardless of the height setting, content height or screen width
Text over image
The collection title may be displayed over the image & background color or below the image, pagination, breadcrumbs, & sorting options. If there is no image available, the background color will be displayed. Unchecking this option turns off the image & the background color.
White text
When an image is chosen, you can uncheck this setting if you want the overlaid text to be the default color
Full width
The banner image and background color have the option of being as wide as the screen or only as wide as the content container. Refer to the following table to reference content widths & optimal image sizing:
| Setting | Desktop Width | Minimum Image Width |
|---|---|---|
| Full width checked | 100% | 1900px |
| Full width unchecked | 1200px | 1200px |
Height
The overall height of the banner in relation to the height of the screen. 5% is the minimum, and it steps up by 5 to a maximum of 100%. A background image must be chosen
Overlay
A color may be applied to background images to help the text clarity
Opacity
When an 'Overlay' color has been selected, control the opacity with the slider. 0% is the minimum, and it steps up by 5 to a maximum of 100%
Background color
If an image is not used as a background, you can choose between None, Primary & Secondary. The Primary & Secondary colors are set in the Theme Settings Color section