> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/storytelling/icon-box.md).

# Icon box

**Icon box** lines up a few short promises side by side, each one an icon with a heading and a sentence under it. It is where a store states the things that remove hesitation before checkout: free delivery over a threshold, easy returns, a warranty, or ethical sourcing. Shoppers scan it in a second because the icon carries the meaning before they read a word.

It usually sits just under the hero on the home page, or directly above the footer, and it works equally well on a product page as a reassurance strip.

<figure><img src="/files/j9JFCI1PxtJR6ieWxh8E" alt=""><figcaption></figcaption></figure>

### Where to find it <a href="#where-to-find-it" id="where-to-find-it"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. Open the template you want the strip on.
3. Click **Add section** and choose **Icon box** from the **Storytelling** group.
4. Add one block per promise, then give each an icon and a heading.
   {% endhint %}

*Result:* the blocks render as a row of icons with wording underneath, evenly spread across the section width.

### Section settings <a href="#section-settings" id="section-settings"></a>

#### General settings <a href="#general-setting" id="general-setting"></a>

| Setting           | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Section width** | <p>How much of the screen the row of promises is allowed to take.</p><ul><li><strong>Stretch width</strong>: the row spreads to the browser width, so four or five items still have room.</li><li><strong>Fixed width</strong>: the row lines up with the rest of your pages, using the width set in <strong>Theme settings > Layout</strong>.</li><li><strong>Full width</strong>: the row runs edge to edge, which suits a colored reassurance strip.</li></ul> |
| **Color scheme**  | The background and text colors this strip uses. Schemes are defined in **Theme settings > Colors**, and giving this section its own scheme is a simple way to make it stand out from the sections around it.                                                                                                                                                                                                                                                      |
| **Show border**   | Draws an outline around each item, which turns the row into separate cards instead of one continuous band. Helpful when the wording under each icon runs to more than one line.                                                                                                                                                                                                                                                                                   |
| **Height**        | How the artwork sits in its slot. **Fit** keeps the whole image visible, while **Fill** makes it cover the slot so every item matches, trimming the edges of the picture if it has to.                                                                                                                                                                                                                                                                            |

#### Section header <a href="#section-header" id="section-header"></a>

| Setting                              | Description                                                                                                                                                                                                                                                                                                                                                    |
| ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Subheading, Heading, Description** | The three lines above the icons: a short label for context, the headline shoppers read first, and a sentence of detail. Many stores leave all three empty, because the icons already speak for themselves.                                                                                                                                                     |
| **Heading size**                     | <p>How large that headline appears.</p><ul><li><strong>Heading 1</strong>: only when this strip is the main message of the page.</li><li><strong>Heading 2</strong>: the safe middle choice.</li><li><strong>Heading 3</strong>: keeps the strip supporting rather than shouting.</li></ul>                                                                    |
| **Alignment**                        | <p>Which edge the heading and description line up with.</p><ul><li><strong>Left</strong>: reads naturally with a full sentence.</li><li><strong>Center</strong>: matches a row of centred icons.</li><li><strong>Right</strong>: use it to mirror a neighbouring section.</li></ul>                                                                            |
| **Column gap**                       | <p>The space between one item and the next.</p><ul><li><strong>No gap</strong>: items touch, reading as one continuous bar.</li><li><strong>Small</strong>: a thin separation, keeps the row compact.</li><li><strong>Medium</strong>: each promise reads as its own point.</li><li><strong>Large</strong>: airy, best with only two or three items.</li></ul> |

#### Icon settings <a href="#icon-settings" id="icon-settings"></a>

| Setting      | Description                                                                                                                                                                      |
| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Size**     | How large the icons are drawn. Larger icons carry the message on their own, smaller ones let the wording lead.                                                                   |
| **Position** | Where the icon sits relative to its wording on desktop, for example above the text or beside it. Beside the text keeps the strip short, above it reads more like a feature card. |

#### Content settings <a href="#content-settings" id="content-settings"></a>

| Setting                  | Description                                                                                                                                                                                  |
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Alignment**            | Which edge the heading and description under each icon line up with. Centre it when the icon sits above the text, left align it when the icon sits beside the text.                          |
| **Size**                 | How large that wording is. Keep it small, since these are supporting promises rather than the main message of the page.                                                                      |
| **Padding inline/block** | The breathing room inside each item. **Inline** controls left and right, **Block** controls top and bottom. Increase it when **Show border** is on and the text presses against the outline. |

#### Mobile settings <a href="#mobile-settings" id="mobile-settings"></a>

| Setting                       | Description                                                                                                    |
| ----------------------------- | -------------------------------------------------------------------------------------------------------------- |
| **Enable carousel on mobile** | Turns the row into a swipeable strip on phones, so four promises cost one screen instead of four.              |
| **Items per row**             | How many promises share the width of a phone screen. Two fits short labels, one keeps longer wording readable. |

#### Section padding <a href="#section-padding" id="section-padding"></a>

| Setting    | Description                                                                                 |
| ---------- | ------------------------------------------------------------------------------------------- |
| **Top**    | Adds space above the strip. Increase it when the icons sit too close to the section before. |
| **Bottom** | Adds space below the strip. Increase it when the next section starts too abruptly.          |

#### Section divider <a href="#section-divider" id="section-divider"></a>

| Setting          | Description                                                                                                  |
| ---------------- | ------------------------------------------------------------------------------------------------------------ |
| **Show divider** | Draws a thin line between this section and the one above it, which helps when both share a background color. |

### Block settings <a href="#block-settings" id="block-settings"></a>

| Setting                  | Description                                                                                                                             |
| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
| **Image**                | Your own artwork for this promise, used when the built in icons do not match your brand.                                                |
| **Svg icon**             | One of the icons that ship with the theme, the quickest route to a consistent looking row.                                              |
| **Heading, Description** | The promise itself: a few words shoppers can scan, and an optional line of detail such as the threshold or the time limit that applies. |

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* Each block is one promise, in the order the blocks appear in the sidebar. Three or four is usually the limit before shoppers stop reading.
* With the carousel off on mobile, the promises stack, which can push the rest of the page a long way down.
* An uploaded **Image** and a chosen **Svg icon** compete for the same slot, so pick one route and use it across every block for a consistent row.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Storytelling](/velare/customize-your-pages/storytelling.md): the group this section belongs to
* [Icon](/velare/customize-your-pages/basic/icon.md): the standalone icon block for use in other sections
* [Colors](/velare/set-up-your-store/colors.md) and [Layout](/velare/set-up-your-store/layout.md): where the color schemes and the fixed page width come from


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/storytelling/icon-box.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.