# Testimonials

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

![](/files/AB6BeVsALdKOzTNzHSf4)

## Set up section

***

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [insert dynamic content with metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}

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

Click the section to edit the general **section styles:** [Padding](/stiletto/sections/theme-sections/using-sections.md#section-padding) | [Top divider](/stiletto/sections/theme-sections/using-sections.md#section-top-divider) | [Animation](/stiletto/sections/theme-sections/using-sections.md#section-animations)

 

## Add testimonial blocks

***

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.

   ![](/files/tOHF9cG7TWZSPV5YgAH3)

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

</details>

## Section content and style

***

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>

&#x20;

`Click section to find settings`

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

&#x20;

## Section colors

***

Change the colors of the section background and text.

&#x20;

`Click section to find settings`

<table><thead><tr><th width="183">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Background</mark></td><td>Select the color for the background of the section.</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Select the color for all section text.</td></tr></tbody></table>

&#x20;

***

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


---

# Agent Instructions: 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.