Product Pages Banner

How to find these settings...

1. Online Store
2. Customize (Theme Editor)
3. Visit a product page
4. Sections
5. Product pages
6. BANNER

---

Banner images are set in the product admin. Upload your banner image and edit the alt text to include the product title and the word Background. Example, if your product is titled Basic T-Shirt, you would add Basic T-Shirt Background to the alt input. This image will not appear in your thumbnail list.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

Recommended reading

• Products

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

3 settings are available to use a color instead of an image. The Primary & Secondary colors are set in the Theme Settings Color section