Image Banner

The Image banner is a basic type of banner in an online store.

The banner image is typically a large, prominent image that appears at the top of your online store’s homepage. It serves as a visual introduction to your store and can be used to highlight products, promotions, or convey your brand message. You can usually customize this image to suit your store’s branding and marketing needs.

How To Access The Banner Image Section?

Step 1: Go to Online Store > Themes > click on Customize

Step 2: Click on Add Section block > search for Image Banner on the search bar and hit Image Banner

Step 3: Click on Image Banner block or each content block to edit the content

Image Banner Configuration

This section has 3 tabs in the Settings toolbar: General, Layout and Image.

To access the section configuration, please follow these steps:

Step 1: Click on the Image Banner section

Step 2: There will be all of the parameters of General, Layout and Image for you to modify.

General

The overlay opacity is a setting that allows you to control the level of transparency or “opacity” of a color or pattern overlay that can be placed on top of the background image. This overlay is often used to make the text or content on top of the image more legible by darkening or tinting the background image.

Whether you should use overlay opacity or not depends on your design preferences and the readability of the text or content over the background image. It can be particularly useful if your background image has a lot of details or colors that make it hard for text to stand out.

The range for adjusting the overlay opacity typically allows you to set it anywhere between 0% (completely transparent) and 90% (almost fully opaque).

To adjust the Overlay opacity, slide the percentage bar in the Overlay settings to the desired opacity.

 

If you want to change the color scheme, you can switch to a different color scheme. This color scheme is set up in the theme settings.

Next, you can activate the large heading feature. If you activate this feature, all headings in the image banner will have the font size of the headline.

Layout

The section has 3 options to show based on your need, which is reflected in the Height dropdown selector:

• 70% screen height

• 100% screen height

• Adapt to image: The section will adapt its height to the height of the background image

By default, the banner section will be set at 70% screen height for highest quality.

Please note that this height will always set to 100% on mobile.

Image

You can change the background image and mobile background image individually, by clicking on the “Select image” button. This will open the media manager, where you can drag and drop your image, or choose it if it is already uploaded.

If you choose a background image for the large screen but don’t add one for the mobile screen, the mobile view will automatically use the large screen’s image. However, if you select a background image only for the mobile screen, the large screen won’t adopt the mobile screen’s image.

Please note that it is advisable to use dimensions of 1600 x 800 pixels for desktop and 750 x 1100 pixels for mobile devices.

Content Block configuration

Before going to settings for the text and button of the Image Banner, you can choose to display the position of the whole content block:

Text

To change the content for the text, you just need to type down the Heading, subheadings and description into the text boxes.

Button

You can change the name of the button and direct each button with an URL.

If you want to hide the button, just leave the Button Label blank.