> ## 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 With Text Section

**Theme:** Electro · **Section type:** All-template section

An Image with text section shows an image next to your own text, countdown timer, and buttons. Use it to highlight a product, a collection, an event, or your brand story.

> **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. You can add as many Subheading, Heading, and Description blocks as you need.
![Electro Image with text section with the image on the left and a subheading, heading, description, and button on the right](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/iwt1_lrcco5.png)

**What you can do**
- Add the section and your image
- Add text, a countdown, and buttons
- Change the layout
- Set a separate image for mobile
- See what customers see
- Look up every setting
- Fix common problems

## Add the section and your image
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Image with text**. The section comes with Subheading, Heading, Description, Countdown timer, and Buttons blocks.
3. Under **Image**, select an **Image**.
4. Click **Save**.

> **Tip:** Large screens crop the image to fill its half of the section. Keep the main subject near the center of the image.

## Add text, a countdown, and buttons
1. In the left sidebar, under **Image with text**, click a block to edit it, or click **Add block** and choose **Subheading**, **Heading**, **Description**, **Countdown timer**, or **Buttons**.
2. Drag the blocks to change their order. The text column shows them from top to bottom in the same order.
3. In the **Countdown timer** block, enter an **End date** and an optional **End time**.
4. In the **Buttons** block, enter a **Label** and a **Link** for each button you want. Leave a **Label** empty to hide that button.
5. Click **Save**.

For all countdown options, see Electro Countdown timer.

> **Note:** The Countdown timer block also has **Button** settings (**Label**, **Style**, **Link**), but the section doesn't show a button inside the countdown. To add buttons, use the **Buttons** block.

## Change the layout
1. Click the **Image with text** section.
2. Under **General**, choose a **Color scheme** and the **Content ordering on large screen**: Text first or Image first.
3. Under **Image**, choose the **Image height on large screen**.
4. Click **Save**.

## Set a separate image for mobile
1. Click the **Image with text** section.
2. Under **Image**, select a **Mobile image (optional)**. A 750 x 1100 px .jpg works well.
3. Choose a **Mobile image ratio**.
4. Click **Save**.

If you don't add a mobile image, phones show the main image in the mobile image ratio you chose.

## What customers see
- **Large screens:** the image and the text sit side by side, in the order you chose. The blocks fade in one after another as the section scrolls into view.
- **Phones and tablets:** the text shows first and the image below it, in the mobile image ratio.
- **Countdown:** the timer shows days, hours, minutes, and seconds. When it ends, it disappears or shows your end text, depending on your settings.
- **Buttons:** clicking a button opens its link. A button without a link looks faded and can't be clicked.
![Electro Image with text on a phone: the text shows first and the image below it](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/iwt2_mwa7l5.png)


## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the background, text, and button colors. |
| Content ordering on large screen | Shows the text first (left) or the image first (left). Phones always show the text first. |

### Image
| Setting | What it does |
| ---- | ---- |
| Image | The main image. |
| Image height on large screen | Sets the section height to 70% screen height or Fill screen height. The section grows if the text is long. |
| Mobile image (optional) | A separate image for phones. A 750 x 1100 px .jpg is recommended. |
| Mobile image ratio | Sets the image shape on phones: Square, Portrait (3:4), Landscape (4:3), or Adapt to image. |

### Subheading block settings
| Setting | What it does |
| ---- | ---- |
| Text | A short tagline. |

### Heading block settings
| Setting | What it does |
| ---- | ---- |
| Text | The heading. |
| Text size | Sets the heading size: Headline, or H1 to H6. |

### Description block settings
| Setting | What it does |
| ---- | ---- |
| Text | Body text. Supports bold, italic, and links. |

### Countdown timer block settings
| Setting | What it does |
| ---- | ---- |
| Hide the countdown when it ends | Removes the timer after the end date and time. |
| End date | The day the countdown ends, in the format YYYY-MM-DD. If it's empty, the countdown ends at midnight tonight. |
| End time (optional) | The time the countdown ends, in the format HH:MM (24-hour clock). |
| End text | A message that shows when the countdown ends. Leave it empty to show nothing. |
| Label, Style, Link (under Button) | These fields don't show a button on the storefront. Use the Buttons block instead. |
| Countdown background | Sets the background color of the timer. |
| Countdown number | Sets the color of the numbers. |
| End text (under Custom color) | Sets the color of the end message. |

### Buttons block settings
| Setting | What it does |
| ---- | ---- |
| Label | The button text, for Button 1 and Button 2. Leave it empty to hide that button. |
| Style | Sets each button to Primary, Secondary, or Tertiary. |
| Link | The page the button opens. |

## Troubleshooting
**The button I added in the Countdown timer block doesn't show.**
The section doesn't display the countdown's button fields. Add your button in the **Buttons** block.

**The image is cut off on large screens.**
The image fills its half of the section at the height you chose. Try a different **Image height on large screen**, or use an image with the subject in the center.

**Phones show the image in the wrong shape.**
Change **Mobile image ratio** under **Image**. Choose **Adapt to image** to keep the original shape.

**A button looks faded and can't be clicked.**
The button has no link. Add a **Link** in the **Buttons** block.

**The countdown disappeared.**
The end date and time have passed and **Hide the countdown when it ends** is on. Set a new **End date**, or turn the setting off and add an **End text**.

## Related articles
- [Electro Image with text columns](https://help.ecomx.co/en/article/electro-how-to-use-electro-image-with-text-columns-section-s1z5a/)
- [Electro Video with text](https://help.ecomx.co/en/article/electro-how-to-use-electro-video-with-text-section-10nei9v/)
- [Electro Image banner](https://help.ecomx.co/en/article/electro-how-to-use-electro-image-banner-section-mxjav/)
- [Electro Countdown timer](https://help.ecomx.co/en/article/electro-countdown-timer-7xh0wl/)
- [Electro Typography](https://help.ecomx.co/en/article/electro-typography-17a6dzk/)