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.