> 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/avante-themes/sections/trust-and-social-proof/icons-with-text-and-logo-slider.md). # Icons with Text & Logo Slider Display store benefits and USPs with Icons with Text, or showcase partner brands, press mentions, and trust badges with the Logo Slider section. These two sections do the quiet work of convincing. **Icons with Text** turns the reasons to buy from you into a scannable icon strip — whatever those reasons are for your store: how you ship, how you handle returns, what you guarantee, what your products are made of. **Logo Slider** borrows credibility from the brands, publications, and partners you're associated with. Pick the one that fits your goal: * **Icons with Text** — a row of icon-and-text items for USPs, shipping info, and guarantees. Each item can open a full policy page in a pop-up. * **Logo Slider** — an auto-scrolling row of brand, press, or partner logos. For settings shared across most sections (width, color scheme, spacing, content position, paddings), see [Common section settings](/docs/avante-themes/sections/overview.md#common-section-settings). For image dimensions, see [Image & video size recommendations](/docs/avante-themes/faq/performance/image-and-video-size-recommendations.md). *** ## Icons with Text The row of small promises that answers "why buy here?". Drop it under a hero, above the footer, or right beside Add to cart, where hesitation peaks. Each item can also open a full Shopify page in a pop-up, so shoppers get the three-word version and the fine print without ever leaving the page.
In the Theme Editor this section is listed as **Icons with text**, and every point you add is its own **Item** block — pick an **Icon** and write a **Heading** in each. See [Overview](/docs/avante-themes/sections/overview.md) for how sections and blocks work in general.
{% hint style="success" icon="sparkles" %} ### Good to know * **The fine print, without losing the shopper.** Link a Shopify **Page** to an Item and a small marker appears next to the heading, so shoppers know there's more to read — and the marker tells them what will happen. With **Show page content in pop-up** on, the heading gets an ⓘ and clicking it opens that page in a modal over the storefront: the shopper reads your shipping terms and closes it without ever leaving the page they were on. With the toggle off, the marker is an ↗ arrow and the Item links through to the page as ordinary navigation. Perfect for shipping, returns, or a materials statement — keep the strip to three words and let the linked page carry the detail. * **90+ built-in icons, or your own artwork.** The **Icon** dropdown ships with a large library — planet, leaf, recycled symbol, moving truck, padlock, measuring tape, washing symbols, paw print, and many more. For something branded, set **Icon** to **Disabled** and upload an **Image** in the same Item: square, transparent PNG or SVG, around 2× your **Icon size** (so 320×320 for a 160px icon). * **Slider or grid.** **Desktop grid type → Grid** lays every Item out at once — best for three or four points. **Slider** puts them on a scrollable track instead, which is the better choice once you have five or more. **Max columns number** caps the row at two, three, or four columns. * **Mobile is configured separately.** **Mobile layout** (One column / Two columns) and **Mobile navigation** (Arrows / Scrollbar) are their own settings. A four-column desktop strip becomes unreadable on a phone if you leave them at default — decide deliberately whether the points stack or scroll. * **Heading level affects SEO.** **Section heading → Tag** defaults to **H2**, and that's usually right. Only one H1 belongs on a page, normally your hero. You can also drop it to **div**, **span**, or **p** to keep the section out of the document outline entirely. * **Curly brackets switch the font.** In both the section **Heading** and each Item's **Heading**, wrap a word in `{curly brackets}` to render it in the Secondary heading font — `Free {worldwide} shipping`. See [Typography](/docs/avante-themes/theme-settings/typography.md). {% endhint %}
### Best practices * Three or four points, not eight. A trust strip works because it's scannable in one glance. * Keep each **Heading** to two or three words and move the explanation into **Text** or a linked **Page**. * Write the linked page for the pop-up. It renders exactly as you wrote it in Shopify, with no page title or navigation around it — so concrete delivery windows and rates read well in a modal, while a wall of legal text does not. * Use one **Item → Icon weight** across the whole section. Light suits editorial and fashion, Bold holds up better on small mobile sizes and busy backgrounds — but mixing the two reads as an oversight. * If you upload custom icons, crop them tight with no extra transparent padding and keep every file the same dimensions, or they'll look randomly scaled next to each other. * Turn on **Item → Dim text** when the supporting line competes with the heading for attention. * Place the section under your hero for a first-visit trust signal, or near add-to-cart on product pages where doubt peaks. * Don't restate what the icon already says. "Truck — Shipping" is wasted space; "Truck — Free worldwide shipping" earns it. *** ## Logo Slider Nothing you say about your own store works as hard as a name someone else gave you. Logo Slider is where those go — press mentions, stockists, partner brands, certifications — in a single "featured in" strip that does its job in half a second. Each logo can link out to the article or the partner site that earned it.
In the Theme Editor this section is listed as **Logo slider**, and every logo is its own **Logo** block — upload an **Image** in each.
{% hint style="success" icon="sparkles" %} ### Good to know * **It's a slider, not a grid.** **Grid type** — **Four in a row** or **Five in a row** — sets how many logos share a row at full width. Add more than that and the rest move onto the slider track, with arrows underneath to page through them. There's no cap on how many logos you add, only on how many are visible at once. * **Show lines draws the press wall.** This toggle puts a thin vertical divider between logos, which is what gives the strip its editorial "as seen in" look and keeps every logo in an equal-width cell. Turn it off for a lighter, floating row. Try both — the lines also make mismatched logo sizes far more obvious, which is useful while you're still tuning the files. * **The button hides itself.** There's no on/off switch for the section button: leave **Button label** empty and it disappears. Fill it in and **Button link**, **Open link in a new tab**, and **Button style** (Solid / Outlined / Link) come into play — useful for pointing at a full press page when four logos aren't the whole story. * **Every logo can link out.** Each **Logo** block has its own **Link** and **Open link in a new tab**. Point a press logo at the article that mentioned you and open it in a new tab, so a shopper reading it doesn't lose your store. * **The heading defaults to H3 here.** **Heading tag** is H3 out of the box, one step below Icons with Text — sensible, because this strip usually sits under something more important. Promote it only if it really is the page's main heading, and use **div**, **span**, or **p** to keep it out of the document outline entirely. * **Curly brackets switch the font.** Wrap a word of the **Heading** in `{curly brackets}` to render it in the Secondary heading font — `{Featured} in`. See [Typography](/docs/avante-themes/theme-settings/typography.md). {% endhint %}
### Best practices * Prepare the files as a set, not one at a time. Square, transparent PNG or SVG at around 500×500, every file the same dimensions — logos come in wildly different natural shapes, and a long wordmark next to a compact emblem will look randomly scaled unless you pad each one into the same square canvas. * Balance them by eye, not by pixel. A wide wordmark usually needs to sit slightly smaller than a square emblem to *read* as the same size. * Keep them all one tone. Most press logos are supplied in black, and a single full-colour logo dropped into a monochrome row takes all the attention for no reason. * Match the count to **Grid type**. Three logos with **Five in a row** looks like something failed to load — either add more or drop to **Four in a row**. * Four strong names beat twelve weak ones. Nobody pages through a carousel of logos they don't recognise. * On mobile, **Two columns** usually wins. Logos are small and simple enough to sit side by side, where one column wastes half the screen. * Place it below the fold, after your hero and product story. This is reassurance for someone already interested, not a headline. *** ### Related * [Trust & Social Proof overview](/docs/avante-themes/sections/trust-and-social-proof.md) * [Testimonials](/docs/avante-themes/sections/trust-and-social-proof/testimonials.md) * [Common section settings](/docs/avante-themes/sections/overview.md#common-section-settings) * [Image & video size recommendations](/docs/avante-themes/faq/performance/image-and-video-size-recommendations.md) * [Typography](/docs/avante-themes/theme-settings/typography.md) --- # 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://staylime.com/docs/avante-themes/sections/trust-and-social-proof/icons-with-text-and-logo-slider.md?ask=&goal= ``` `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.