> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/volume-themes/sections/trust-and-social-proof/icons-with-text.md).
# Icons with Text
Communicate shipping, returns, guarantees and other selling points as a row of icons with short supporting text.
Free shipping, 30-day returns, two-year warranty, carbon-neutral delivery — the small promises that remove hesitation. **Icons with Text** lays them out as a row of icons with a short headline and a line of copy under each, and it can run either as a fixed grid or as a scrolling slider.
{% hint style="info" %}
**At a glance**
| Where to find it | **Add section → Trust & Social proof** |
| ---------------- | -------------------------------------- |
| Blocks | Item (up to 20) |
| Allowed on | Any template, and the footer |
| Two layouts | Slider (default) or Grid |
| {% endhint %} | |
***
### How to add
{% stepper %}
{% step %}
### Add the section
Click **Add section** and pick **Icons with text** from the **Trust & Social proof** group. The preset arrives with four **Item** blocks.
{% endstep %}
{% step %}
### Choose an icon or upload an image
In each block, either paste an **Icon** path from the [icon catalog](https://volume-theme-fashion.myshopify.com/pages/icons) — for example `glyphs/arrows/arrow-down` — or upload your own **Image**.
{% endstep %}
{% step %}
### Write the promise
Fill in the **Heading** (two or three words) and the **Text** line under it.
{% endstep %}
{% step %}
### Pick the layout
Set **Grid type** to *Slider* (the default) for a scrolling row, or *Grid* for a fixed set of columns.
{% endstep %}
{% endstepper %}
{% hint style="warning" %}
**Completely empty blocks hide the section.** A block counts as filled if it has an icon, an image, a heading, text, or a linked page. If none of the blocks have any of those, the section disappears on the live store — while still showing in the theme editor.
{% endhint %}
{% hint style="success" icon="lightbulb" %}
### Good to know
* **Image beats icon.** If a block has both an uploaded **Image** and an **Icon** path, the image wins and the icon is ignored. To go back to the icon, remove the image.
* **Grid type swaps which settings you see.** Choose *Slider* and you get the **Slider** group (Desktop items, arrows, scrollbar). Choose *Grid* and those disappear, replaced by **Desktop max columns** and **Mobile max columns**. Switching back and forth doesn't lose your values — they're just hidden.
* **Icon size goes far bigger than you'd expect.** **Icon size** runs from 12 px all the way to 400 px, so this section can double as a feature row with large illustrations, not just tiny badges.
* **Fill container** stretches the icon or image to fill its media box instead of sitting at the chosen size — useful for photographic tiles, odd for line icons.
* **Icon colour is per block, and desktop and mobile are separate.** Each item has its own **Color** and **Mobile color**. On a multicoloured icon this changes the background colour rather than the whole glyph.
* **A block can open a page.** Set **Page** on a block and the item becomes clickable. With **Show page content in pop-up** on (the default) the page opens in a popover or drawer; turn it off and the item links through to the page normally. Great for "Free shipping" → your full shipping policy.
* **It can go in the footer.** Icons with text is allowed in the footer section group as well as any template.
{% endhint %}
### Customization ideas
The classic trust bar
Four items, *Grid* type, **Icon size** around 32–40 px, **Center text** on, a quiet colour scheme, and **Top/Bottom** spacing lowered to about 0.5 so it reads as a slim strip under the hero.
A "how it works" row
Numbered or step icons, **Grid** with 3 columns, longer text — the same section turns into a three-step explainer.
Feature cards with photos
Upload square photos instead of icons, raise **Icon size** to 200–300 px, turn **Fill container** on and set a **Corner radius**. Now it's a feature grid.
Make each promise clickable
Link every item to the matching policy page and leave **Show page content in pop-up** on — the visitor gets the detail without leaving the product page.
Repeat it on the product page
The same four promises directly under the Add to cart button answer the last objections at exactly the moment they surface.
***
### Settings reference
Section settings
| Setting | What it does |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| Heading | Optional section heading. Wrap a word in `{curly brackets}` for the secondary heading style, or `[square brackets]` to highlight it. |
| Heading style / Heading tag | Defaults to *Section heading* and `h2`. |
| Grid type | *Grid* or *Slider*. **Defaults to Slider.** This choice decides which layout settings below are visible. |
**Slider** *(visible when Grid type is Slider)*
| Setting | What it does |
| -------------------------------- | ---------------------------------------------------------------------------------------------------- |
| Desktop items | 2 to 8 in half steps, default 4. The theme may adjust this automatically to avoid very narrow items. |
| Alignment when fewer items | *Center* or *Left*. Defaults to *Left*. |
| Mobile item width | 150–300 px, default 250 px. |
| Show arrows only on hover | On by default. |
| Arrows style / Arrows size | *Solid*, *Solid invert*, *Outlined*; *Small*, *Regular*, *Large*. |
| Show scrollbar / Scrollbar style | *Wide* or *Narrow*. |
**Grid** *(visible when Grid type is Grid)*
| Setting | What it does |
| ------------------- | ------------------------ |
| Desktop max columns | 2, 3, 4 or 5. Default 3. |
| Mobile max columns | 1 or 2. Default 1. |
**Appearance**
| Setting | What it does |
| -------------- | ------------------------------------------------------------------------ |
| Center text | Centres the content of each item. On by default. |
| Icon size | 12–400 px, default 48 px. Applies to both icons and uploaded images. |
| Fill container | Stretches the icon or image to fill its media box. |
| Corner radius | Rounding of the image — Default, Disable, S, M, L, XL, XXL, XXXL, Round. |
**Section layout**
| Setting | What it does |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| Make full-width | On by default. |
| Grid | *Page*, *Alternative*, *Secondary* or *Custom*. |
| Width / Column gap / Row gap | Only with **Grid → Custom**: 1040–2560 px, and 1–80 px gaps. |
| Disable grid max-width | Ignores the grid's maximum width. |
| Show bottom line | Draws a divider under the section. |
| Section framing | *Disable*, *Enable* or *Grid*. Doesn't apply to a section using the primary colour scheme or when **Make full-width** is on. |
**Color / Spacing**
| Setting | What it does |
| ------------ | --------------------------------------------------------------------------------------------- |
| Color scheme | Section colour scheme. |
| Top / Bottom | Vertical spacing multiplier, 0–2, default 1. |
| Paddings | Inner padding of the framed card, 0–3. Only visible when framing is on and full-width is off. |
Block reference
**Item** — one icon with its text. Up to 20 per section.
| Setting | What it does |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Icon | Path from the [icon catalog](https://volume-theme-fashion.myshopify.com/pages/icons), e.g. `glyphs/arrows/arrow-down`. Ignored if an Image is uploaded. |
| Color / Mobile color | Icon colour on desktop and mobile. On a multicoloured icon this changes the background colour. |
| Image | Your own image, used instead of the icon. |
| Heading | Short headline — *Free shipping*, *30-day returns*. |
| Heading style | Defaults to *Subheading*. |
| Text | One supporting line (rich text). |
| Text style | Defaults to *Body*. |
| Top spacing / Mobile top spacing | Separate desktop and mobile spacing multipliers (0–5) for the heading and for the text. |
| Page | A Shopify page with the full detail — your shipping or returns policy. |
| Richtext heading style | How headings inside that page render. |
| Show page content in pop-up | On by default. Turn off to link straight to the page instead. |
| Popup style / Popup width | *Popover* or *Drawer*; *Regular* or *Wide* (default *Wide*). |
### Best practices
* **Three to five items.** Six or more and each promise stops registering.
* **Keep headings to two or three words.** *Free shipping*, not *We offer free shipping on all orders*. The supporting line carries the condition.
* **Use one icon family.** Mixing line icons with filled icons is the fastest way to make a trust bar look improvised. The theme's icon catalog is consistent by design.
* **Match icon colour to your scheme.** The default icon colour is pure black, which rarely matches a themed section. Set **Color** deliberately on every block.
{% hint style="warning" %}
**Only promise what you deliver.** "Free shipping" with a minimum order buried elsewhere causes more cart abandonment than no claim at all — put the threshold in the supporting text.
{% endhint %}
## Related
* [Testimonials](/docs/volume-themes/sections/trust-and-social-proof/testimonials.md) — customer reviews in a carousel
* [Logo Slider](/docs/volume-themes/sections/trust-and-social-proof/logo-slider.md) — press and partner logos
---
# 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 by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://staylime.com/docs/volume-themes/sections/trust-and-social-proof/icons-with-text.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.
