# Quotes

{% hint style="danger" %} <mark style="color:red;">Theme retirement</mark> | Context is no longer available on the Shopify theme store. **Theme support and updates for current users will end after May 18, 2024**. [Learn more here](https://help.fluorescent.co/context/readme/theme-retirement).
{% endhint %}

The **Quotes** section lets you feature quotes from customers or press. Each quote can have an optional icon associated with it – perfect for an avatar or a logo.

## 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/context/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/context/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://help.fluorescent.co/context/general/editing-themes/using-templates).
2. Under **Template**, click **(+) Add section** and select **Quotes**.
3. Click and hold the drag-and-drop handles **`⋮⋮`** to re-order your sections.

</details>

## Add quote blocks

Add multiple **Quote blocks** with reviews from your customers and partners.

<details>

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

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

1. Click (**+) Add Quote** and/or click on the **Quote** block you wish to edit.
2. Add a short few sentences to the **Quote** text.
3. Add the **Author** name of the person quoted.
4. Select or upload an **Author image** to display below the author name.

   > Note that if *all* your quotes in a section have images, they will be displayed as a left-to-right scrollable carousel on mobile devices.
5. (*Optional*.) Click and hold the drag handles **`⋮⋮`** to rearrange the blocks:

   ![](https://3096289102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fvbp0IBkqpivnJ0UBSwsh%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.
6. Click **Save**.

</details>

## Section style and layout

Change the overall style and layout of the section, including the **Author images**, and set the **time between quotes** when they autorotate.

<details>

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

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

1. Click the **Quotes** section to open the settings.
2. Choose the **Time between quotes**, in seconds.

   > Choose between *2* and *10* seconds between quotes.
3. Use the **Author image width** slider to choose how wide the icons should be. Choose between 40 pixels and 150 pixels.

   > This setting applies to the entire Quotes section, so that each block is uniform.

   ![](https://3096289102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fvbp0IBkqpivnJ0UBSwsh%2Fuploads%2Fgit-blob-7dc7a914cd91e67bde9e77538bd2e55a047b7ee3%2Ftestimonial-wide-width.jpeg?alt=media)
4. Select an **Image shape** for all author images. Either **Round**, **Square**, or **Natural** shape.

   > The **Natural** option display the original shape of your uploaded image.
5. (*Optional*.) Choose to enable the **Outline section** style for an alternate look.

   > This option removes the section background and adds a border around the section, which uses your store's border color setting.
6. Click **Save**.

</details>

## Settings reference

Click the **Quotes blocks** to find the following settings.

| Setting | Description                                                                                    |
| ------- | ---------------------------------------------------------------------------------------------- |
| Image   | Select or upload an image of the person being quoted. We recommend a 160px x 160px .png image. |
| Quote   | Add the quote text. Use the formatting buttons to add text styles, links, or lists.            |
| Author  | Add the name of the person being quoted.                                                       |

Click the **Quotes** section to find the following settings.

| Setting             | Description                                                                                                                                       |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| Time between quotes | The number of seconds each quote is shown before rotating. Choose between 2 seconds and 10 seconds.                                               |
| Author image width  | Choose how wide each icon should be. Choose between 40 pixels and 150 pixels.                                                                     |
| Image shape         | Choose to display all author images with a Round, Square, or Natural shape. The Natural option display the original shape of your uploaded image. |
| Outline section     | Enable this option to remove the section background and add a border around the section, which uses your store's border color setting.            |

> **Re**

<br>

***

> **Related links**\
> \\