> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/blocks/storytelling/testimonial.md).

# Testimonial

Display customer reviews as testimonial cards, standalone testimonial layouts, grids, and carousels.

The **Testimonial** blocks present customer quotes, ratings, author details, product mentions, and supporting media.

Use **Testimonials** for a built-in grid or carousel of review cards, and use **Testimonial banner** for a richer testimonial layout that can stand alone or sit inside compatible layout blocks such as Group, Tabs, or Custom list.

### 1. What you can do

* Show multiple customer reviews in a grid or carousel
* Build a single testimonial with media, review content, author information, ratings, and product callouts
* Choose desktop and mobile layouts independently
* Control review card style, color scheme, padding, height, and spacing
* Add author avatars, bios, star ratings, and score labels
* Use image or video media in testimonial banners

### 2. Understanding the Testimonial structure

There are two ways to add testimonials, depending on the kind of story you want to show:

<table><thead><tr><th width="128.05078125">Block</th><th width="215.2890625">Best for</th><th width="389.81640625">How it works</th></tr></thead><tbody><tr><td><strong>Testimonial banner</strong></td><td>Highlighting richer reviews with more visual detail, either one at a time or inside compatible layout blocks.</td><td>Combine a media banner, quote text, author details, rating, and optional product callout in one composed testimonial item.</td></tr><tr><td><strong>Testimonials</strong></td><td>Showing several customer reviews together.</td><td>Add one <strong>Testimonial card</strong> for each review, then display the cards as a grid or carousel.</td></tr></tbody></table>

Inside each testimonial block, the Theme Editor shows smaller blocks for the parts of the review. For example, a listing contains **Testimonial card** blocks, while a **Testimonial banner** can contain a **Banner** and **Review group**.

These inner blocks are specific to testimonials. Configure them inside the testimonial block where they appear; they are not documented as separate reusable blocks.

### 3. Adding testimonials

#### 3.1. Add a Testimonial banner

{% stepper %}
{% step %}
**Open a compatible section**

In the Theme Editor (Customize), open a compatible section or container.
{% endstep %}

{% step %}
**Add a testimonial block**

Click **Add block**, then select **Testimonial banner**.
{% endstep %}

{% step %}
**Add testimonial content blocks**

Add or edit the **Banner** and **Review group** blocks inside the testimonial.
{% endstep %}

{% step %}
**Build the review content**

Add review text, author information, rating, and optional product callout content.
{% endstep %}

{% step %}
**Adjust the testimonial settings**

Control the size, layout, color scheme, and spacing.
{% endstep %}

{% step %}
**Create richer compositions**

To create richer testimonial compositions, add one or more **Testimonial banner** blocks inside compatible layout blocks such as **Group**, **Custom tab**, or **Custom list**.
{% endstep %}

{% step %}
**Preview the result**

Check how it looks on desktop and mobile.
{% endstep %}

{% step %}
**Save your changes**

Click **Save**.
{% endstep %}
{% endstepper %}

#### 3.2. Add a Testimonials

{% stepper %}
{% step %}
**Open a compatible section**

In the Theme Editor (Customize), open a compatible section or container.
{% endstep %}

{% step %}
**Add a testimonial list block**

Click **Add block**, then select **Testimonials**.
{% endstep %}

{% step %}
**Add testimonial cards**

Add or edit **Testimonial card** blocks inside the list.
{% endstep %}

{% step %}
**Adjust the settings**

Control desktop, mobile, card, typography, rating, and spacing settings.
{% endstep %}

{% step %}
**Preview the result**

Check how it looks on desktop and mobile.
{% endstep %}

{% step %}
**Save your changes**

Click **Save**.
{% endstep %}
{% endstepper %}

### 4. Testimonial banner settings

The **Testimonial banner** parent controls the overall frame and layout for one richer testimonial composition. Use one item as a standalone feature, or add multiple items to compatible layout blocks such as [Group](/arctos-theme/blocks/layout/group.md), [Custom tab](/arctos-theme/blocks/layout/custom-tab.md), or [Custom list](/arctos-theme/blocks/layout/custom-list.md) when each testimonial needs its own media, quote panel, author information, or rating.

Structure:

```
Testimonial banner
|-- Banner
`-- Review group
    |-- Author and rating group
    |   |-- Author
    |   `-- Rating
    `-- Text
