> 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/testimonials.md).
# Testimonials
Turn your best customer reviews into a carousel with star ratings, author photos, and full reviews that open in a pop-up.
Shoppers trust other shoppers more than they trust your copy. The **Testimonials** section puts that trust on the page: a carousel of reviews with star ratings, author names, photos, and an optional link that opens the full review in a pop-up — so a long, detailed review never has to shrink to fit a card.
{% hint style="info" %}
**At a glance**
| Where to find it | **Add section → Trust & Social proof** |
| ---------------- | -------------------------------------- |
| Blocks | Testimonial (up to 20), Info card |
| Allowed on | Any template |
| Not allowed in | Header, footer |
| {% endhint %} | |
***
### How to add
{% stepper %}
{% step %}
### Add the section
Open the template you want the reviews on — the home page, a product page, or an **About us** page. Click **Add section** and pick **Testimonials** from the **Trust & Social proof** group.
{% endstep %}
{% step %}
### Fill in the four preset blocks
The preset arrives with four **Testimonial** blocks. Open each one and fill in **Stars**, **Heading**, **Text**, **Image**, **Author** and **Position**.
{% endstep %}
{% step %}
### Match the count to your reviews
Add or remove blocks so the carousel holds only reviews you actually have. The section takes up to **20**.
{% endstep %}
{% step %}
### Tune the carousel
Open the **Slider** group and set **Desktop items** — 3 is the default, and half values such as 3.5 leave the next card peeking so visitors know to swipe.
{% endstep %}
{% endstepper %}
{% hint style="warning" %}
**A section with no blocks disappears from the live store.** Testimonials only renders when it has at least one block. It stays visible in the theme editor so you can add blocks back — which is why this one surprises people: the editor looks fine, the storefront is missing a section.
{% endhint %}
{% hint style="success" icon="lightbulb" %}
### Good to know
* **Stars go in half steps.** The **Stars** slider moves in increments of 0.5, so a 4.5-star review is possible. The whole star row is controlled by **Show rating** at section level — turn it off and no block shows stars.
* **Long reviews live on a page.** Each block has a **Page** setting. Pick a Shopify page and the card gets a **Show full review** button that opens that page's content in a pop-up or drawer — text, tables and images all come through. Rename that button with the **'Read more' button label** setting.
* **Arrows only appear on hover.** The **Show arrows only on hover** checkbox is on by default, which means on desktop the carousel looks arrow-free until the visitor moves the cursor over it. The scrollbar underneath is the persistent navigation cue.
* **This section is padded more than most.** **Top** and **Bottom** spacing default to `2x`, not `1x`. If Testimonials looks like it has too much air compared to neighbouring sections, that is why.
* **Paddings hides itself.** The **Paddings** slider only appears when **Section framing** is not *Disable* **and** **Make full-width** is off. With full-width on, the framed card runs edge to edge and the setting has nothing to control.
* **Not available in the header or footer.** Testimonials can go on any template, but not into the header or footer section groups.
{% endhint %}
### Customization ideas
Lead with the quote, not the name
The block **Heading** is meant for the single most persuasive line of the review; the **Text** field carries the rest. Pull the strongest sentence up into the heading and the carousel reads like a wall of benefits rather than a wall of paragraphs.
Use real faces
Upload the customer's photo (or their product-in-use shot) into the block **Image**, set **Media ratio** to *Square (1:1)* and **Corner radius** to *Round* for a classic avatar look.
Add a promo card to the carousel
The **Info card** block is a full media card with its own image or video, overlay, heading, text and button. Drop one at the end of the reviews to catch the visitor while they are already convinced — "Join 4,000 happy customers" with a link to your bestsellers.
Set **Show only on desktop** if it crowds the mobile carousel.
Turn it into a review wall
Raise **Desktop items** to 4–5 and turn **Center text** off. The section stops feeling like a slideshow and starts feeling like a review page.
Link out to the full story
Add a section-level **Button label** and **Link** pointing at your dedicated reviews page, or at your Judge.me / Loox page.
***
### Settings reference
Section settings
| Setting | What it does |
| ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Show rating | Shows or hides the star row on every block. On by default. |
| Heading | Section heading. Defaults to *What our clients say*. Wrap a word in `{curly brackets}` for the secondary heading style, or `[square brackets]` to highlight it. |
| Heading style / Heading tag | Visual style (defaults to *Page title*) and HTML tag (defaults to `h2`) — set independently, so you can look big and still be `h2` for SEO. |
| Button label / Button icon / Swap icon position | Optional section-level button. Leave the label empty to hide the button. Icon takes a path from the [icon catalog](https://volume-theme-fashion.myshopify.com/pages/icons), e.g. `glyphs/arrows/arrow-down`. |
| Link / Open link in a new tab | Where the section button goes. |
| Button style | *Solid*, *Outlined* or *Link*. |
| 'Read more' button label | Label of the per-block button that opens the full review. Defaults to *Show full review*. |
| Center text | Centres the content inside each card. On by default. |
| Media ratio | Crop for the block image: Original, Square (1:1), Portrait (4:5), Narrow portrait (2:3), Traditional (4:3), Landscape (3:2), Wide (16:9), Ultrawide (4:1). Defaults to Square. |
| Corner radius | Rounding of the block image — Default, Disable, S, M, L, XL, XXL, XXXL, Round. |
**Slider**
| Setting | What it does |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Desktop items | How many cards fit across the carousel — 2 to 6.5 in half steps, default 3. Half values leave the next card peeking, which signals "swipe me". The theme may adjust this automatically to avoid very narrow cards. |
| Alignment when fewer items | *Center* or *Left* when there aren't enough reviews to fill a row. Default *Center*. |
| Mobile item width | 150–300 px, default 210 px. |
| Show arrows only on hover | On by default. |
| Arrows style / Arrows size | *Solid*, *Solid invert*, *Outlined*; *Small*, *Regular*, *Large*. |
| Show scrollbar / Scrollbar style | Scrollbar under the carousel, *Wide* or *Narrow*. |
**Section layout**
| Setting | What it does |
| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Make full-width | On by default — the carousel runs edge to edge. |
| Grid | Which grid the content aligns to: *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* (whole section framed) or *Grid* (framed within the 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. **Both default to 2.** |
| Paddings | Inner padding of the framed card, 0–3. Only visible when framing is on and full-width is off. |
| Info card paddings | Inner padding of the Info card block, 0–3. |
Block reference
**Testimonial** — one review. Up to 20 per section.
| Setting | What it does |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| Stars | 1–5 in half steps, default 5. |
| Show heading / Heading | The headline of the review. Defaults to a prompt reminding you to put the most valuable part here. |
| Heading style / Heading tag | Defaults to *Section heading* and `h2`. |
| Show text / Text | The body of the review (rich text). |
| Text style | Defaults to *Body*. |
| Show image / Image | Author photo or product shot. |
| Show author / Author | Author name. |
| Show position / Position | Rich-text line under the name — company, title, or "Verified buyer". |
| Top spacing / Mobile top spacing | Each element (heading, text, image, author, position) has its own desktop and mobile spacing multiplier, 0–5. |
| Page | A Shopify page holding the full review. Opens in a pop-up. |
| Richtext heading style | How headings inside that page render in the pop-up. |
| Popup style / Popup width | *Popover* or *Drawer*; *Regular* or *Wide* (default *Wide*). |
**Info card** — a promotional media card inside the carousel. Optional.
| Setting | What it does |
| ----------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
| Show only on desktop | Hides the card on mobile. Off by default. |
| Media type / Image / Video | Image or video background. |
| Focal point | Which part of the media stays in frame when cropped. |
| Overlay opacity / Overlay color type / Overlay color / Overlay gradient | Darkening layer over the media — from the colour scheme, a solid colour, or a gradient. |
| Info card color scheme | Colour scheme for the card's text and button. |
| Center text | Centres the card content. |
| Link / Open link in a new tab | Makes the whole card clickable. |
| Subheading / Heading / Text | Card copy, each with its own style and tag settings. |
| Button style / Button corner radius | Appearance of the card button. |
### Best practices
* **Be specific, not glowing.** "Arrived in two days and the sizing was exactly right" outperforms "Great product!" — specifics read as real.
* **Four to six reviews is the sweet spot.** Enough to look established, few enough that visitors read them. Twenty reviews in a carousel is a wall nobody swipes through.
* **Keep the card text short.** Two or three lines. Anything longer belongs behind the **Page** setting so the carousel stays scannable.
* **Place it after the objection.** Testimonials work hardest directly below the section that raises a doubt — pricing, sizing, shipping — not at the very bottom of the page.
{% hint style="danger" %}
**Use real reviews.** Most markets treat fabricated testimonials as misleading advertising. Use real customers, and get permission before publishing names and photos.
{% endhint %}
## Related
* [Logo Slider](/docs/volume-themes/sections/trust-and-social-proof/logo-slider.md) — press and partner logos
* [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/testimonials.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.
