> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/sections/theme-sections/testimonials.md).

# Testimonials

The **Testimonials** section displays rotating quotes from customers for your products with feature images and links.

![](/files/AB6BeVsALdKOzTNzHSf4)

***

{% columns %}
{% column width="58.333333333333336%" %}

#### Set up section

In the editor side panel, click **(+) Add section** and select **Testimonials**. Use the drag handles **`⋮⋮`** to re-order sections.

Click the section to edit general **section styles**, like colors, width, and padding.

{% hint style="info" %}
Editing templates change all pages that use that template. For unique pages, [use new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [dynamic metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}
{% endcolumn %}

{% column width="41.666666666666664%" %}

#### <mark style="color:$info;">Section style guides</mark>

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section colors</strong></mark></td><td></td><td><a href="/pages/ugnuWgDX3bpXquEJrAeA#color-schemes">/pages/ugnuWgDX3bpXquEJrAeA#color-schemes</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section width</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-width">/pages/nxNcI6zBaofEs4kObMMf#section-width</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Padding and divider</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-padding">/pages/nxNcI6zBaofEs4kObMMf#section-padding</a></td></tr></tbody></table>
{% endcolumn %}
{% endcolumns %}

***

<h2 align="center">Add testimonial blocks</h2>

***

Add as many **Testimonial** blocks as you like, each with their own feature image.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click (**+) Add Testimonial** and/or click on the **Testimonial** block you wish to edit.
2. Click **Select product** to choose which product to feature in the testimonial.
3. Under **Custom Image**, click **Select image** to display an image instead of the product image.
4. Select an **Image aspect ratio** to crop your image to **Square**, **Landscape**, or **Portrait**.

   > The **Natural** setting displays the original shape of your image.

   ![](/files/RFmWGT0O4EPQmXP8F5si)
5. Use **Image focal points** to specify the main focus of your images. The focal point of your image will remain centered and within frame when your site adapts to different screen sizes.

   > See our [image guide](/stiletto/general/image-guide/theme-image-settings.md#image-focal-point) to learn more about specifying a focal point for an image used within a section or for an uploaded image file when used anywhere on your site.
6. Add a **Star rating**.

   > Choose a star rating for the testimonials, between *0* and *5* stars.
7. Add the **Quote** text.

   > We recommend keeping this to just a few sentences long.
8. Enter the name of the **Author** or source of the quote.
9. (*Optional*.) Use the drag and drop handles **`⋮⋮`** to change the order of the testimonial blocks.

   <img src="/files/tOHF9cG7TWZSPV5YgAH3" alt="" width="302">

   > Click the **Remove block** button in the block settings to remove a testimonial block.
10. Click **Save**.

</details>

### <mark style="color:$primary;">Content styles</mark>

Change the overall style and layout of the section, along with headings and links.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click the **Testimonials** section to open the settings.
2. Set the **Product image size** to **Small**, **Medium**, or **Large**.
3. Set the **Quote font** to the **Heading** or **Body** font as set in the [theme settings](https://fluorescent.co/help/stiletto/theme-settings-colors).
4. Change the **Background** and **Text color**.

   > We recommend using WebAIM's [contrast checker](https://webaim.org/resources/contrastchecker/) when matching colors to make sure your text is clear and readable for everyone.
5. Choose to **Enable animation** to show visual effects when scrolling, hovering, or interacting with the section.

   > Learn more about [Section animations](https://fluorescent.co/help/stiletto/theme-settings-animation).
6. Choose to display a **Top divider** that separates sections with a **Solid** line.

   > The Top divider uses the color of **Lines and borders** set in the [Theme settings](https://fluorescent.co/help/stiletto/theme-settings-colors).
7. Select a **Padding** option to change the spacing between sections. Choose between **Top and bottom**, **Top only**, **Bottom only**, or set it to **None**.
8. Click **Save**.

</details>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="177">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Product image size</mark></td><td>Set the size of all product image to either <strong>Small</strong>, <strong>Medium</strong>, or <strong>Large</strong>.</td></tr><tr><td><mark style="color:blue;">Quote font</mark></td><td>Choose to use the <strong>Heading</strong> or <strong>Body</strong> font from your theme settings.</td></tr></tbody></table>

***

> **Related links**
>
> [Quotes](/stiletto/sections/theme-sections/quotes.md)\
> [Rich text](/stiletto/sections/theme-sections/rich-text.md)


---

# 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:

```
GET https://help.fluorescent.co/stiletto/sections/theme-sections/testimonials.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.