Electro How to Use Electro Image With Text Columns Section

Theme: Electro · Section type: All-template section

An Image with text columns section shows a row of columns, each with an image, a heading, and a short description. Use it to present your brand values, store locations, services, or product benefits side by side.

Note: You can add this section to any template, but not to the header or footer.

Image with text columns with 4 portrait columns on the Electro Skatewear preset

What you can do

Add the section and your columns
Choose the layout and image shape
Add a button
See what customers see
Look up every setting
Fix common problems

Add the section and your columns

In the theme editor, open the template where you want the section.
In the left sidebar, click Add section > Image with text columns. The section comes with 5 columns.
Under General, enter a Section subheading and a Section heading, and choose a Heading size.
Click a Column block. Select an Image, and enter a Heading and a Description.
To add a column, click Add block > Column. To change the order, drag the blocks in the sidebar.
Click Save.

Tip: Use images with a similar subject and lighting in every column, so the row looks consistent.

Choose the layout and image shape

Click the Image with text columns section.
Under Image, choose an Image ratio.
Under Layout, choose the Items per row on large screen and a Content alignment.
If you have more columns than fit in one row, turn on Enable carousel. Optional: turn on Show progress indicator.
Click Save.

Tip: Without the carousel, extra columns wrap to a new row. With the carousel, they stay in one row and customers scroll through them.

Add a button

Click the Image with text columns section.
Under Button, enter a Label and add a Link.
Choose a Button position and a Style.
Click Save.

Setting	What it does
Label	The text on the button. Leave it empty to hide the button.
Link	The page the button opens.
Button position	Shows the button Below content (under the columns) or Next to heading.
Style	Sets the button style: Primary, Secondary, or Tertiary.

What customers see

Large screens: the section heading, then the columns in a row with the number of items per row you chose. Each column shows its image, heading, and description.
Tablets and phones: the columns show 2 per row on tablets and 1 per row on phones.
With the carousel: customers use the arrow buttons on large screens, or swipe on touch screens, to see more columns. The progress indicator shows how far they've scrolled.
Button: clicking the button opens its link. The columns themselves aren't links.

Image with text columns on mobile, showing 1 column per row

Settings reference

General

Setting	What it does
Color scheme	Sets the background, text, and button colors.
Section subheading	A short tagline above the section heading.
Section heading	The heading of the section.
Heading size	Sets the section heading size: H2, H3, H4, or H5.

Image

Setting	What it does
Image ratio	Sets the shape of all column images: Square, Portrait (3:4), Landscape (4:3), or Adapt to image.

Layout

Setting	What it does
Items per row on large screen	Shows 3, 4, or 5 columns per row on large screens.
Enable carousel	Shows the columns in one scrolling row instead of wrapping them.
Show progress indicator	Shows a bar below the carousel that tracks the scroll position. Works only with Enable carousel.
Content alignment	Aligns the section heading and column text Left or Center.

Button

Setting	What it does
Label, Link, Button position, Style	See "Add a button" above.

Column settings

Setting	What it does
Image	The column image.
Heading	The column heading.
Description	A short text below the heading.

Troubleshooting

The progress indicator doesn't show.
It works only with Enable carousel on, and only when there are more columns than fit on screen.

My images have different heights.
Image ratio is set to Adapt to image, so each image keeps its own shape. Choose Square, Portrait (3:4), or Landscape (4:3) to give all images the same shape.

The button doesn't show.
The button is hidden when Label is empty. Enter a label under Button.

I want each column to link to a page.
Columns in this section aren't clickable. To link columns, use Content collage or Icon with text.

Updated on: 30/10/2026

Was this article helpful?

Thank you!