> 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/testimonials.md).

# Testimonials

**Testimonials** rotates a set of customer quotes, with a row of thumbnails so shoppers can see who said what and jump to a particular reviewer. It is the section for social proof in volume: several short opinions from different people carry more weight than one long review, and the faces or logos in the thumbnails make them read as real. Shoppers usually meet it below the products on the home page, or on an about page where the brand is making its case.

Use it when you have four or five short quotes. When a single review deserves the whole screen, use [Featured review slider](/velare/customize-your-pages/storytelling/featured-review-slider.md) instead.

<figure><img src="/files/LMCdv9zxhfLVILoIJ85Z" 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 reviews on.
3. Click **Add section** and choose **Testimonials** from the **Storytelling** group.
4. Add one block per review, then fill in the quote and its thumbnail image.
   {% endhint %}

*Result:* the quotes render as a carousel, with a thumbnail for each review underneath.

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

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

<table data-search="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Section width</strong></td><td><p>How much of the screen the reviews are allowed to take.</p><ul><li><strong>Stretch width</strong>: the quotes spread to the browser width, giving longer reviews more room per line.</li><li><strong>Fixed width</strong>: the quotes line up with the rest of your pages, using the width set in <strong>Theme settings > Layout</strong>.</li><li><strong>Full width</strong>: the section runs edge to edge, which suits a colored band of testimonials.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>The background and text colors this section uses. Schemes are defined in <strong>Theme settings > Colors.</strong> A different scheme here separates the reviews from the selling sections around them.</td></tr></tbody></table>

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

<table data-search="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Heading, Subheading, Description</strong></td><td>The three lines above the quotes: the headline shoppers read first, a short label above it for context, and a sentence saying where the reviews come from or how many you have collected.</td></tr><tr><td><strong>Heading size</strong></td><td><p>How large that headline appears.</p><ul><li><strong>Heading 1</strong>: use it when the reviews are the point of the page.</li><li><strong>Heading 2</strong>: the safe middle choice on a home page.</li><li><strong>Heading 3</strong>: keeps the reviews secondary to the section above.</li></ul></td></tr><tr><td><strong>Alignment</strong></td><td><p>Which edge the heading and description line up with.</p><ul><li><strong>Left</strong>: reads naturally with a full sentence of description.</li><li><strong>Center</strong>: the usual choice, since the quotes below are centred too.</li><li><strong>Right</strong>: use it to mirror a neighbouring section.</li></ul></td></tr></tbody></table>

#### Testimonial settings <a href="#testimonial-settings" id="testimonial-settings"></a>

| Setting             | Description                                                                                                                              |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| **Max width**       | How wide a quote is allowed to run on large screens. Narrower lines are easier to read, so lower this before you shorten the quote.      |
| **Image width**     | How large the thumbnails under the quotes are drawn. Larger thumbnails put the focus on who is speaking, smaller ones on what they said. |
| **Show quote icon** | Adds a large quotation mark above the review, which tells shoppers at a glance that they are reading someone else's words.               |

#### Carousel settings <a href="#settings-for-carousel" id="settings-for-carousel"></a>

| Setting                | Description                                                                                                                                         |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Show navigation**    | Adds the back and next arrows, so shoppers can move through the reviews at their own pace.                                                          |
| **Show pagination**    | Adds the dots under the carousel, which tell shoppers how many reviews there are and how far along they are.                                        |
| **Auto-change slide**  | Rotates the reviews on their own. Leave it off when the quotes are long, since a review that moves mid sentence is worse than one that never moves. |
| **Change slide every** | How long each review stays on screen before the next one arrives. Longer quotes need a longer setting.                                              |

#### Thumbnail carousel setting <a href="#thumbnail-carousel-setting" id="thumbnail-carousel-setting"></a>

| Setting                  | Description                                                                                                                                 |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
| **Number of thumbnails** | How many reviewers are visible under the quote at once. More thumbnails show the breadth of your reviews, fewer keep each one recognisable. |
| **Reveal next slide**    | Lets the edge of the following review peek into view, which is the clearest signal to shoppers that there is more to see.                   |

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

| Setting    | Description                                                                              |
| ---------- | ---------------------------------------------------------------------------------------- |
| **Top**    | Adds space above the reviews. Increase it when they sit too close to the section before. |
| **Bottom** | Adds space below the reviews. 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** | The thumbnail shoppers see for this review, usually the customer or the logo of the publication that wrote it. Sharpest at ***(180px 60px recommended)***. |
| **Quote** | The review itself. Keep it to the part that answers a real doubt, since a shopper will not read a paragraph on a rotating slide.                           |

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

* Each block is one review, in the order the blocks appear in the sidebar. The first one is what most shoppers actually read.
* The quotes are typed into the theme by hand, so they do not refresh as new reviews arrive. Revisit them when they go stale.
* With no thumbnail image on a block, shoppers lose the visual cue for that reviewer, which weakens the row of thumbnails as a way to navigate.

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

* [Storytelling](/velare/customize-your-pages/storytelling.md): the group this section belongs to
* [Featured review slider](/velare/customize-your-pages/storytelling/featured-review-slider.md): the alternative for one full width review at a time
* [Faqs](/velare/customize-your-pages/storytelling/faqs.md): the other trust building section, for doubts rather than opinions
* [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/testimonials.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.