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

Image (desktop & mobile)

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

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.

You can set a focal point for the image that will always keep that portion of the photo in view. For example, if you are using an image with people, put the focal point over their face so that their faces are always in view. Sometimes you might see a message in the theme editor that says the theme does not support focal points, this is not true. This message is a bug within the Shopify editor, the theme does fully support focal points whenever they are available.

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

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.

Adjust top of text box position (desktop)

Whisk 6.2.0 and above

Nudge the text box position up or down by percentage points of the height of the banner to refine it's location.

Text box max width (desktop)

Whisk 6.0.0 and above

Adjust the width of text box in percentage of the width of the screen.

Text alignment (desktop or mobile)

Choose left, center, or right text alignment.

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. The transparent background will only display on desktop. On mobile, the overlay will be removed and the text will move underneath the image and display in the default color scheme.

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.

Overlay opacity

The percentage of transparency that you want the overlay to have. 0% = completely transparent. 100% = completely opaque.

Borders

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

Section spacing

(Whisk 5.0.0 and above)

Adjust top and bottom padding within the section.

Add space above or below

(Whisk 4.3.1 and 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.

Blocks

Heading

Heading font style will be 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 font style will be the accent font chosen in Typography/Theme settings.

Subheading

The text for the block.

Subheading size

Select the size of the text for the heading.

Make text bold

Check this box to make the subheading text bold.

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://".

Image

Image

Upload the image you want to use in the block.

Image max width

This will be the width of the image in px unless it's too wide to fit the screen, then it will default to full width and scale with the screen size so it's never cut off.

Image text

If your image includes imbedded text, add that text here so that it can be picked up by screen readers for accessibility, and by Google for better search results.

Make image text h2 heading

If your image has text and is being used as the title for the section, check this box. This also benefit s accessibility and SEO.

Link

Link text

The text label for the link.

Link URL

The url that the link will go to.