# Quotes

Use the **Quotes** section to prominently display rotating quotes about your store or products from customers, partners, or the media.

<div><figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FCbkeh91wyZLhJKDA6nWE%2Fquotes-1.png?alt=media&#x26;token=58104c16-685c-4630-a4b7-9f0131b75c2f" alt=""><figcaption></figcaption></figure> <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FnyYNJQun5bCWrzgQapXg%2Fquotes-4.png?alt=media&#x26;token=ebbe6f3d-f53d-48de-a110-e8d719d74540" alt=""><figcaption></figcaption></figure> <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2F6SWat6lm43Uyg1KYdKCO%2Fquotes-2.png?alt=media&#x26;token=29d62c15-6525-4aab-8cb0-25030bb696c4" alt=""><figcaption></figcaption></figure></div>

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](https://help.fluorescent.co/eclipse/pages/templates/using-templates) for different page layouts, or [show dynamic page content](https://help.fluorescent.co/eclipse/general/editing-themes/dynamic-content-with-metafields) in the same template.
{% endhint %}

## Set up section

***

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

### <mark style="color:$primary;">Section styles</mark>

Click the section to add a **section header** and change **section styles** for colors and spacing.

<table data-view="cards" data-full-width="false"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section header</strong></mark></td><td><a href="../overview/section-styles#section-header">#section-header</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="../overview/section-styles#color-scheme">#color-scheme</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Width and Padding</strong></mark></td><td><a href="../overview/section-styles#section-width">#section-width</a></td><td></td></tr></tbody></table>

## Add quote blocks

***

Add **Quote blocks** with quote text, author names, and logo images. You can adjust the font size of the quote text.

If you add more than one quote block, they will auto-rotate by default. To change the time between quotes or stop quotes from quote blocks from automating, see the **Quotes auto-rotate settings**.

Use the drag handles **`⋮⋮`** to re-order blocks.

<sub><mark style="color:$info;">Click Quote block to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="210">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Quote</mark></td><td>Enter the text of the quote.</td></tr><tr><td><mark style="color:blue;">Author</mark></td><td>Enter the name of the person being quoted.</td></tr><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload a small logo image above the quote text. This image might be the logo of a company or profile picture. We recommend a small square image between 70 to 200px.</td></tr><tr><td><mark style="color:blue;">Image size</mark></td><td>Set the maximum image width between 50 to 100px</td></tr><tr><td><mark style="color:blue;">Show rating</mark></td><td>Choose to show a star rating given by the author.</td></tr><tr><td><mark style="color:blue;">Rating</mark></td><td>Set the rating between 0 and 5 stars.</td></tr></tbody></table>

### Quote styles

***

Change the text size and font, alignment, and quotation mark icon.

&#x20;

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="257">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show quotation mark icon</mark></td><td>Display a quotation <code>"</code> icon above the quote text.</td></tr><tr><td><mark style="color:blue;">Quotation mark icon color</mark></td><td>Set the icon color to <strong>Accent</strong>, <strong>Text</strong>, or <strong>Light text</strong>.</td></tr><tr><td><mark style="color:blue;">Quote text size</mark></td><td>Change the text size from small to large (1 - 8).</td></tr><tr><td><mark style="color:blue;">Quote text line height</mark></td><td></td></tr><tr><td><mark style="color:blue;">Text alignment</mark></td><td>Align the quote content to the <strong>Left</strong>, <strong>Center</strong>, or <strong>Right</strong>.</td></tr><tr><td><mark style="color:blue;">Quote tag</mark></td><td>Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. Learn how to <a href="https://github.com/fluorescent/kb-horizon/blob/main/general/editing-themes/h1-heading-tags/README.md#replacing-default-h1-headings">replace default H1 headings</a>.<br><br>This option doesn't change the heading's appearance.</td></tr></tbody></table>

## Auto-rotate quotes

***

By default, multiple quotes will auto-rotate every 6 seconds.

**Set time between quotes**

Display each quote between **4** to **20** seconds. Quotes with more words may need more time for customers to read them.

**Turn off autoplay**

If you turn off autoplay, the Quotes section displays pagination dots to let customers click through at their own pace.

> Turning off autoplay can make your online store accessible to more customers, including people with disabilities. Learn more about [accessibility for themes](https://help.fluorescent.co/stiletto/general/editing-themes/accessibility) to help make the web inclusive and usable for everyone.