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

# Shine Icon With Text

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

The Icon with text section shows a row of small icons, each with a heading and a short description. Use it for store benefits such as free shipping, easy returns, or secure payment.

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

**What you can do**
- Add the section and your items
- Choose an icon for each item
- Style the items
- Choose the layout on large screens and mobile
- Add a button
- See what customers see
- Change the icon with text settings
- 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. Enter a **Section subheading**, a **Section heading**, and a **Section description**, and choose a **Heading size**.
4. Click an **Icon with text item** block and enter a **Heading** and a **Description**.
5. To add more items, click **Add block** > **Icon with text item**.
6. Click **Save**.

## Choose an icon for each item
1. Click an **Icon with text item** block.
2. Under **Icon**, choose an **Icon source**:
   - **Theme library**: pick an icon from the **Theme library** list, for example Truck, Return, Gift, or Discount.
   - **Image**: select an **Image**. Use a square image.
   - **Custom SVG**: paste the SVG code of your icon into **Custom SVG**. It's shown at the icon size you set for the section.
3. Click **Save**.

> **Tip:** Use the same icon source for all items so the icons look consistent.

## Style the items
1. Click the **Icon with text** section.
2. Under **Icon with text item**, set **Item alignment** to **Left** or **Center**, and choose an **Icon size**: **32px**, **48px**, or **64px**.
3. Optional: select **Enable item background** to put each item on a card with a border, then set the **Background** and **Content** colors.
4. Click **Save**.

## Choose the layout on large screens and mobile
1. Under **Large screen**, set **Section heading position** to **Top left**, **Top center**, or **Inline**.
2. Set **Columns per row** to **3**, **4**, or **5**.
3. Under **Mobile screen**, set **Section heading position** to **Left** or **Center**.
4. Set **List style** to **Grid** or **Carousel**.
5. Click **Save**.

With **Inline**, the section heading takes the first column and the items fill the other columns of the row.

## Add a button
1. Under **Button**, enter a **Label**, choose a **Style**, and add a **Link**.
2. Click **Save**.

The button shows only when the section has a subheading, heading, or description. With **Inline**, it sits under the section heading.

## What customers see
- **Large screens:** the items show in a row with the number of columns you chose.
- **Tablets and phones, Grid:** the items stack, 2 per row on tablets and 1 per row on phones.
- **Tablets and phones, Carousel:** the items show in one row that customers swipe sideways.
- **Cards:** with item background on, each item sits on its own card with a border.
![Icon with text items as a swipeable carousel on mobile](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/shine-icon-with-text-2_1sw608y.jpg)

## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the section colors. Color schemes are set in Theme settings > Colors. |
| Section subheading | Adds a short line above the heading. |
| Section heading | Adds the section heading. To highlight words, put them between [ and ] and choose the style in Theme settings > Typography. |
| Heading size | Sets the heading size: H2, H3, H4, or H5. |
| Section description | Adds a short text below the heading. |

### Icon with text item
| Setting | What it does |
| ---- | ---- |
| Item alignment | Aligns the icon and text Left or Center. |
| Icon size | Sets the icon size: 32px, 48px, or 64px. |
| Enable item background | Puts each item on a card with a border and turns on the Background and Content colors. |
| Background | Sets the card background color. Works only with Enable item background. |
| Content | Sets the card text color. Works only with Enable item background. |

### Large screen
| Setting | What it does |
| ---- | ---- |
| Section heading position | Places the section heading at Top left or Top center above the items, or Inline in the first column. |
| Columns per row | Shows 3, 4, or 5 columns per row. With Inline, the heading uses one of the columns. |

### Mobile screen
| Setting | What it does |
| ---- | ---- |
| Section heading position | Aligns the section heading Left or Center on mobile. |
| List style | Shows the items as a Grid or as a swipeable Carousel on tablets and phones. |

### Button
| Setting | What it does |
| ---- | ---- |
| Label | Sets the button text. The button is hidden if the label is empty. |
| Style | Shows the button as Filled, Outlined, or Text link. |
| Link | Sets the page the button opens. |

### Icon with text item block
| Setting | What it does |
| ---- | ---- |
| Icon source | Chooses where the icon comes from: Theme library, Image, or Custom SVG. |
| Theme library | Picks an icon from the theme's icon list. Used with Theme library. |
| Image | Uses your own image as the icon. A square image works best. Used with Image. |
| Custom SVG | Uses your own SVG code. It's shown at the section's icon size. Used with Custom SVG. |
| Heading | Sets the item heading. |
| Description | Sets the item text. |

## Troubleshooting
**My button doesn't show.**
The button needs a **Label**, and the section needs a **Section subheading**, **Section heading**, or **Section description**.

**My image icon looks stretched or cropped.**
The icon area is square. Use a square image, or choose **Theme library** or **Custom SVG** instead.

**My SVG icon is the wrong size.**
Custom SVG icons use the **Icon size** set in the section. Change it to 32px, 48px, or 64px.

**On mobile the items scroll sideways, but I want them stacked.**
Set **List style** under **Mobile screen** to **Grid**.

## Related articles
- [Shine What Icons Can I Use](https://doc.ecomx.co/en/article/shine-what-icons-can-i-use-on-shine-theme-1t4o9yp/)
- [Shine Value List](https://doc.ecomx.co/en/article/shine-theme-value-list-1tg3t44/)
- [Shine Info Tabs](https://doc.ecomx.co/en/article/shine-info-tabs-epc2d4/)
- [Shine Typography](https://doc.ecomx.co/en/article/shine-typography-6k6p3o/)