```

#### 4.1. Testimonial banner

The **Testimonial banner** layer controls the outer frame for the whole testimonial composition. Use these settings when the full item needs a specific width, height, color context, spacing, or shared arrangement for the banner and review panel.

<details>

<summary>Size</summary>

Size controls set the outer dimensions for the full Testimonial banner.

<table><thead><tr><th width="109.55078125">Setting</th><th width="119.72265625">Options</th><th width="453.51953125">What it does</th></tr></thead><tbody><tr><td><strong>Width</strong></td><td><ul><li>Fit</li><li>Fill</li><li>Custom</li></ul></td><td><ul><li><strong>Fit</strong> makes the Testimonial banner only as wide as its content needs.</li><li><strong>Fill</strong> stretches the item to fill the available width.</li><li><strong>Custom</strong> lets you set an exact width in pixels or as a percentage for a more controlled composition.</li></ul></td></tr><tr><td><strong>Height</strong></td><td><ul><li>Fit</li><li>Fill</li><li>Custom</li></ul></td><td><ul><li><strong>Fit</strong> lets the item height follow its banner and review content.</li><li><strong>Fill</strong> stretches the item to fill the available height.</li><li><strong>Custom</strong> creates a consistent feature area with a precise height.</li></ul></td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turning this <strong>On</strong> lets you set separate width and height controls for mobile screens.</td></tr></tbody></table>

</details>

<details>

<summary>Inner content layout</summary>

Inner content layout arranges the [Banner](#id-4.2.-testimonial-banner) and [Review group](#id-4.3.-review-group) inside the item. These controls follow the same layout pattern as Group, including direction (row or column), alignment, position, baseline alignment, gap, and mobile overrides.

Use these settings when the banner and review panel should move together as one composed testimonial. For detailed behavior and option guidance, see [Group](/arctos-theme/blocks/layout/group.md).

</details>

<details>

<summary>Style</summary>

Style controls how the full Testimonial banner inherits or overrides its color context. Use these settings when the entire item should match its parent layout block or stand out with a separate color scheme.

<table><thead><tr><th width="99.875">Setting</th><th width="99.9765625">Options</th><th width="482.921875">What it does</th></tr></thead><tbody><tr><td><strong>Inherit color scheme</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td><ul><li>Turn this <strong>On</strong> to match the Testimonial banner's colors to the section, block, or parent it sits in.</li><li>Turn it <strong>Off</strong> to choose a unique color scheme that makes the Testimonial banner stand out.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>Color scheme picker</td><td><p>Use the picker to select a color scheme set in <a href="/arctos-theme/theme-settings/colors.md">Theme settings > Colors</a>.</p><p><em>Only available when <strong>Inherit color scheme</strong> is off.</em></p></td></tr></tbody></table>

</details>

<details>

<summary>Spacing</summary>

<table><thead><tr><th width="113.93359375">Setting</th><th width="192.8046875">Options</th><th width="372.75390625">What it does</th></tr></thead><tbody><tr><td><strong>Padding</strong></td><td>Custom value per side</td><td>Sets the spacing between the block and its surrounding edge.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Set separate padding values for mobile.</td></tr></tbody></table>

</details>

#### 4.2. Banner

The **Banner** adds image or uploaded video media to a single Testimonial banner.

<details>

<summary>Banner settings</summary>

Use the banner settings to choose an image or uploaded video file, adjust the media frame, add optional parallax, apply overlay or hover treatments, control spacing, and make the banner clickable when the testimonial should lead customers to a product, collection, page, or campaign.

These controls follow the same behavior as [Banner](/arctos-theme/blocks/media/banner.md), with shared media behavior from [Image](/arctos-theme/blocks/basic/image.md) and [Video](/arctos-theme/blocks/basic/video.md). Use the Banner guide for detailed media type, file, size, layout, parallax, full-banner link, overlay, filter, hover, corner radius, padding, and margin guidance.

</details>

#### 4.3. Review group

The **Review group** holds testimonial text plus author and rating information. It can contain **Author and rating group** and **Text** blocks. Use the Review group to create the review panel. Add custom background, border, or padding when the quote needs a stronger card-like area beside the banner.

```
Review group
|-- Author and rating group
|    |-- Author
|    `-- Rating
`-- Text
```

<details>

<summary>Review group settings</summary>

Use Review group settings to size the quote panel, arrange its inner blocks, style the panel, and add spacing around or inside it.

<table><thead><tr><th width="139.70703125">Setting group</th><th width="563.86328125">What it controls</th></tr></thead><tbody><tr><td><strong>Size</strong></td><td>Controls the Review group's width and height. Use these settings when the quote panel needs to fill the item, sit beside the banner at a controlled width, or use a different size on mobile.</td></tr><tr><td><strong>Inner content layout</strong></td><td>Arranges the text, author/rating area, and spacing inside the Review group. These controls follow the same layout pattern as <a href="#inner-content-layout">Group > Inner content layout</a>.</td></tr><tr><td><strong>Style</strong></td><td>Controls color scheme inheritance, optional background, corner radius, and border. Use these settings when the review panel needs to read as a distinct card beside the banner. These controls follow the same layout pattern as <a href="#style">Group > Style</a>.</td></tr><tr><td><strong>Spacing</strong></td><td>Adds padding inside the Review group and margin around it, with optional mobile values.</td></tr></tbody></table>

</details>

<details>

<summary>Author and rating group settings</summary>

The **Author and rating group** arranges the **Author** and **Rating** blocks together inside the Review group.

Use the size, inner-content layout, spacing, and mobile controls when the author details and rating should move together as one unit. These controls follow the same general layout behavior as [Group](/arctos-theme/blocks/layout/group.md).

<table><thead><tr><th width="99.96484375">Setting group</th><th width="563.67578125">What it controls</th></tr></thead><tbody><tr><td><strong>Size</strong></td><td>Controls the width and height of the author/rating area. Use it when the author details and stars need to fill the row, stay compact, or use a different size on mobile.</td></tr><tr><td><strong>Inner content layout</strong></td><td>Controls whether the Author and Rating blocks sit side by side or stack, plus alignment, position, gap, baseline alignment, and mobile layout.</td></tr><tr><td><strong>Spacing</strong></td><td>Adds padding inside the Author and rating group and margin around it, with optional mobile values.</td></tr></tbody></table>

</details>

<details>

<summary>Author block settings</summary>

The **Author** block stores the reviewer's avatar, name, and bio.

<table><thead><tr><th width="109.8125">Setting group</th><th width="554.03125">What it controls</th></tr></thead><tbody><tr><td><strong>Layout</strong></td><td>Controls whether the avatar and name/bio text sit side by side or stack vertically, plus their alignment, gap, and mobile layout. Use it to keep author details compact or make them feel more editorial.</td></tr><tr><td><strong>Author</strong></td><td>Sets the avatar image, avatar width, corner radius, and mobile avatar size. Use a consistent avatar treatment across testimonial items so the review area feels intentional.</td></tr><tr><td><strong>Name and bio</strong></td><td>Controls the reviewer name, supporting bio text, <strong>Name text style</strong> (default: <strong>Paragraph</strong>) and <strong>Bio text style</strong> (default: <strong>Custom</strong>), with options <strong>Display</strong>, <strong>Heading 1-6</strong>, <strong>Paragraph</strong>, <strong>Eyebrow text</strong>, <strong>Description</strong>, <strong>Label</strong>, and <strong>Custom</strong> on both desktop and mobile, custom <strong>Font size</strong> sliders (<code>10-200 px</code> in steps of <code>2 px</code>, default <code>40 px</code> for the author name and <code>12 px</code> for the bio on both desktop and mobile when <strong>Custom</strong> is selected), text colors, gap, and mobile typography. Use the bio for short trust signals such as customer role, location, or verified buyer context.</td></tr></tbody></table>

</details>

<details>

<summary>Rating block settings</summary>

The **Rating** block shows the star rating and optional score.

<table><thead><tr><th width="100.1328125">Setting</th><th width="99.59375">Options</th><th width="463.90625">What it does</th></tr></thead><tbody><tr><td><strong>Layout</strong></td><td>Direction and Gap</td><td>Rating layout controls set whether the stars and numeric score stack, sit side by side, or use different spacing on mobile. Keep the rating easy to scan so customers can understand the review at a glance.</td></tr><tr><td><strong>Rating</strong></td><td><ul><li>2</li><li>3</li><li>4</li><li>5</li></ul></td><td><ul><li><strong>2</strong> or <strong>3</strong> shows a lower score when the testimonial is intentionally mixed or nuanced.</li><li><strong>4</strong> communicates a strong positive review while leaving room for realism.</li><li><strong>5</strong> shows the strongest endorsement.</li></ul></td></tr><tr><td><strong>Hide star</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td><ul><li>Turning it <strong>Off</strong> shows star icons for a more familiar visual review cue.</li><li>Turning this <strong>On</strong> hides the star icons and leaves the remaining rating information to carry the score.</li></ul></td></tr><tr><td><strong>Hide score</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td><ul><li>Turning it <strong>Off</strong> shows the number alongside the stars for extra clarity.</li><li>Turning this <strong>On</strong> hides the numeric score when the star icons provide enough visual context.</li></ul></td></tr></tbody></table>

</details>

<details>

<summary>Text block settings</summary>

The **Text** block contains the quote text inside a Review group. Use these settings to write the testimonial quote, align it, and choose typography and color treatments.

<figure><img src="https://1411897219-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FP6Y96SO1y456EU9GTaCh%2Fuploads%2FMLgYzgyWSJ3vrDiDa4Ai%2FTestimonial%2C%20Text%20block.%20Replaces%20N0fW12XY99IcB0tedUnp.png?alt=media&amp;token=76cf488f-5510-4799-8ae4-9fb71d8f5fe7" alt=""><figcaption></figcaption></figure>

<table data-search="false"><thead><tr><th width="116.5546875">Setting</th><th width="170.09765625">Options</th><th width="377.5234375">What it does</th></tr></thead><tbody><tr><td><strong>Text</strong></td><td>Rich text</td><td>Add the testimonial quote or review content shown inside the Review group.</td></tr><tr><td><strong>Highlight style</strong></td><td><ul><li>None</li><li>Standard</li></ul></td><td>Sets the visual style applied to highlighted words within the quote text.</td></tr><tr><td><strong>Text alignment</strong></td><td>Text alignment control</td><td>Align the quote text inside its content area, with separate mobile alignment available when the mobile layout needs different balance.</td></tr><tr><td><strong>Text style</strong></td><td><ul><li>Default</li><li>Display</li><li>Heading 1–6</li><li>Paragraph</li><li>Eyebrow text</li><li>Description</li><li>Label</li><li>Custom</li></ul></td><td>Sets the quote font style using typography roles from <a href="/arctos-theme/theme-settings/typography.md">Theme settings > Typography</a>.</td></tr><tr><td><strong>Custom typography controls</strong></td><td>Font family, Font size (slider, 10-200 px in steps of 2 px), line height, letter spacing, font weight, and case</td><td>These controls work the same way as typography controls in <a href="/arctos-theme/theme-settings/typography.md">Theme settings > Typography</a>, with <strong>Font size</strong> set via a <code>10-200 px</code> slider in steps of <code>2 px</code> (default <code>40 px</code> on both desktop and mobile). <em>Available when <strong>Text style</strong> is <strong>Custom</strong>.</em></td></tr><tr><td><strong>Text color</strong></td><td><ul><li>Strong</li><li>Base</li><li>Light</li><li>Subtle</li></ul></td><td>Sets the quote text color using theme color tokens. Choose the option that matches the role of the quote in the surrounding content.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turning this <strong>On</strong> reveals separate typography controls for mobile screens, useful when a large desktop quote needs to scale down.</td></tr></tbody></table>

</details>

### 5. Testimonials settings

#### 5.1. Testimonials

The **Testimonials** parent controls how multiple testimonial cards are arranged and how the card style applies across the listing.

<details>

<summary>Layout, desktop, and mobile</summary>

Testimonials uses the same grid, carousel, control-button, pagination, hint, and mobile-carousel patterns as Custom list. Use the [Custom list guide](/arctos-theme/blocks/layout/custom-list.md) for the detailed behavior of grid versus carousel layouts, rows, items per row, gaps, carousel controls, pagination, and mobile carousel conversion.

</details>

<details>

<summary>Testimonial card settings</summary>

These parent settings style every **Testimonial card** inside the listing. Many controls use the same patterns as **Testimonial banner** and **Review group**:

* For color scheme, height, alignment, position, gap, and mobile overrides, use the same guidance as [Testimonial banner](#id-4.1.-testimonial-banner) and [Review group](#id-4.3.-review-group) settings above.
* For author details, avatar, rating visibility, rating layout, review typography, and mobile typography, use the same guidance as [Review group](#review-group-settings), [Author](#author-block-settings), [Rating](#rating-block-settings), and [Text](#testimonial-text-block-settings) settings above. On **Testimonials**, review **Text style** and author **Name text style** / **Bio text style** include **Description** and **Label**, and custom font sizes use `10-200 px` sliders in steps of `2 px` (labeled **Size** for the review quote and **Font size** for the author name and bio).

Only these listing-card controls need separate attention:

<table><thead><tr><th width="99.58984375">Setting</th><th width="159.953125">Options</th><th width="422.79296875">What it does</th></tr></thead><tbody><tr><td><strong>Position</strong></td><td><ul><li>Top</li><li>Bottom</li></ul></td><td><ul><li><strong>Top</strong> places the quote before the author and rating details, making the review text the first thing customers read.</li><li><strong>Bottom</strong> places the quote after the author and rating details, useful when identity or star rating should introduce each card.</li></ul></td></tr><tr><td><strong>Style</strong></td><td><ul><li>Classic</li><li>Boxed</li></ul></td><td><ul><li><strong>Classic</strong> shows each review without a surrounding background shape for a lighter, more editorial layout.</li><li><strong>Boxed</strong> places each review inside a visible card, giving it stronger separation from neighboring testimonials.</li></ul></td></tr><tr><td><strong>Show divider</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td><ul><li>Turning this <strong>On</strong> adds a divider between the review content and the author/rating information, making longer cards easier to scan.</li><li>Turning it <strong>Off</strong> keeps the card content visually softer and more continuous.</li></ul></td></tr><tr><td><strong>Boxed card controls</strong></td><td>Corner radius, custom corner, desktop padding, optional mobile padding</td><td><p>Use these controls when each review needs a clearer card boundary than the listing background provides.</p><p><em>Available when <strong>Style</strong> is <strong>Boxed</strong>.</em></p></td></tr></tbody></table>

</details>

<details>

<summary>Testimonial card content settings</summary>

These parent settings style every **Testimonial card** inside the listing. Many controls use the same patterns as **Testimonial banner** and **Review group**:

* For color scheme, height, alignment, position, gap, and mobile overrides, use the same guidance as [Testimonial banner](#id-4.1.-testimonial-banner) and [Review group](#id-4.3.-review-group) settings above.
* For author details, avatar, rating visibility, rating layout, review typography, and mobile typography, use the same guidance as [Review group](#review-group-settings), [Author](#author-block-settings), [Rating](#rating-block-settings), and [Text](#testimonial-text-block-settings) settings above.

</details>

<details>

<summary>Spacing</summary>

<table><thead><tr><th width="113.93359375">Setting</th><th width="192.8046875">Options</th><th width="373.85546875">What it does</th></tr></thead><tbody><tr><td><strong>Padding</strong></td><td>Custom value per side</td><td>Sets the spacing between the block and its surrounding edge.</td></tr><tr><td><strong>Margin</strong></td><td>Custom value per side</td><td>Sets the spacing around the block to separate it from neighboring blocks.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Set separate padding and margin values for mobile.</td></tr></tbody></table>

</details>

#### 5.2. Testimonial card

Each **Testimonial card** belongs inside **Testimonials**. It holds the actual review details for one customer, while the listing controls the shared layout and card appearance. These fields match the same content roles as **Text**, **Author**, and **Rating** in a Testimonial banner, but they are stored in one compact card.

<figure><img src="https://1411897219-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FP6Y96SO1y456EU9GTaCh%2Fuploads%2Fgit-blob-4eac7467824227ee11c2fd81bbfa29a9c50fbc3c%2Ftestimonial-list-card.webp?alt=media" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="99.640625">Setting</th><th width="127.1953125">Options</th><th width="499.2265625">What it does</th></tr></thead><tbody><tr><td><strong>Text</strong></td><td>Rich text</td><td>Add the customer review content that appears as the main quote inside the card.</td></tr><tr><td><strong>Name</strong></td><td>Text</td><td>Add the customer or reviewer name shown with the testimonial.</td></tr><tr><td><strong>Bio</strong></td><td>Text</td><td>Add supporting author information, such as “Verified Buyer” or a customer role, to give the review more context.</td></tr><tr><td><strong>Avatar</strong></td><td>Image picker</td><td>Add a customer image or avatar to make the review feel more personal and trustworthy.</td></tr><tr><td><strong>Rating</strong></td><td>2–5</td><td>Choose the review score shown for the card.</td></tr></tbody></table>