> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Shine Spotlight Quotes

**Theme:** Shine · **Section type:** All-template section

The Spotlight quotes section shows one large customer quote at a time in a slider. Each quote can have an avatar or brand logo, a star rating, the author's name, and a link to the product it's about.

> **Note:** You can add this section to any template, but not to the header or footer. Each section holds up to 5 quotes. The section comes with 3 quotes.
![Spotlight quotes section with a quote, avatar, and slider controls](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/shine-spotlight-quotes-1_1f9ht7r.jpg)

**What you can do**
- Add the section and your quotes
- Link a quote to a product
- Set up the slider controls
- See what customers see
- Change the spotlight quotes settings
- Fix common problems

---

## Add the section and your quotes
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Spotlight quotes**.
3. Optional: under **Quote**, enter a **Section subheading**, a **Section heading**, and a **Section description**.
4. Click a **Quote** block. Under **Quote content**, enter the **Quote** and the **Author**, and set a **Star rating** from 1 to 5.
5. Optional: under **Author avatar/ Brand logo**, select an **Image**.
6. To add more quotes, click **Add block** > **Quote**.
7. Click **Save**.

> **Tip:** The star rating shows only when **Show star rating** is on in the section settings. Turn it on if your quotes are product reviews.

> **Tip:** For a brand logo, use a wide PNG (about 280 × 80 px) and set **Image shape** to **Sharp**. For a face, use a square photo and **Rounded**.

## Link a quote to a product
1. Click a **Quote** block.
2. Under **Product**, select a **Product**.
3. Click **Save**.

The product's image, title, and price appear below the author. Customers click it to open the product page. If you don't select a product, nothing shows.

## Set up the slider controls
1. Click the **Spotlight quotes** section.
2. Under **Controller**, choose which controls to show: **Show pagination** (dots) and **Show navigation** (previous and next arrows).
3. Optional: select **Enable autoplay** and drag **Change slides every** to set the time, from 3 to 10 seconds.
4. Click **Save**.

## What customers see
- **One quote at a time:** the quote shows in large text with the quote symbol, the star rating, and the author.
- **Controls:** customers move between quotes with the arrows or the dots. With autoplay on, a pause and play button also appears. The controls show only when the section has 2 or more quotes.
- **Product:** if a quote is linked to a product, customers see its image, title, and price and can click through to the product page.
- **Mobile:** the layout stays the same, and the avatar or logo uses the mobile image width.
![Second quote on mobile after clicking the next arrow, with autoplay paused](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/shine-spotlight-quotes-2_17g8wqz.jpg)

## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color schemes | Sets the section colors. Color schemes are set in Theme settings > Colors. |

### Quote
| Setting | What it does |
| ---- | ---- |
| Section subheading | Adds a short line above the heading. |
| Section heading | Adds the section heading. To highlight words, put them between [ and ] and choose the style in Theme settings > Typography. |
| Heading size | Sets the heading size: H2, H3, H4, or H5. |
| Section description | Adds a short text below the heading. |
| Section heading alignment | Aligns the section heading Left or Center. The first setting applies to large screens, the second to mobile. |
| Content alignment | Aligns the quotes Left or Center. |
| Show quote symbol | Shows a large quote mark above each quote. |
| Show star rating | Shows the star rating of each quote. |
| Star rating | Sets the color of the stars. |
| Image shape | Shows the avatar or logo with Sharp corners or Rounded (circle). |

### Controller
| Setting | What it does |
| ---- | ---- |
| Show pagination | Shows dots under the quotes. |
| Show navigation | Shows previous and next arrows. |
| Enable autoplay | Moves to the next quote automatically and shows a pause and play button. |
| Change slides every | Sets the autoplay time, from 3 to 10 seconds. |

### Quote block
| Setting | What it does |
| ---- | ---- |
| Image | Adds an author avatar or a brand logo. A 280 × 80 px PNG is recommended. |
| Image width on large screen | Sets the image width on large screens, from 40 to 200 px. |
| Image width on mobile | Sets the image width on mobile, from 40 to 140 px. |
| Star rating | Sets the number of filled stars, from 1 to 5. |
| Quote | Sets the quote text. |
| Author | Sets the name shown next to the image. |
| Product | Links the quote to a product and shows its image, title, and price. Hidden if empty. |

## Troubleshooting
**I can't add another quote.**
Each section holds up to 5 quotes. To show more, add a second Spotlight quotes section, or use **Customer reviews**.

**The stars don't show.**
Turn on **Show star rating** in the section settings, under **Quote**.

**The arrows and dots are missing.**
Controls appear only with 2 or more quotes. Also check **Show pagination** and **Show navigation** under **Controller**.

**The logo looks too big on mobile.**
Lower **Image width on mobile** in the Quote block. It is separate from the large-screen width.

## Related articles
- [Shine Customer Reviews](https://doc.ecomx.co/en/article/shine-customer-reviews-1r41zq1/)
- [Shine Logo List](https://doc.ecomx.co/en/article/shine-logo-list-1gz7ds1/)
- [Shine Typography](https://doc.ecomx.co/en/article/shine-typography-6k6p3o/)