Electro How to Use Electro Moving Image Banner

Theme: Electro · Section type: All-template section

A Moving image banner scrolls a row of images slowly across the screen, with optional text, a countdown timer, and 2 buttons on top. Use it to show off several products or looks in one eye-catching banner.

Note: You can add this section to any template, but not to the header or footer. Each section holds up to 5 images.

Moving image banner with product images and no text on the Electro Skatewear preset

What you can do

Add the section and your images
Add text and buttons on the banner
Add a countdown timer
Set the banner height, content position, and speed
See what customers see
Look up every setting
Fix common problems

Add the section and your images

In the theme editor, open the template where you want the section.
In the left sidebar, click Add section > Moving image banner. The section comes with 3 Image blocks.
Click an Image block and select a Background image.
To add an image, click Add block > Image. To change the order, drag the blocks in the sidebar.
Click Save.

Tip: Each image keeps its own shape and is scaled to the banner height. Images with a plain or similar background, such as product shots, make the row look like one continuous strip.

Add text and buttons on the banner

Click the Moving image banner section.
Under Text, enter a Subheading, a Heading, and a Description, and choose a Heading size.
Under Buttons, enter a Button 1 label, choose a Button 1 style, and add a Button 1 link. Do the same for Button 2, or leave its label empty to hide it.
Under General, drag Overlay opacity until the text is easy to read.
Click Save.

Tip: If you only want moving images, leave the text and button labels empty and set Overlay opacity to 0 %.

Add a countdown timer

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

Click the Moving image banner section.
Under Countdown timer, turn on Enable 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, and optionally enter an End text.
Click Save.

Setting	What it does
Enable countdown timer	Shows the countdown below the description.
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, content position, and speed

Click the Moving image banner section.
Under Layout, choose a Section height on large screen and a Content position on large screen.
Switch to the mobile preview. Set the mobile height and the Content position on mobile.
Under General, choose a Speed.
Click Save.

Note: In the Layout group, the mobile height setting is labeled Content position on mobile, the same as the setting below it. The first one, with the options 50% screen height, 70% screen height, and Fill screen height, sets the banner height on mobile.

What customers see

All screen sizes: the images move from right to left in a continuous loop. When the last image passes, the row starts again without a gap.
Content: the text, countdown, and buttons stay in place on top of the moving images, at the content position you chose.
Mobile: the banner uses its mobile height and content position. Because each image is scaled to the banner height, fewer images fit on screen at once.
Buttons: clicking a button opens its link.

Moving image banner on mobile, with one image filling the banner height

Settings reference

General

Setting	What it does
Color scheme	Sets the colors of the text and buttons.
Overlay opacity	Darkens the images 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.
Speed	Sets how fast the images move: Slow or Normal.

Layout

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

Text

Setting	What it does
Subheading	A short tagline above the heading.
Heading	The banner heading.
Heading size	Sets the heading size: Headline, H1, H2, or H3.
Description	A paragraph of text below the heading.

Countdown timer and Custom color

Setting	What it does
Enable countdown timer, Hide the countdown when it ends, End date, End time (optional), End text	See "Add a countdown timer" above.
Countdown background	Sets the background color behind the timer numbers.
Countdown number	Sets the color of the timer numbers.
End text	Sets the color of the end text.

Buttons

Setting	What it does
Button 1 label	The text on the first button. Leave it empty to hide the button.
Button 1 style	Sets the button style: Primary, Secondary, or Tertiary.
Button 1 link	The page the first button opens.
Button 2 label, Button 2 style, Button 2 link	The same settings for the second button.

Image settings

Setting	What it does
Background image	One image in the moving row.

Troubleshooting

I can't find the mobile height setting.
It's in the Layout group and is labeled Content position on mobile. Use the first of the two settings with that name, the one with the screen height options.

The countdown doesn't show.
Turn on Enable countdown timer under Countdown timer, and check that the End date is in the future and in the format YYYY-MM-DD.

I can't add another image.
A Moving image banner holds up to 5 images. Remove one, or add a second section.

The images move too fast.
Set Speed to Slow.

Updated on: 30/10/2026

Was this article helpful?

Thank you!