# 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="/files/edTJ40qrjwT4RmKfexNH" alt=""><figcaption></figcaption></figure> <figure><img src="/files/i06aPm9B48jLrtjHGrgA" alt=""><figcaption></figcaption></figure> <figure><img src="/files/7xYWIxTBDjLokjoYt4vC" alt=""><figcaption></figcaption></figure></div>

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](/eclipse/pages/templates/using-templates.md) for different page layouts, or [show dynamic page content](/eclipse/general/editing-themes/dynamic-content-with-metafields.md) 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="/pages/3wq6hFMr3k1BDOHIgjqZ#section-header">/pages/3wq6hFMr3k1BDOHIgjqZ#section-header</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme">/pages/3wq6hFMr3k1BDOHIgjqZ#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="/pages/3wq6hFMr3k1BDOHIgjqZ#section-width">/pages/3wq6hFMr3k1BDOHIgjqZ#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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/eclipse/sections/rich-text.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.