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