> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/mib1_tqhzjl.png)

**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
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Moving image banner**. The section comes with 3 Image blocks.
3. Click an **Image** block and select a **Background image**.
4. To add an image, click **Add block** > **Image**. To change the order, drag the blocks in the sidebar.
5. 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
1. Click the **Moving image banner** section.
2. Under **Text**, enter a **Subheading**, a **Heading**, and a **Description**, and choose a **Heading size**.
3. 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.
4. Under **General**, drag **Overlay opacity** until the text is easy to read.
5. 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.

1. Click the **Moving image banner** section.
2. Under **Countdown timer**, turn on **Enable countdown timer**.
3. Enter the **End date** in the format YYYY-MM-DD, for example 2026-12-31.
4. Optional: enter an **End time (optional)** in 24-hour format HH:MM, for example 18:30.
5. Choose whether to **Hide the countdown when it ends**, and optionally enter an **End text**.
6. 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
1. Click the **Moving image banner** section.
2. Under **Layout**, choose a **Section height on large screen** and a **Content position on large screen**.
3. Switch to the mobile preview. Set the mobile height and the **Content position on mobile**.
4. Under **General**, choose a **Speed**.
5. 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](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/mib2_4wi1xn.png)


## 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**.

## Related articles
- [Electro Image banner](https://help.ecomx.co/en/article/electro-how-to-use-electro-image-banner-section-mxjav/)
- [Electro Slideshow](https://help.ecomx.co/en/article/electro-how-to-use-electro-slideshow-1k0sydt/)
- [Electro Running text](https://help.ecomx.co/en/article/electro-how-to-use-electro-running-text-section-3457zu/)
- [Electro Countdown timer](https://help.ecomx.co/en/article/electro-countdown-timer-7xh0wl/)