Image banner

The image banner has similar design and settings to the Collection banner section. 

Below are the settings and blocks available for this section.

Settings

First section

When this section is the first one at the top of the page, make sure this box is checked. It helps with SEO and page performance in the following technical ways:

• It will load the image as loading="eager" instead of loading="lazy"
• It will remove the fade in image animation if it is active in Style/Theme settings so that the image loads onto the page

Add space above or below

Depending on the sections that are above or below this section, you may want to add some extra space for a more pleasing layout.

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.

Image

If you'd like to use an image here that is different than the collection image, you can designate that here. 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.

Text box settings

Show text box

Uncheck this box if you do not want to show any text on the banner and would prefer it to just be an image.

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. You can add a 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. 

Font color contrast

If there is a button block in the image banner, the button will be the font color chosen above, and the text in the button will be this color, so make sure it has a high enough contrast against the font color.

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. 

Borders

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

Blocks

Heading

Heading will automatically be in the heading font chosen in Typography/Theme settings.

Heading

The text for the block.

Heading size

Select the size of the text for the heading.

Subheading

Subheading will automatically be the body font chosen in Typography/Theme settings, in all caps and bold.

Subheading

The text for the block.

Subheading size

Select the size of the text for the heading.

Text

Text will be the body font chosen in Typography/Theme settings.

Text

The text for the block.

Text size

Select the size of the text.

Make text bold

Check this box to make the text bold, which can be helpful for legibility on a transparent background.

Buttons

Buttons will be automatically colored based on the color scheme chosen as the text box background. The following applies to both Button 1 & Button 2.

Button label

The text for the button. To hide either of the buttons, leave the label for that button blank. 

Button link

Add a link to the page you want the button to lead to. If it's a page outside of the store, make sure it's the full URL with "https://".