> 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/featured-review-slider.md).

# Featured review slider

**Featured review slider** gives your best customer reviews a slide of their own instead of squeezing them into a grid. Each slide pairs a picture with a quote, a star rating, and the reviewer's name, so a shopper who is still hesitating reads a full opinion from someone like them. It usually sits below the product rows on the home page, or under the story on a collection or landing page, where proof matters more than another product image.

Slides are assembled from two group blocks: [Media](/velare/customize-your-pages/storytelling/featured-review-slider/group-block-media.md) for the picture, and [Content](/velare/customize-your-pages/storytelling/featured-review-slider/group-block-content.md) for the wording.

<figure><img src="/files/kP2SZjVcIziUej1s8wdW" 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 to appear on.
3. Click **Add section** and choose **Featured review slider** from the **Storytelling** group.
4. Inside the section, add a **Media** block and a **Content** block for each slide.
   {% endhint %}

*Result:* the section renders one slide per pair of blocks, and the carousel controls appear once there is more than one slide.

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

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

| Setting           | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Section width** | <p>How much of the screen a slide is allowed to take.</p><ul><li><strong>Stretch width</strong>: the slide spreads to the browser width, giving the review room to breathe.</li><li><strong>Fixed width</strong>: the slide lines up with the rest of your pages, using the width set in <strong>Theme settings > Layout</strong>.</li><li><strong>Full width</strong>: slide and content run edge to edge, the most cinematic option when the review photo is strong.</li></ul> |
| **Color scheme**  | The background and text colors the section uses. Schemes are defined in **Theme settings > Colors**, so editing one there restyles every section built on it.                                                                                                                                                                                                                                                                                                                    |

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

| Setting             | Description                                                                                                                                                                                                                                                                                                              |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Subheading**      | A short label above the headline, useful for framing what follows, for example *In their words*.                                                                                                                                                                                                                         |
| **Heading**         | The headline shoppers read before the first review, usually naming what the reviews are about.                                                                                                                                                                                                                           |
| **Description**     | A sentence under the headline, good for saying where the reviews come from or how many you have collected.                                                                                                                                                                                                               |
| **Heading size**    | <p>How large that headline appears on screen.</p><ul><li><strong>Heading 1</strong>: use it when the reviews are the main point of the page.</li><li><strong>Heading 2</strong>: the safe middle choice for a home page.</li><li><strong>Heading 3</strong>: keeps the reviews secondary to the section above.</li></ul> |
| **Alignment**       | <p>Which edge the heading and description line up with.</p><ul><li><strong>Left</strong>: reads naturally with a longer description.</li><li><strong>Center</strong>: gives the section a formal, testimonial feel.</li><li><strong>Right</strong>: pair it with a slide whose picture sits on the left.</li></ul>       |
| **Show quote icon** | Adds a large quotation mark above the review text, 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 slider, 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, because a slide 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.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| **Image ratio**        | <p>The shape every review photo is cropped to, so mismatched uploads still look consistent.</p><ul><li><strong>Adapt to image</strong>: no cropping, each photo keeps its own shape.</li><li><strong>Square (1:1)</strong>: neutral, works for portraits of reviewers.</li><li><strong>Portrait (3:4)</strong>: taller, gives the slide more height.</li><li><strong>Landscape (4:3)</strong>: wider, suits room or lifestyle shots.</li><li><strong>Product (4:5)</strong>: matches the crop used on product cards.</li><li><strong>Golden (1.618:1)</strong>: the widest option, closest to a banner.</li></ul> |

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

| Setting    | Description                                                                                    |
| ---------- | ---------------------------------------------------------------------------------------------- |
| **Top**    | Adds space above the slider. Increase it when the reviews sit too close to the section before. |
| **Bottom** | Adds space below the slider. Increase it when the next section starts too abruptly.            |

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

| Setting          | Description                                                                                                  |
| ---------------- | ------------------------------------------------------------------------------------------------------------ |
| **Show divider** | Draws a thin line between this section and the one above it. Most useful when both share a background color. |

### Blocks in this section <a href="#blocks-in-this-section" id="blocks-in-this-section"></a>

| Block                                                                                                                | What it holds                                                                  |
| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
| [Group Block - Media](/velare/customize-your-pages/storytelling/featured-review-slider/group-block-media.md)         | The visual side of the slide: a background color, or an image that replaces it |
| [Block - Image](/velare/customize-your-pages/storytelling/featured-review-slider/group-block-media/block-image.md)   | The picture itself, with a mobile version and an optional link to a product    |
| [Group Block - Content](/velare/customize-your-pages/storytelling/featured-review-slider/group-block-content.md)     | The wording side of the slide, and how it is aligned inside the slide          |
| [Block - Quote](/velare/customize-your-pages/storytelling/featured-review-slider/group-block-content/block-quote.md) | The review text, star rating, and reviewer details                             |

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

* Each pair of media and content blocks becomes one slide, so the number of reviews shoppers can browse is the number of pairs you add.
* Arrows and dots only earn their place when there is more than one slide. With a single review, turning both off leaves a cleaner static banner.
* Reviews shown here are typed into the theme by you. They are not pulled from a reviews app, so they need updating by hand.

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

* [Storytelling](/velare/customize-your-pages/storytelling.md): the group this section belongs to
* [Testimonials](/velare/customize-your-pages/storytelling/testimonials.md): the alternative review section, better for a set of shorter quotes
* [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/featured-review-slider.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.