Image banner

The Image banner section displays a striking full-width image with customizable text, buttons, and an optional countdown timer.

This section is ideal for creating high-impact visuals that promote key products, highlight offers, or showcase new collections. It offers full control over layout, styling, and mobile responsiveness, ensuring a seamless experience for your visitors across devices.

1, How to add section in theme editor:

1

In your theme editor (Customize), scroll to the bottom of the template and select Add section.

2

In the list, locate and select Image banner section. The section will now be added to your page, ready for customization.

2, Section settings:

Click on the Image banner section to open the section settings

• Image: Add an image for the desktop view. This image will display as the main background for the banner section. Recommended dimensions: 1920 x 1080px to ensure high resolution across larger screens.

• Mobile image: Upload a separate image specifically for mobile view to optimize visuals on smaller screens. If a mobile image isn’t uploaded, the desktop image will automatically be used for mobile as well. Recommended dimensions: 1000 x 500px for better fit on mobile devices.

• Image link: Assign a URL link to the image banner. When a visitor clicks on any part of the image, they’ll be directed to the specified URL.

Note: If buttons are added to the banner, the image link will be disabled to prevent conflicts between clickable elements.

• Image overlay opacity: Control the transparency of a color overlay on the image, adjustable from 0% to 100%. Increasing opacity can help improve text readability on the banner by darkening the image slightly. Select an overlay effect to style the image banner:

Gradient from bottom

Applies a gradient starting from the bottom of the image.

Gradient from top

Full image darken

• Desktop banner height: Customize the height of the banner image on desktop displays: Small, Medium, or Large adjust the image height in increments. With Full screen: Expands the image to fill the entire height of the screen. And Adapt to image size option keeps the original image dimensions.

• Desktop content position: Position the content (text, buttons, etc.) on the image banner.

Middle left

Middle center

Middle right

• Desktop content width: Control the maximum width of the content blocks within the mage. Options include Small, Medium, and Large. This setting will automatically adjust for optimal display on mobile devices.

• Animations setting: lets you customize the scrolling behavior of the banner image:

  • None: The image scrolls along with the rest of the page content.

  • Fixed background position: Keeps the image fixed in place as the page scrolls, creating a parallax effect.

• Mobile layout setting: optimize the banner section for mobile devices:

  • Mobile banner height: Adjust the banner height specifically for mobile devices. Choose from Small, Medium, Large, or Fullscreen for varying levels of image height. And Adapt to image size uses the original dimensions of the image on mobile.

  • Show text below image: When enabled, all content blocks (text, buttons, countdown timer) will appear below the banner image on mobile devices. If unchecked, content displays over the image.

3, Block settings:

a. Heading block

• Enter a heading with rich text.

• Heading size: Select from Small, Medium, Large, Extra large, or Extra extra large to fit your banner.

• Highlight style: Apply a custom color to highlighted words.

b. Text block: Add a description or supporting text under the heading.

c. Caption block: Add a caption to provide additional context or details. Customize the caption style as Uppercase or Subtitle.

d. Countdown timer block: Add a countdown timer to highlight time-sensitive promotions or launches.

• Specify the end date, end time, and size for the countdown timer.

• Enable "Hide when countdown reaches zero": Automatically hides the timer once it reaches zero.

• Add or remove a border around the countdown timer.

e. Buttons block:

• Enter a label, assign a link, and select a style for each button.

• Choose from available color options to customize the button appearance.

Note: If the button label is left blank, the button will not display.