# Testimonials

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

![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FteDuGFRIlySMpMj5sBVn%2Ftestimonials.jpeg?alt=media\&token=cd031b3d-cfcb-4a41-b4e2-6da423aa6b65)

## 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](https://help.fluorescent.co/stiletto/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/stiletto/general/adapting-your-theme/dynamic-content-with-metafields)
{% 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](https://help.fluorescent.co/stiletto/sections/using-sections#section-padding) | [Top divider](https://help.fluorescent.co/stiletto/sections/using-sections#section-top-divider) | [Animation](https://help.fluorescent.co/stiletto/sections/using-sections#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.

   ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-18e593ad0edf007db92b2db4471c455059562ccf%2Faspect-ratio.jpeg?alt=media)
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](https://help.fluorescent.co/stiletto/general/image-guide/theme-image-settings#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.

   ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-22765d66f3708b95b5907a71e6b24326594ad146%2Fshopify-content-drag-handles.jpeg?alt=media)

   > 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](https://help.fluorescent.co/stiletto/sections/theme-sections/quotes)\
> [Rich text](https://help.fluorescent.co/stiletto/sections/theme-sections/rich-text)