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

**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
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Image banner**. The section comes with a Subheading, Heading, Description, Countdown timer, and Buttons block.
3. Under **Image**, select a **Background image**.
4. Optional: select a **Mobile background image (optional)**. If you don't add one, mobile shows the background image.
5. Under **General**, choose a **Color scheme** and drag **Overlay opacity** until the text is easy to read.
6. 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
1. In the left sidebar, under **Image banner**, click **Add block** and choose **Subheading**, **Heading**, **Description**, **Countdown timer**, or **Buttons**.
2. Enter the text for each block. For a **Heading**, choose a **Text size**.
3. 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.
4. Drag the blocks in the sidebar to change the order they appear in on the banner.
5. 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.

1. Click the **Countdown timer** block. If the section doesn't have one, click **Add block** > **Countdown timer**.
2. Enter the **End date** in the format YYYY-MM-DD, for example 2026-12-31.
3. Optional: enter an **End time (optional)** in 24-hour format HH:MM, for example 18:30.
4. Choose whether to **Hide the countdown when it ends**.
5. Optional: enter an **End text**, such as "This sale has ended".
6. 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
1. Click the **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. Choose a **Section height on mobile** and a **Content position on mobile**.
4. 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](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/ib2_8o5qlm.png)


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

## Related articles
- [Electro Slideshow](https://help.ecomx.co/en/article/electro-how-to-use-electro-slideshow-1k0sydt/)
- [Electro Moving image banner](https://help.ecomx.co/en/article/electro-how-to-use-electro-moving-image-banner-1xxmm8e/)
- [Electro Video banner](https://help.ecomx.co/en/article/electro-how-to-use-electro-video-banner-1uqofi1/)
- [Electro Countdown timer](https://help.ecomx.co/en/article/electro-countdown-timer-7xh0wl/)
- [Electro Theme settings](https://help.ecomx.co/en/article/electro-theme-settings-2ubwqk/)