> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fetchski-attract.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Testimonials

> Show what your customers say, in a scrolling carousel, a grid or a staggered wall.

Show quotes from your happy customers as cards. Testimonials build trust right where visitors decide, such as on your home page or next to your prices.

 **Who can do this:** anyone who can edit the page. The **CSS** tab is for Admins and Owners.

![Parker's Testimonials section as visitors see it: eyebrow "Testimonials", heading "What our clients say", a scrolling row of Quote-led cards with a large quotation mark, and the pause button under the strip at its right end.](https://mintcdn.com/fetchski-attract-api/CiExJglj9hDwNWhX/images/cms/guides/sections/testimonials/guides-sections-testimonials-overview-light.png?fit=max\&auto=format\&n=CiExJglj9hDwNWhX\&q=85\&s=1386a8a3ae22054ff567cf995a574bf2)

A scrolling row of Quote-led testimonial cards.

## When to use it

* To show visitors that real customers love your business.
* To answer doubts next to your prices or a sign-up form.
* To build a full page of customer stories.

## Where the testimonials come from

You don't type quotes into the section. You add each testimonial once in the **Testimonials** manager, with the quote, the author's name and role, and an optional photo, star rating and link. Every Testimonials section then shows them, featured ones first.

To open the manager, press ⌘K (Ctrl+K on Windows) and choose **Testimonials** under **Manage**. See [Testimonials](https://docs.fetchski-attract.com/guides/content/testimonials.md) for every option.

## Add it to a page

**1. Open the page**

Sign in, open the page on your site, and choose **Edit** in the edit bar at the top.

**2. Find the spot**

Select the section next to where the new one should go. A round **+** button appears on its top and bottom edges. On an empty page, choose **Add Content** in the middle.

**3. Choose the section**

The **Add Content** menu opens with its groups. Choose the section, then select it and choose **Edit** in its side toolbar to make it yours.

For the full walkthrough, see [Add, move and remove sections](https://docs.fetchski-attract.com/guides/build-pages/add-move-remove-sections.md).

Publish at least one testimonial first. With none to show, the section is hidden, even while you edit.

Then choose **Add Content** → **Social proof** → **Testimonials**. The section fills in right away with the testimonials you have published.

## What you can change

Select the Testimonials section on the page and choose **Edit**. The editor opens beside the page, so you see each change as you make it. It has 7 tabs.

Your changes go into the page's draft. Visitors see them once the page is published with **Update** in the edit bar (**Publish** on a page never published).

![The Testimonials editor open on the Testimonials tab beside the live section, with the tab strip ringed (Header, Testimonials, Card text, Background, Fonts, Button, CSS), Scroll direction and Gap between cards, and the Card layout list ringed (Quote-led, Accent bar, Classic).](https://mintcdn.com/fetchski-attract-api/CiExJglj9hDwNWhX/images/cms/guides/sections/testimonials/guides-sections-testimonials-editor-light.png?fit=max\&auto=format\&n=CiExJglj9hDwNWhX\&q=85\&s=a0901eb1a32ef805ed03db933ce61cdc)

The Testimonials editor, with the section updating beside it.

> [accordion] Header
>
> The words above the cards. Each part is optional.
>
> * **Eyebrow**: a short line above the heading, such as "Testimonials".
> * **Heading**: the section's title, such as "What our clients say". Leave it empty to hide the heading. To show just the cards, clear the eyebrow and intro line too.
> * **Intro line**: one short sentence under the heading.
> * **Header alignment**: **Center** or **Left**.
>
> Each part also has a weight, and the eyebrow and intro have a size. Each color can be set separately for the dark and light themes.

> [accordion] Testimonials
>
> Which testimonials show, how they're arranged, and how each card looks.
>
> **Which testimonials show**
>
> * **Featured testimonials only**: show only the testimonials marked **Featured** in the **Testimonials** manager.
> * **Maximum testimonials**: the most to show, from 1 to 30. The default is 6.
>
> **Section layout**
>
> * **Carousel (animated marquee)**: a row of cards that scrolls on its own. Choose its **Scroll speed** and **Scroll direction**.
> * **Grid (multi-row)**: a tidy grid.
> * **Masonry**: a staggered wall where each card fits its quote's length.
>
> For the grid and masonry, set **Columns** to **Auto (fit to width)**, or to 2, 3 or 4. **Gap between cards** can be **Tight**, **Normal** or **Roomy**.
>
> **Card layout**
>
> * **Quote-led (quotation mark)**: a large quotation mark over the quote, with the author below.
> * **Accent bar**: the quote beside a bold bar of color.
> * **Classic (author on top)**: the author's photo and name first, then the quote.
>
> **Show decorative quotation mark** turns the large mark on or off for the first 2 layouts.
>
> **What each card shows**
>
> * **Show author photo**: the author's photo, or their initial when they have none. Turn it off to hide the photo spot entirely.
> * **Show author role / context**: the line under the author's name, such as "Puppy parent since 2023".
> * **Show star rating**: each testimonial's stars. It's off by default.
> * **Link label**: the text for a testimonial's link, such as "Read the full story". It shows only on testimonials that have a **Source link**.
>
> **Card look**
>
> * **Card style** and **Hover effect**: the card's frame and what it does on hover. The default is **Spine — accent rail** with **Sheen — a light sweeps across**. See [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md).
> * **Card width**: **Narrow**, **Normal** or **Wide**.
> * **Card height**: **Auto (fit content)**, **Comfortable** or **Tall**. Taller cards give a carousel or grid an even look. Masonry ignores this.
> * **Card content alignment**: **Left**, **Center** or **Right**.
> * **Star color** and **Accent**: the stars, and the color of the quotation mark, the accent bar and the initials. Leave **Star color** empty for warm amber stars, and **Accent** empty to use your site's accent color.

> [accordion] Card text
>
> The size, weight and color of the author's **Name**, their **Role** and the **Quote**.
>
> **Quote length** caps each quote at 4, 6, 8 or 12 lines, so one long quote doesn't stretch its card. Visitors can't open a cut-off quote to read the rest. The default is 8 lines. Choose **Full text (no limit)** to show every word.

> [accordion] Background
>
> Give the section its own background color, from your site's palette or a custom color. See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md).

> [accordion] Fonts
>
> Use a different typeface for parts of this section only, such as the quotes. Leave it empty to use the page's fonts, which normally come from **Site design** → **Typography**. See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md).

> [accordion] Button
>
> One optional button below the cards, such as "Read more stories". It starts empty and shows only once it has both a label and a link. See [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md).

> [accordion] CSS
>
> Custom styles for this section only. Admins and Owners can change this tab. See [Custom CSS](https://docs.fetchski-attract.com/guides/site-design/custom-css.md).

## Looks you can make

![A Masonry wall of Accent bar cards in 3 columns, each with stars on, quotes of different lengths.](https://mintcdn.com/fetchski-attract-api/eWBaY8R4bYknXF5D/images/cms/guides/sections/testimonials/guides-sections-testimonials-masonry-light.png?fit=max\&auto=format\&n=eWBaY8R4bYknXF5D\&q=85\&s=325de846f68ab8c5fde77eea07f3b7e4)

A Masonry wall fits quotes of every length.

**A wall of praise.** Set **Section layout** to **Masonry**, choose **Accent bar** cards, and turn on **Show star rating**.

![A 2-across grid of Classic cards, centered, Wide, author photo and name on top, then the quote.](https://mintcdn.com/fetchski-attract-api/eWBaY8R4bYknXF5D/images/cms/guides/sections/testimonials/guides-sections-testimonials-classic-grid-light.png?fit=max\&auto=format\&n=eWBaY8R4bYknXF5D\&q=85\&s=b5583262b7f3f9cb9338b71c94a73134)

Classic cards lead with the person.

**A few hand-picked stories.** Turn on **Featured testimonials only**, then choose **Grid (multi-row)** with 2 **Columns** and **Classic (author on top)** cards.

![A slow carousel of Quote-led cards with author photos off and Tall cards, on a soft accent background.](https://mintcdn.com/fetchski-attract-api/eWBaY8R4bYknXF5D/images/cms/guides/sections/testimonials/guides-sections-testimonials-quote-only-light.png?fit=max\&auto=format\&n=eWBaY8R4bYknXF5D\&q=85\&s=97f0b7355180fea9a3860f7bbb1f1f80)

Without photos, the words take center stage.

**Let the words speak.** Turn off **Show author photo**, set **Card height** to **Tall**, and set **Scroll speed** to **Slow**.

## Good to know

* **The carousel needs animations on.** If animations are turned off for the whole site in [Motion](https://docs.fetchski-attract.com/guides/site-design/motion.md), the carousel shows as a grid instead.
* **Moving rows can be paused.** The carousel always gets a pause button. Visitors who prefer less motion see a still row they can scroll by hand.
* **No testimonials, no section.** With no testimonials to show, the section stays hidden, even while you edit. If a setting you just changed makes it vanish, use the undo arrow at the left of the edit bar, or publish a testimonial that matches.
* **Drafts show while you edit.** You see testimonials you haven't published yet. Visitors see only published ones.
* **Where it fits.** Testimonials is a full-width section. It isn't offered inside columns or on blog posts.
* **Use real words from real customers**, with their permission.

## Appearance options

Most sections also share a few tabs that work the same everywhere:

* **Background**: set the color behind the section, separately for the dark and light themes.
* **Fonts**: use a different typeface for parts of this section only.
* **CSS**: add custom styles to this section. Admins and Owners can change it.

See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md) for every option.

## Related

> [card] [Manage testimonials](https://docs.fetchski-attract.com/guides/content/testimonials.md)
>
> add quotes, photos and ratings.

> [card] [Display Google reviews on a page](https://docs.fetchski-attract.com/guides/sections/google-reviews.md)
>
> show your Google reviews instead.

> [card] [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md)
>
> every card style and hover effect.

> [card] [Motion](https://docs.fetchski-attract.com/guides/site-design/motion.md)
>
> turn site animations on or off.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.