> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/triumph/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/triumph/template/sections/reviews.md).

# Reviews

Highlights customer reviews or testimonials.

*Shared Settings*:

* [<mark style="color:$primary;">'View All' button</mark>](/triumph/template/shared-settings/view-all-button.md)
* [<mark style="color:$primary;">Card</mark>](#card)
* [<mark style="color:$primary;">Section layout</mark>](/triumph/template/shared-settings/section-layout.md)
* [<mark style="color:$primary;">Section mobile layout</mark>](/triumph/template/shared-settings/section-mobile-layout.md)
* [<mark style="color:$primary;">Divider line</mark>](/triumph/template/shared-settings/divider-line.md)
* [<mark style="color:$primary;">Section background</mark>](/triumph/template/shared-settings/section-background.md)
* [<mark style="color:$primary;">Colors</mark>](#colors)
* [<mark style="color:$primary;">Card colors</mark>](#card-colors)
* [<mark style="color:$primary;">Image overlay on desktop</mark>](#image-overlay-on-desktop)
* [<mark style="color:$primary;">'View All' button colors</mark>](/triumph/template/shared-settings/view-all-button-colors.md)

*Shared Blocks:*

* [<mark style="color:$primary;">Heading</mark>](/triumph/template/shared-blocks/heading.md)
* [<mark style="color:$primary;">Card</mark>](/triumph/template/sections/reviews/card.md)

***

**Rating**\
Choose how the review rating is displayed:

* **None** – Hides the rating.
* **Custom** – Lets you manually set the rating in the [<mark style="color:$primary;">Card</mark>](/triumph/template/sections/reviews/card.md).
* **Auto (from app)** – Automatically pulls the rating from a connected review app.

***

#### Card

**Content alignment**\
Adjust the text alignment to the left or center.

**Product vertical alignment on mobile**\
Change the media position to the top, center, or bottom of the card.

**Heading size**\
Choose the heading size in the cards: Small, Medium, or Large.

**Image width on desktop / Image width on tablet**\
Controls media content width within the card (20-50%).

**Image fit**\
Choose how images fit inside the container:

* **Full background** – Fills the space (may crop the image).
* **Contain** – Shows the full image (may leave empty space).

**Show 'Sale' badge**\
Enable a sale badge.

> This option requires adding the comparison price for each product or product variants in *Shopify admin -> Products*.

**Show price**\
Displays a price over the image.

**Price size / Price size on mobile**\
Set the price size (15-30 px).

***

#### Card colors

**Background**\
Sets the background color of the text content area.

**Border**\
Highlights the card with a border.

**Text**\
Controls the text color in the card.

**Rating**\
Changes the color of star ratings.

**Product name and price on desktop**\
Sets the color of text in the product card.

**Price on mobile / Sale price on mobile**\
Colorize the initial price and discounted price on mobile.

***

#### Image overlay on desktop

Add a color overlay at the bottom of the product card:

**Color**\
Select overlay color.

**Opacity**\
Controls transparency (0–100%).

***

{% tabs %}
{% tab title="Desktop" %}

{% endtab %}

{% tab title="Mobile" %}

{% endtab %}
{% endtabs %}