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

# Blum Icon With Text

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

The **Icon with text** section shows a row of icons, each with a short heading and description. Use it to highlight your store's benefits, such as free shipping, easy returns, or secure payment.

> **Note:** You can add this section to any template, but not to the header or footer. The section comes with 4 **Icon with text item** blocks.
![Icon with text section with 4 items](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/icon-1_1bfi807.png)

**What you can do**
- Add the section and your items
- Choose an icon for each item
- Choose the layout
- Add a button
- See what customers see
- Look up every setting
- Fix common problems

---

## Add the section and your items

1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Icon with text**.
3. Under **General**, enter a **Section subheading**, a **Section heading**, and a **Section description**. Leave a field empty to hide it.
4. Click an **Icon with text item** block.
5. Under **Text**, enter a **Heading** and a **Description**.
6. To add more items, click **Add block** > **Icon with text item**.
7. Click **Save**.

> **Tip:** Keep headings to 2 to 4 words and descriptions to one short sentence. Customers scan this section quickly.

## Choose an icon for each item

1. Click an **Icon with text item** block.
2. Under **Icon**, select an **Icon source**:
   - **Theme library**: pick an icon from the **Theme library** list.
   - **Custom image**: select a **Custom image**. Use a square image for the best result.
   - **Custom SVG**: paste your SVG code in **Custom SVG**.
3. Click **Save**.

To color the icons, click the section and select an **Accent scheme** under **Icon item**: **Main**, **Extra**, or **None**.

## Choose the layout

1. Click the **Icon with text** section.
2. Under **Layout**, select a **Content alignment**: **Left**, **Center**, or **Diagonal**.
3. Select **Items per row on desktop**: 3, 4, 5, or 6. This setting doesn't apply to **Diagonal**.
4. Optional: check **Enable carousel on mobile** to let customers swipe through the items on phones. Check **Show navigation on mobile** to add arrow buttons.
5. Click **Save**.

## Add a button

1. Click the **Icon with text** section.
2. Under **Button**, enter a **Label**.
3. Add a **Link**.
4. Click **Save**.

To hide the button, clear the **Label** field.

## What customers see

- **Desktop:** the items show in a row, with the number of items per row you set.
- **Diagonal:** on desktop, the section heading and button sit on the left, and the items show 2 per row on the right.
- **Tablet:** 2 items per row.
- **Mobile:** with **Enable carousel on mobile**, customers swipe through the items one by one. Without it, the items stack on top of each other.
- **Button:** shows below the items, or below the heading with **Diagonal**.
![Icon with text carousel on a phone](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/icon-2_83qu4g.png)

## Settings reference

### General

| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the section. You can edit color schemes in Theme settings > Colors. |
| Section subheading | Small text above the heading. Leave it empty to hide it. |
| Section heading | The main heading. Leave it empty to hide it. |
| Section description | Short text below the heading. Leave it empty to hide it. |

### Layout

| Setting | What it does |
| ---- | ---- |
| Items per row on desktop | Sets how many items show in a row on desktop: 3, 4, 5, or 6. Doesn't apply to Diagonal. |
| Content alignment | Sets the layout: Left, Center, or Diagonal. |
| Enable carousel on mobile | Lets customers swipe through the items on phones. |
| Show navigation on mobile | Shows arrow buttons in the mobile carousel. |
| Remove padding top | Removes the space above the section. |
| Remove padding bottom | Removes the space below the section. |

### Icon item

| Setting | What it does |
| ---- | ---- |
| Accent scheme | Colors the icons with the Main or Extra accent color. Select None to keep the text color. |

### Button

| Setting | What it does |
| ---- | ---- |
| Label | The button text. Leave it empty to hide the button. |
| Link | Where the button goes. Appears when the button has a label. |

### Prominent badge

| Setting | What it does |
| ---- | ---- |
| Text | The badge text. Leave it empty to hide the badge. |
| Accent scheme | Colors the badge with the Main or Extra accent colors. Appears when the badge has text. |
| Position | Places the badge on the Left or Right. Appears when the badge has text. |
| Shape | Sets the badge shape: Star, Diamond, or Asterisk. Appears when the badge has text. |

### Icon with text item block settings

| Setting | What it does |
| ---- | ---- |
| Icon source | Selects where the icon comes from: Theme library, Custom image, or Custom SVG. |
| Theme library | Selects an icon from the theme's icon list. Used with Theme library. |
| Custom image | Uses your own image as the icon. Use a square image. Used with Custom image. |
| Custom SVG | Uses your own SVG code as the icon. The SVG is shown at the theme's icon size. Used with Custom SVG. |
| Heading | The heading of the item. |
| Description | The text below the heading. |

## Troubleshooting

**My custom image doesn't show.**
Check that **Icon source** is set to **Custom image**. The other icon fields are ignored unless their source is selected.

**There is no setting for tablets.**
Tablets always show 2 items per row. You can only change the number of items per row on desktop.

**Items per row doesn't change anything.**
**Items per row on desktop** doesn't apply when **Content alignment** is **Diagonal**.

**My SVG icon has the wrong color.**
The **Accent scheme** colors icons that use the current color. If your SVG has fixed colors, edit the SVG code or use **Theme library** icons.

## Related articles

- [Blum What Icons Can Be Used On Blum Theme](https://doc.ecomx.co/en/article/blum-what-icons-can-be-used-on-blum-theme-jnfsrj/)
- [Blum Testimonial](https://doc.ecomx.co/en/article/blum-testimonial-16y9v6e/)
- [Blum Running Text](https://doc.ecomx.co/en/article/blum-running-text-1y2r3d6/)
- [Blum Image With Text Columns Section](https://doc.ecomx.co/en/article/blum-image-with-text-columns-section-131afjd/)