Image Banner
The Image Banner is a basic type of banner in an online store. It has 5 tabs in the Settings toolbar: General, Layout, Image, and Prominent Badge.
In the General tab, you can choose to turn on Enable Large Heading. When this is turned on, the heading in the banner will have the headline’s font size.
You can also select the Overlay Opacity for the banner. The Overlay Opacity can be adjusted from 0% to 90%.
In the Layout tab, the section has 3 options to show 70%, full screen height or the original height of the image based on your need, which is reflected in the Height dropdown selector. By default, the banner section will be set at 70% screen height for highest quality.
For mobile devices, the height will always set to 100%.
The Image tab supports 2 ways of background images: Background image (for all devices screen size) and Mobile Background image (for mobile only).
By setting these 2 background images, the Image banner section will have the best look even on Mobile devices. The recommended size for Background image is 1600x800px and 750x1100px for Mobile Background image. You can set background images separately for large screens and mobile. If you set the background image for the large screen and don’t upload the image for mobile screen, the mobile view will automatically inherit the image of the large screen. If you set the background image only for the mobile screen, the large screen will not inherit the image of the mobile screen.
The settings for Prominent Badge in the Image Banner section is the same as in the Hero Image with Text section.
Along with the settings of the Image banner section, this section also supports settings for Content that overlay the background image as the Slideshow section. The Image banner section has 1 content block only.
Click on the Content block of the Image Banner section to adjust the setting for the block. The setting of the content block is similar to the setting of the Slideshow section’s item which contains text and buttons set up.
For Content block, you can change the Content position in the dropdown selector. There are 3 types:
-
Center:
- Left Center:
- Left bottom:
