Electro How to Use Electro Image Banner Section

Theme: Electro · Section type: All-template section

An Image banner shows one large background image with text, an optional countdown timer, and up to 2 buttons on top. Use it to introduce a collection, a campaign, or a limited-time offer.

Note: You can add this section to any template, but not to the header or footer. Each section holds 1 Countdown timer block and 1 Buttons block.

Image banner with subheading, heading, description, and button on the Electro Gizmo preset

What you can do

Add the section and your background image
Add and arrange the text and buttons
Add a countdown timer for a limited-time offer
Set the banner height and content position
See what customers see
Look up every setting
Fix common problems

Add the section and your background image

In the theme editor, open the template where you want the section.
In the left sidebar, click Add section > Image banner. The section comes with a Subheading, Heading, Description, Countdown timer, and Buttons block.
Under Image, select a Background image.
Optional: select a Mobile background image (optional). If you don't add one, mobile shows the background image.
Under General, choose a Color scheme and drag Overlay opacity until the text is easy to read.
Click Save.

Tip: Use a landscape image of about 1600 x 800 px for large screens and a portrait image of about 750 x 1100 px for mobile. Keep the main subject away from the area where the text sits.

Add and arrange the text and buttons

In the left sidebar, under Image banner, click Add block and choose Subheading, Heading, Description, Countdown timer, or Buttons.
Enter the text for each block. For a Heading, choose a Text size.
In the Buttons block, enter a Label, choose a Style, and add a Link for each button. Leave a label empty to hide that button.
Drag the blocks in the sidebar to change the order they appear in on the banner.
Click Save.

Tip: Always add a link to each button. A button without a link doesn't take customers anywhere.

Add a countdown timer for a limited-time offer

The Countdown timer block counts down days, hours, minutes, and seconds to the end of your offer.

Click the Countdown timer block. If the section doesn't have one, click Add block > Countdown timer.
Enter the End date in the format YYYY-MM-DD, for example 2026-12-31.
Optional: enter an End time (optional) in 24-hour format HH:MM, for example 18:30.
Choose whether to Hide the countdown when it ends.
Optional: enter an End text, such as "This sale has ended".
Click Save.

Setting	What it does
Hide the countdown when it ends	Hides the timer numbers after the end date and time.
End date	Sets the day the countdown ends, in the format YYYY-MM-DD. If you leave it empty, the countdown ends at midnight tonight.
End time (optional)	Sets the time the countdown ends, in 24-hour format HH:MM. If you leave it empty, it ends at 23:59.
End text	Shows a message when the countdown ends. Leave it empty to show no message.

Note: The countdown uses your store's time zone. There is no start date: the timer always shows the time left until the end date and time.

Set the banner height and content position

Click the Image banner section.
Under Layout, choose a Section height on large screen and a Content position on large screen.
Switch to the mobile preview. Choose a Section height on mobile and a Content position on mobile.
Click Save.

Tip: Choose Adapt to image to show the whole image without cropping. If the text needs more room than the height you choose, the section grows to fit it.

What customers see

Large screens: the background image fills the banner, with the text, countdown, and buttons at the content position you chose. The image zooms out gently and the content fades in when the banner scrolls into view.
Mobile: the banner shows the mobile background image, or the main image if you didn't add one, with its own height and content position.
Countdown: the numbers update every second. When the countdown ends, the numbers are hidden (if Hide the countdown when it ends is on) and the end text appears.
Buttons: clicking a button opens its link.

Image banner on mobile, with content centered on the Electro Gizmo preset

Settings reference

General

Setting	What it does
Color scheme	Sets the colors of the text and buttons.
Overlay opacity	Darkens the image so the text is easier to read, from 0 % (no overlay) to 90 %.
Custom mask overlay	Replaces the overlay color with a color you choose.
Custom text overlay	Replaces the text color on the banner with a color you choose.

Layout

Setting	What it does
Section height on large screen	Sets the banner height on large screens: Adapt to content, 50% screen height, 70% screen height, Fill screen height, or Adapt to image.
Content position on large screen	Places the content at Top left, Top center, Middle left, Middle center, Bottom left, or Bottom center.
Section height on mobile	Sets the banner height on mobile, with the same options as on large screens.
Content position on mobile	Places the content on mobile, with the same options as on large screens.

Image

Setting	What it does
Background image	The main banner image. 1600 x 800 px is recommended.
Mobile background image (optional)	A separate image for mobile. 750 x 1100 px is recommended. If empty, mobile shows the background image.

Block settings

Setting	What it does
Subheading > Text	A short tagline shown in small capital letters.
Heading > Text	The banner heading.
Heading > Text size	Sets the heading size: Headline, H1, H2, or H3.
Description > Text	A paragraph of text below the heading.
Countdown timer	See "Add a countdown timer for a limited-time offer" above.
Countdown timer > Countdown background	Sets the background color behind the timer numbers.
Countdown timer > Countdown number	Sets the color of the timer numbers.
Countdown timer > End text	Sets the color of the end text.
Buttons > Label	The text on the button. Leave it empty to hide the button. Each block has Button 1 and Button 2.
Buttons > Style	Sets the button style: Primary, Secondary, or Tertiary.
Buttons > Link	The page the button opens.

Troubleshooting

The countdown shows 00 or disappeared right away.
The end date and time are in the past, or the date isn't in the format YYYY-MM-DD. Check End date and End time (optional) in the Countdown timer block.

I can't add a second countdown or a third button.
Each Image banner holds 1 Countdown timer block and 1 Buttons block with up to 2 buttons. To show more, add another Image banner section.

The image is cropped on mobile.
Add a Mobile background image (optional) in portrait format, or set Section height on mobile to Adapt to image.

The text is hard to read on the image.
Increase Overlay opacity, or set a Custom mask overlay and Custom text overlay with more contrast.

Updated on: 30/10/2026

Was this article helpful?

Thank you!