> ## 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).

# Electro How to Use Electro Testimonial

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

A Testimonials section shows customer reviews as cards, each with a star rating, the review text, and the author's photo, name, and title. You can link each review to the product the customer bought, so the review also works as product feedback and builds trust.

> **Note:** You can add this section to any template, except the header and footer. The section comes with 5 Testimonial blocks.
![Electro Testimonials section with star ratings, authors, and bought products](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/testimonial-1_1cel6ch.jpg)

**What you can do**
- Add the section and your reviews
- Show the product each customer bought
- Show the reviews in a carousel or a grid
- See what customers see
- Change the card colors and layout
- Fix common problems

---

## Add the section and your reviews
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Testimonials**.
3. Under **General**, enter a **Section subheading**, **Section heading**, and **Description**. Leave a field empty to hide it.
4. Click a **Testimonial** block.
5. Select an **Avatar**, set the **Rating**, and enter the **Author**, **Author title**, and **Testimonial content**.
6. To add more reviews, click **Add block** > **Testimonial**.
7. Click **Save**.

> **Tip:** Use square photos for **Avatar**. They appear as small circles, so a close-up of a face works best.

## Show the product each customer bought
1. Click the **Testimonials** section and make sure **Show bought products** is selected.
2. Click a **Testimonial** block.
3. Under **Bought product**, select a **Product**.
4. Click **Save**.

The product's image, title, and price appear at the bottom of the card, under a **Bought product** badge.

> **Note:** The badge uses the colors set in Theme settings > Product card > Sale badge colors.

## Show the reviews in a carousel or a grid
1. Click the **Testimonials** section.
2. Under **Layout**, choose **Items per row on large screen**.
3. Select **Enable carousel** to show the reviews in one row that customers can scroll. Clear it to show all reviews in a grid.
4. Optional: with the carousel on, select **Show progress indicator** to add a bar under the cards that shows the scroll position.
5. Click **Save**.

## What customers see
- **Cards:** each card shows the star rating, the review, and the author's photo, name, and title. If you don't add an **Avatar**, a placeholder image appears.
- **Bought product:** customers click the product image or title to open the product page. When the product is on sale, the original price appears crossed out above the sale price.
- **Carousel on large screens:** on screens 769 px and wider, previous and next arrows let customers move through the reviews. The progress indicator appears only when there are more reviews than fit in one row.
- **Tablets and phones:** cards show 2 per row on screens from 459 px to 768 px wide, and 1 per row on smaller phones. With the carousel on, customers swipe through them.
- **Grid:** with the carousel off, the cards wrap onto as many rows as needed.
![Testimonials carousel after scrolling, with the progress indicator below the cards](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/testimonial-2_n1a02d.png)

## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the background and text colors of the section. You can edit color schemes in Theme settings > Colors. |
| Section subheading | The short line above the heading. Leave it empty to hide it. |
| Section heading | The section title. Leave it empty to hide it. |
| Heading size | Sets the heading size: H2, H3, H4, or H5. |
| Description | Text below the heading. |
| Show bought products | Shows the product you select in each Testimonial block. See "Show the product each customer bought" above. |

### Testimonial items
| Setting | What it does |
| ---- | ---- |
| Card color scheme | Sets the background and text colors of the review cards. |
| Show rating | Shows the stars on each card. |
| Rating | Sets the color of the stars. |

### Layout
| Setting | What it does |
| ---- | ---- |
| Items per row on large screen | Shows 3, 4, or 5 cards per row on screens 769 px and wider. |
| Content alignment | Aligns the section heading and the text in the cards to the Left or Center. |
| Enable carousel | Shows the cards in one scrollable row instead of a grid. |
| Show progress indicator | Adds a scroll bar under the carousel. Works only when Enable carousel is selected. |

### Testimonial block
| Setting | What it does |
| ---- | ---- |
| Avatar | The author's photo, shown as a small circle. |
| Rating | The number of stars, from 1 to 5. |
| Author | The customer's name. |
| Author title | A short line under the name, such as a job title or "Verified buyer". |
| Testimonial content | The review text. |
| Product | Under Bought product, the product the customer bought. Appears on the card only when Show bought products is selected. |

## Troubleshooting
**The bought product doesn't show.**
Make sure **Show bought products** is selected in the section settings, and that the **Testimonial** block has a **Product** selected.

**The stars don't show.**
Select **Show rating** under **Testimonial items**. Also check that the **Rating** color isn't the same as the card background.

**The progress bar doesn't show.**
**Show progress indicator** works only with **Enable carousel** on. The bar also hides on large screens when all reviews fit in one row.

**There are no arrows on my carousel.**
The arrows appear only on large screens. On tablets and phones, customers swipe.

## Related articles
- [Electro Theme settings](https://help.ecomx.co/en/article/electro-theme-settings-2ubwqk/)
- [How to use Electro Logo list](https://help.ecomx.co/en/article/electro-how-to-use-electro-logo-list-1vrr9o9/)
- [How to use Electro Featured product](https://help.ecomx.co/en/article/electro-how-to-use-electro-featured-product-ljozz3/)
- [How to use Electro Text section](https://help.ecomx.co/en/article/electro-how-to-use-electro-text-section-188rf2a/)