Electro How to Edit Electro Icon With Text
Theme: Electro · Section type: All-template section
The Icon with text section shows a row of short items, each with an icon, a heading, and a description. Use it to highlight store benefits such as free shipping, support, or secure payment, or to sum up product features.
Note: You can add this section to any template and to the footer, but not to the header.
What you can do
- Add the section and your items
- Choose the icons
- Arrange the items on large screens and on mobile
- Add a button
- See what customers see
- Change the section settings
- Fix common problems
Add the section and your items
- In the theme editor, open the template where you want the section. To show it on every page, add it to the footer area instead.
- In the left sidebar, click Add section > Icon with text. The section comes with 4 items.
- Under General, enter a Section subheading, a Section heading, and a Section description, or leave them empty.
- Click an Icon with text item block. Under Text, enter a Heading and a Description.
- Optional: add a Link. The whole item becomes clickable.
- To add more items, click Add block > Icon with text item.
- Click Save.
Tip: Keep each description to one short sentence, so the items line up evenly in a row.
Choose the icons
- Click an Icon with text item block.
- Under Icon, choose an Icon source: Theme library, Custom image, or Custom SVG.
- Pick an icon from the Theme library list, select a Custom image (a square image works best), or paste your Custom SVG code.
- Optional: choose a Custom color icon. This is available for Theme library and Custom SVG icons.
- Click Save.
To set the size of all icons, open the section and change Icon size under Layout.
Tip: For a custom SVG icon to take the custom color, the SVG should use fill="currentColor" instead of a fixed color.
Arrange the items on large screens and on mobile
- Click the Icon with text section.
- Under Layout, choose how many Items per row on large screen you want, from 3 to 8, and how many Items per row on mobile, from 1 to 3.
- Choose the Content alignment (Left or Center) and the Icon position (Top or Left of the text).
- Optional: select Show divider to add a line above and below the items.
- Click Save.
Add a button
- Click the Icon with text section.
- Under Button, enter a Label and a Link.
- Choose a Button position: Below content or Next to heading.
- Choose a Style: Primary, Secondary, or Tertiary.
- Click Save.
The button is hidden when the Label is empty.
What customers see
- Large screens: the items appear in one row, or in several rows if there are more items than Items per row on large screen. Each item shows its icon, heading, and description.
- Tablets: the items appear 2 per row, or 3 per row when Items per row on mobile is 3.
- Phones: the items appear 1, 2, or 3 per row, based on Items per row on mobile. Icons are shown at up to 36 px on screens narrower than 1025 px.
- Linked items: when an item has a link, customers can click anywhere on the item to open it.
- Scrolling: the items fade in one after another as customers scroll to the section.
Settings reference
General
Setting | What it does |
|---|---|
Color scheme | Sets the background and text colors of the section. You edit color schemes in Theme settings > Colors. |
Section subheading | Shows a short line above the section heading. |
Section heading | Sets the main heading of the section. |
Heading size | Sets the heading size, from H2 to H5. |
Section description | Shows text below the heading. |
Layout
Setting | What it does |
|---|---|
Items per row on large screen | Sets how many items appear in a row on large screens, from 3 to 8. |
Items per row on mobile | Sets how many items appear in a row on phones, from 1 to 3. |
Content alignment | Aligns the heading and items to the Left or Center. |
Icon position | Places the icon above the text (Top) or beside it (Left). |
Icon size | Sets the icon size on large screens, from 16 to 100 px. |
Show divider | Adds a line above and below the items. |
Padding
Setting | What it does |
|---|---|
Custom padding | Replaces the theme's default section spacing with your own padding values. |
Top, Bottom, Left, Right | Sets the space inside the section edges, from 0 to 100 px. Appears when Custom padding is on. |
Enable padding mobile | Lets you set separate padding for phones. Appears when Custom padding is on. |
Top (mobile), Bottom (mobile), Left (mobile), Right (mobile) | Sets the padding on phones, from 0 to 100 px. Appears when Custom padding and Enable padding mobile are on. |
Button
Setting | What it does |
|---|---|
Label | Sets the button text. The button is hidden if this is empty. |
Link | Sets the page the button opens. |
Button position | Shows the button below the items (Below content) or beside the section heading (Next to heading). |
Style | Sets the button style: Primary, Secondary, or Tertiary. |
Icon with text item settings
Setting | What it does |
|---|---|
Icon source | Chooses where the icon comes from: Theme library, Custom image, or Custom SVG. |
Theme library | Chooses an icon from the theme's icon set. Appears with Theme library. |
Custom image | Uses your own image as the icon. A square image works best. Appears with Custom image. |
Custom SVG | Uses your own SVG code as the icon, shown at the Icon size. Appears with Custom SVG. |
Custom color icon | Sets the icon color. If you don't choose a color, the icon uses the text color. Appears with Theme library and Custom SVG. |
Heading | Sets the item heading. |
Description | Sets the item text. Supports bold, italic, and links. |
Link | Makes the whole item clickable and opens this page. |
Troubleshooting
My icons look smaller on mobile than in the editor.
On screens narrower than 1025 px, icons are shown at up to 36 px, even if Icon size is larger. Check the size in the mobile preview.
The custom color doesn't change my icon.
Custom color icon doesn't apply to Custom image icons. For a Custom SVG icon, the SVG code must use fill="currentColor" or stroke="currentColor".
The button doesn't show.
Enter a Label under Button. The button is hidden when the label is empty.
I can't add the section to the header.
Icon with text can't be used in the header. You can add it to any template or to the footer.
Related articles
- Electro What icons can you use on Electro theme
- Electro How to Use Electro Footer Section
- Electro How to Use Electro Image With Text Columns Section
- Electro How to Use Electro Text Section
- Electro Theme Settings
Updated on: 30/10/2026
Thank you!