# Testimonials

The **Testimonials** section displays quotes from customers, partners, or others in a carousel with feature images and links. Personalize each testimonial with a reviewer photo and their star rating of a product.

<figure><img src="https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2FHqXu2vYr6R8jjhaRJw4C%2Fimage.png?alt=media&#x26;token=c23aafbd-b406-44e0-be68-d33b0c0a4464" alt=""><figcaption></figcaption></figure>

## Set up section

Add this section to any template (except Checkout) and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.

{% 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/lorenza/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [use metafields and dynamic sources](https://help.fluorescent.co/lorenza/general/adapting-your-theme/dynamic-content-with-metafields).
{% endhint %}

<details>

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

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

1. Select a **Template** to edit from the dropdown menu in the top bar.

   > Learn how to use templates in our [Templates guide](https://github.com/fluorescent/kb-lorenza/blob/main/general/editing-theme/using-templates.md).
2. Under **Template**, click **(+) Add section** and select **Testimonials**.
3. Click and hold the drag-and-drop handles **`⋮⋮`** to re-order your sections.

</details>

## Add testimonial blocks

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

<details>

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

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

1. Click (**+) Add Testimonial** and/or click on the **Testimonial** block you wish to edit.

   ![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-dc0c8c21a10915b3698fd8e02b098badfc7f2580%2Ftestimonials-block-settings.jpeg?alt=media)
2. Under **Testimonial Image**, click **Select image** to upload and select your image file. This image will display above the testimonial content.

   > Your image will appear in its original orientation by default. There are no required image dimensions but a **Square (1:1)** orientation is ideal.

   > See our article for image recommendations for Lorenza to learn more.
3. Add a **Product link**.

   > This lets customers click on the image to go to the link you've selected.
4. Add a **Star rating**.

   > Choose a star rating for the testimonials, between *0* and *5* stars.
5. Add a **Reviewer image** and a **Reviewer name** for the testimonial.

   > We recommend at 160px by 160px PNG image file.
6. Add the **Review** text.

   > We recommend keeping this to just a few sentences long.
7. (*Optional*.) Click and hold the drag handles **`⋮⋮`** to rearrange the blocks:

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

   > Click **Remove block** in the block settings to delete a block.

   > Click the **Eye icon** to hide or unhide a block.
8. 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;">STEPS</mark></summary>

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

1. Click on the **Testimonials** section to open the section settings.

   ![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-0fcb1d15c8fa5419c7b4b5db3e6a1ca697ace511%2Ftestimonials-section-settings.jpeg?alt=media)
2. (*Optional*.) Use the **Section style** dropdown to use **Contrast** colors.

   > The **Contrast** style uses the contrast colors in your **Theme Settings**.
3. Choose whether to **Enable animation** to show visual effects when scrolling, hovering, or interacting with the section.
4. Select a **Text position** for the section headings, either above or beside the testimonial blocks.

   > Choose between *Top left*, *Top center*, *Top right*, *Middle left* or *Middle right* options.

   ![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-45e899aefef587752c20bd29e28186531927f2f9%2Ftestimonials-text-position-middle-right.jpeg?alt=media)
5. Select the number of **Columns** of testimonials to display at once.

   > Choose between *2* and *4* columns. If the **Middle left** or **Middle right** text positions are used, the section headings display as one of the columns.

   On mobile, only one column displays at once.
6. To make your images a uniform shape and size, select the **Image aspect ratio** to crop your images to **Square**, **Landscape**, or **Portrait**.

   > The default **Natural** setting will display the original orientation of your image.

   ![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-18e593ad0edf007db92b2db4471c455059562ccf%2Faspect-ratio.jpeg?alt=media)
7. Change the text for the **Small heading**, **Heading**, and **Subheading**.
8. Add a **Link** and **Link text** to display a call-to-action button.

   > The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read ["What is a Call to Action?"](https://www.thebalancesmb.com/call-to-action-1794380)

   ![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-6cc63364d9cfd0e48ef3c1a12cb27c152345450a%2Ftestimonials-link.jpeg?alt=media)

   > To learn how to change the style and shape of buttons across your site, see our [Buttons guide](https://help.fluorescent.co/lorenza/theme-styles/buttons).
9. Use the **Max width of text** slider to control the maximum width of the headings.

   > Use this setting to create a clean visual shape for your text and avoid unwanted line breaks.
10. Click **Save**..

</details>

## Settings reference

Click on the section to find the following settings:

| Setting            | Description                                                                                                                                                                                                                                                                                             |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Small heading      | Enter text to display as a small heading above the main heading.                                                                                                                                                                                                                                        |
| Heading            | Enter heading text to display as a section title.                                                                                                                                                                                                                                                       |
| Subheading         | Enter subheading text to display below the heading. Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's [Rich text editor manual](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#format-text-with-the-rich-text-editor). |
| Link text          | Change the "Shop now" text for your call-to-action button. The most effective button labels ask your customers to do something (e.g. Get started, Join us, Shop now).                                                                                                                                   |
| Style              | Use the Default or Contrast section style.                                                                                                                                                                                                                                                              |
| Text position      | Display the header and button either above or beside the gallery items.                                                                                                                                                                                                                                 |
| Columns            | Use the slider to choose how many items should be displayed side by side. Choose between 2 and 4.                                                                                                                                                                                                       |
| Image aspect ratio | Crop the shape of your images to Square, Landscape, or Portrait. Choose Natural to display the original image shape.                                                                                                                                                                                    |
| Max width of text  | Use the slider to control the maximum width and line breaks of the headings.                                                                                                                                                                                                                            |

Click on the **Testimonial blocks** to find the following settings:

| Setting        | Description                                                                                                                         |
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| Image          | There are no required images dimensions. We recommend images with a minimum width of 2050px for optimal quality across all devices. |
| Product link   | Add a link to a product or page on your store.                                                                                      |
| Star rating    | Add a star rating to the testimonial, between 0 and 5 stars.                                                                        |
| Reviewer image | Add an image to be used as the reviewer's profile picture.                                                                          |
| Reviewer name  | Add the name of the person being quoted.                                                                                            |
| Review         | Add the reviewer's quote for the testimonial                                                                                        |

\\

***

> **Related links**
>
> [Quotes](https://help.fluorescent.co/lorenza/sections/theme-sections/quotes)\
> [Rich text](https://help.fluorescent.co/lorenza/sections/theme-sections/rich-text)
