> ## 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 Value List

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

The Value list section highlights key numbers or facts in large text, such as "100% organic" or "30-day returns", each with a short subheading and description. Use it to show what makes your store or product stand out at a glance.

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

**What you can do**
- Add the section and your values
- Make the values stand out
- Put each value on a card
- Choose the layout
- See what customers see
- Change the value list settings
- Fix common problems

---

## Add the section and your values
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Value list**.
3. Enter a **Section subheading**, a **Section heading**, and a **Section description**, and choose a **Heading size**.
4. Click a **Value** block. Enter the **Value text** (for example 100%), a **Subheading**, and a **Description**.
5. To add more values, click **Add block** > **Value**.
6. Click **Save**.

> **Tip:** Keep the value text short, like a number or 1–2 words. Long text in a large size breaks onto several lines.

## Make the values stand out
1. Click the **Value list** section. Under **Value item**, choose a **Value text size**: **Headline** (the largest) or **H1** to **H6**.
2. To color one value, click its **Value** block and choose a **Value** color.
3. For a gradient, choose a **Text gradient** in the same block. The gradient replaces the **Value** color.
4. Click **Save**.

## Put each value on a card
1. Click the **Value list** section.
2. Under **Value item**, select **Enable item background**. Each value gets a card with a border.
3. Set the **Background** and **Content** colors of the cards.
4. Set **Item alignment** to **Center** or **Left**.
5. Click **Save**.

> **Note:** The **Background** and **Content** colors work only when **Enable item background** is on.

## Choose the layout
1. Under **Large screen**, set **Columns per row** to **3**, **4**, or **5**, and set **Section heading alignment** to **Left** or **Center**.
2. Under **Mobile screen**, set **Section heading alignment** to **Left** or **Center**.
3. Click **Save**.

## What customers see
- **Large screens:** the values show in a grid with the number of columns you chose.
- **Tablets:** the values show 2 per row.
- **Phones:** the values stack in 1 column.
- **Cards:** with item background on, each value sits on its own card with a border.
![Value list on mobile with gradient values in 1 column](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/shine-value-list-2_yebmws.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. |

### Value item
| Setting | What it does |
| ---- | ---- |
| Item alignment | Aligns the text in each value Center or Left. |
| Value text size | Sets the size of the value text: Headline, H1, H2, H3, H4, H5, or H6. |
| Enable item background | Puts each value 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 alignment | Aligns the section heading Left or Center. |
| Columns per row | Shows 3, 4, or 5 values per row. |

### Mobile screen
| Setting | What it does |
| ---- | ---- |
| Section heading alignment | Aligns the section heading Left or Center on mobile. |

### Value block
| Setting | What it does |
| ---- | ---- |
| Value text | Sets the large text, for example a number or a short fact. |
| Value | Sets the color of the value text. |
| Text gradient | Fills the value text with a gradient. It replaces the Value color. |
| Subheading | Adds a short title below the value. |
| Description | Adds a short text below the subheading. |

## Troubleshooting
**My Value color doesn't show.**
A **Text gradient** is set in the same block. Remove the gradient to use the **Value** color.

**My card colors don't change.**
Turn on **Enable item background** under **Value item**.

**The values look crowded.**
Lower **Columns per row**, or choose a smaller **Value text size**.

## Related articles
- [Shine Icon With Text](https://doc.ecomx.co/en/article/shine-icon-with-text-1tsoudb/)
- [Shine Info Tabs](https://doc.ecomx.co/en/article/shine-info-tabs-epc2d4/)
- [Shine Typography](https://doc.ecomx.co/en/article/shine-typography-6k6p3o/)