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