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.
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
- In the theme editor, open the template where you want the section.
- In the left sidebar, click Add section > Image with text. The section comes with Subheading, Heading, Description, Countdown timer, and Buttons blocks.
- Under Image, select an Image.
- 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
- 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.
- Drag the blocks to change their order. The text column shows them from top to bottom in the same order.
- In the Countdown timer block, enter an End date and an optional End time.
- In the Buttons block, enter a Label and a Link for each button you want. Leave a Label empty to hide that button.
- 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
- Click the Image with text section.
- Under General, choose a Color scheme and the Content ordering on large screen: Text first or Image first.
- Under Image, choose the Image height on large screen.
- Click Save.
Set a separate image for mobile
- Click the Image with text section.
- Under Image, select a Mobile image (optional). A 750 x 1100 px .jpg works well.
- Choose a Mobile image ratio.
- 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.
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
- Electro Video with text
- Electro Image banner
- Electro Countdown timer
- Electro Typography
Updated on: 30/10/2026
Thank you!