> 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/logo-slider.md). # Logo Slider Show press mentions, partner brands, payment badges or stockists as a clean scrolling row of logos. "As seen in" does a lot of work in very little space. The **Logo Slider** section is a horizontal row of images — press mentions, partner brands, certifications, stockists, payment badges — each one optionally linking somewhere. It borrows credibility from names your visitor already recognises.
{% hint style="info" %} **At a glance** | Where to find it | **Add section → Trust & Social proof** | | ---------------- | -------------------------------------- | | Blocks | Logo (up to 20) | | Allowed on | Any template, and the footer | | Best image shape | Square (1:1) | | {% endhint %} | | *** ### How to add {% stepper %} {% step %} ### Add the section Click **Add section** and pick **Logo slider** from the **Trust & Social proof** group. The preset arrives with six empty **Logo** blocks. {% endstep %} {% step %} ### Upload the logos Open each block and upload an image. Square (1:1) files with even padding around the mark give the tidiest row. {% endstep %} {% step %} ### Add links where they're useful Add a **Link** if the logo should be clickable — to the article, the partner's site, or your stockist page. Leave it empty otherwise. {% endstep %} {% step %} ### Match the block count to your logos Add or remove blocks so there are no empty ones left. The section holds up to **20**. {% endstep %} {% endstepper %} {% hint style="warning" %} **A row of empty blocks hides the whole section.** On the live store the section only renders if at least one block has an image uploaded; empty blocks are skipped. In the theme editor it stays visible so you can keep working — which is why a logo row can look fine in the editor and be missing on the published store. {% endhint %} {% hint style="success" icon="lightbulb" %} ### Good to know * **Square images look best.** The image field says so explicitly. Logos come in wildly different aspect ratios; putting each one on a square canvas with even padding is what makes the row look deliberate rather than ragged. * **Arrows only appear on hover.** The **Show arrows only on hover** checkbox is on by default, so on desktop the row looks arrow-free until the cursor enters it. * **This one is *****not***** full-width by default.** Unlike Testimonials and Icons with Text, **Make full-width** starts off, so the logo row aligns to your page grid out of the box. * **It can go in the footer.** Logo slider is one of the few content sections allowed in the footer section group — handy for payment badges or certification marks. * **Alignment defaults to Left.** With only two or three logos they'll sit left rather than centred. Switch **Alignment when fewer items** to *Center* if you want them balanced. {% endhint %} ### Customization ideas
Press strip Heading *As seen in*, six publication logos in grey, **Desktop items** at 6, and a colour scheme matching the page background so the logos sit quietly above your hero copy.
Payment and trust badges in the footer Add the section to the footer group, drop in card logos and any certification marks, and set **Desktop items** high so they read as a compact strip rather than a carousel.
Stockist finder Link each retailer logo to its store locator page and add a section **Button label** — *Find a store near you*.
Make the logos monochrome Upload them as flat single-colour PNGs or SVGs in the same grey. Mixed full-colour logos are the most common reason a logo row looks messy.
Certification wall Organic, vegan, B-Corp, carbon-neutral — one square icon each, with links to the certifying body so the claim is checkable.
*** ### 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`. | | Button label / Button icon / Swap icon position | Optional section button. Leave the label empty to hide it. Icon takes a path from the [icon catalog](https://volume-theme-fashion.myshopify.com/pages/icons). | | Link / Open link in a new tab | Where the section button goes. | | Center text | Centres the heading and button. On by default. | **Slider** | Setting | What it does | | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | | Desktop items | How many logos fit across — 2 to 8 in half steps, default 5. 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*. | **Section layout** | Setting | What it does | | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------- | | Make full-width | **Off by default** — the row aligns to the grid. | | Grid | *Page*, *Alternative*, *Secondary* or *Custom*. | | Width / Column gap | Only with **Grid → Custom**: 1040–2560 px, and a 1–80 px gap. | | 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 **Logo** — one logo. Up to 20 per section. | Setting | What it does | | ---------------------- | ------------------------------------------------------------------------------- | | Image | The logo. Looks best as a square (1:1) image. A block with no image is skipped. | | Link | Optional destination — the article, the partner site, the certification. | | Open link in a new tab | Recommended for links leaving your store. |
### Best practices * **Same visual weight for every logo.** Resize on a square canvas so no single brand dominates. A logo row with one giant logo reads as amateur. * **Upload at 2x.** Logos are usually small on screen, which makes them the first thing to look blurry on a retina display. Upload at roughly double the display size. * **Put it above the fold on the home page** if the names are genuinely recognisable, and below the hero if they aren't — the logos should support the promise, not compete with it. * **Don't link everything.** If a logo has no useful destination, leave **Link** empty. A clickable logo that goes nowhere useful costs you the visitor. {% hint style="danger" %} **Check you have permission.** Press logos and partner marks are trademarks. "As seen in" for a real mention is normally fine; implying a partnership that doesn't exist is not. {% endhint %} ## Related * [Testimonials](/docs/volume-themes/sections/trust-and-social-proof/testimonials.md) — customer reviews in a carousel * [Icons with Text](/docs/volume-themes/sections/trust-and-social-proof/icons-with-text.md) — guarantees and shipping promises --- # 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/logo-slider.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.