> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/purity-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/purity-theme/group-sections/storytelling/testimonial-images.md).

# Testimonial images

The **Testimonial images** section pairs each customer review with a supporting photo in a carousel, helping you build trust and show real results from real buyers.

Example: <https://purity.nextsky.co/products/anti-aging-serum>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FvndHI3guIFp4LtDt6VNx%2Fimage.png?alt=media&amp;token=b319eb37-dbab-475a-a517-c3b0fca3e879" alt=""><figcaption></figcaption></figure>

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

**General**

| Setting           | Description                                                                                                                                                                                                                                                                                                                             |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Section width** | <p>3 options for the container width:</p><ul><li><strong>Fixed width</strong>: matches your page content width in <strong>Theme settings -> Layout</strong>.</li><li><strong>Stretch width</strong>: spans the width regardless of screen size.</li><li><strong>Full width</strong>: takes up the entire width of the screen.</li></ul> |
| **Color scheme**  | Select colors from **Theme settings -> Colors**.                                                                                                                                                                                                                                                                                        |

**Section header**

| Setting                                | Description                                                                                                                                                     |
| -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Subheading**                         | Short line of text shown above the heading.                                                                                                                     |
| **Heading**                            | The main title of the section.                                                                                                                                  |
| **Enable heading underline animation** | Draws an animated underline under the words you set to italic in the heading. Use the Italic (I) button in the editor to mark the words.                        |
| **Underline style**                    | <p>3 underline styles:</p><ul><li><strong>Simple underline</strong></li><li><strong>Curve stroke</strong></li><li><strong>Squiggle underline</strong></li></ul> |
| **Underline color**                    | The color of the animated underline.                                                                                                                            |
| **Description**                        | Supporting text shown below the heading.                                                                                                                        |
| **Heading size**                       | <p>3 sizes for the heading:</p><ul><li><strong>Heading 1</strong></li><li><strong>Heading 2</strong></li><li><strong>Heading 3</strong></li></ul>               |
| **Alignment**                          | Aligns the header content **Left**, **Center**, or **Right**.                                                                                                   |

**Content settings**

| Setting                        | Description                                                                                                               |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------- |
| **Desktop image position**     | Places the review image to the **Left** or **Right** of the text on desktop. The image is shown above the text on mobile. |
| **Background color**           | Background color of each review card.                                                                                     |
| **Desktop vertical alignment** | Aligns content **Top**, **Middle**, or **Bottom** within the card on desktop.                                             |
| **Content alignment**          | Aligns the review text **Left**, **Center**, or **Right**.                                                                |
| **Padding inline**             | Left and right spacing inside the card (0–100px). Automatically optimized for mobile.                                     |
| **Padding block**              | Top and bottom spacing inside the card (0–100px). Automatically optimized for mobile.                                     |
| **Hide image on mobile**       | Hides the review image on mobile devices.                                                                                 |
| **Show quote icon**            | Shows a quotation mark icon above the review text.                                                                        |
| **Show author image**          | Shows the reviewer's avatar image.                                                                                        |
| **Show author name**           | Shows the reviewer's name.                                                                                                |
| **Show verified buyer**        | Shows a "verified buyer" label next to the reviewer.                                                                      |
| **Show rating**                | Shows the star rating of each review.                                                                                     |
| **Rating color**               | The color of the rating stars (visible when **Show rating** is on).                                                       |

**Carousel settings**

| Setting                 | Description                                                                                                                                                                                                       |
| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Show navigation**     | Displays the next and back arrows for the carousel.                                                                                                                                                               |
| **Show pagination**     | Displays the pagination indicator for the carousel.                                                                                                                                                               |
| **Pagination style**    | Choose between a **Progress bar** or **Dots** (visible when **Show pagination** is on).                                                                                                                           |
| **Auto-change slide**   | When enabled, the carousel advances automatically.                                                                                                                                                                |
| **Change slides every** | How long each slide stays before advancing (2–10s, visible when **Auto-change slide** is on).                                                                                                                     |
| **Image ratio**         | <p>Aspect ratio of the review images:</p><ul><li><strong>Adapt to image</strong></li><li><strong>Square (1:1)</strong></li><li><strong>Portrait (3:4)</strong></li><li><strong>Landscape (4:3)</strong></li></ul> |

**Section padding**

| Setting    | Description                                            |
| ---------- | ------------------------------------------------------ |
| **Top**    | Customize the top padding of the section (0–100px).    |
| **Bottom** | Customize the bottom padding of the section (0–100px). |

**Section divider**

| Setting          | Description                                                              |
| ---------------- | ------------------------------------------------------------------------ |
| **Show divider** | Displays a dividing line to separate this section from the previous one. |

#### Block settings <a href="#block-settings" id="block-settings"></a>

Add one **Review** block per testimonial.

| Setting          | Description                                             |
| ---------------- | ------------------------------------------------------- |
| **Image**        | The supporting image shown with the review.             |
| **Rating star**  | The star rating for this review (1–5, in steps of 0.5). |
| **Author name**  | The name of the reviewer.                               |
| **Author image** | The reviewer's avatar image.                            |
| **Summary**      | A short summary or headline for the review.             |
| **Quote**        | The full review text.                                   |