> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/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/unicorn-shopify-theme/dynamic-theme-sections/testimonials.md).

# Testimonials

## Testimonials

{% hint style="success" %}
This section contains the "[<mark style="color:blue;">Header</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" and "[<mark style="color:blue;">Testimonial</mark>](#testimonial)" blocks.\
**Tip:** Press **"Add block"** to use the desired block. Each block can be added individually and customized in different ways.
{% endhint %}

### Content

**Items per row**\
Set the number of items displayed per row: 2 or 4.\ <mark style="color:orange;">**Note!**</mark> Works only for large screens. By default, the theme displays one item per row on mobile.

**Title size**\
The title font size of each block can be changed to "Small", "Medium", or "Large".

**Alignment**\
Decide whether to display content on the "Left", "Center", or "Right".

### Layout options <a href="#layout-options" id="layout-options"></a>

{% hint style="success" %}
Check the layout option examples [<mark style="color:blue;">here</mark>](/unicorn-shopify-theme/dynamic-theme-sections.md#layout-options).
{% endhint %}

**Layout**\
Change the "[<mark style="color:blue;">Header</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" content group position using the picker:

* **"Split"**. Puts the "Header" group in the content grid while keeping it on the right.
* **"Stacked"**. Displays title elements above the media content and aligns them to the left.
* **"Centered"**. Shows the centered title elements above the media content.

**Mobile alignment**\
Align the elements from the "[<mark style="color:blue;">Header</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" content group using one of the options:

* **"Auto"**. Uses the setting applied in the "Layout".
* **"Left"**. Displays content on the left.\ <mark style="color:orange;">**Note!**</mark> The call-to-action button displays in full width on mobile by default.
* **"Center"**. Centers content.\ <mark style="color:orange;">**Note!**</mark> The call-to-action button displays in full width on mobile by default.

**Use swipe on mobile**\
Enable this option to add a scrollbar on mobile devices instead of displaying content in a grid.

**Dividing line**\
Add a divider by setting its position: "Top", "Bottom", or "Both". Select "None" to hide the divider.

**Top spacing /** **Bottom spacing**\
Decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.

### Colors

**Filled rating**\
Use the item to colorize the stars representing customer satisfaction.

**Empty rating**\
Define the color of the remaining unfilled stars.

### Transparent header

Allows the header to overlay the section when a transparent header is used.

**Use inverted header colors**\
Enable the option to link the color of the Header elements, such as navigation menus, Search, Compare, Account, and Cart icons, with the "[<mark style="color:blue;">Background</mark>](/unicorn-shopify-theme/theme-settings/colors.md#background)" item under *Theme settings -> Colors -> Primary colors*. If the option is disabled, the color of the Header elements is related to the "[<mark style="color:blue;">Base</mark>](/unicorn-shopify-theme/theme-settings/colors.md#base)" item.

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

<figure><img src="/files/LwxCGLwrxbR5sfj2f4Xm" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="/files/nF1kepGihRAdKnbMS8Yi" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

## Testimonial

{% hint style="success" %}
This block can be used several times to set up each review block individually.\
**Tip:** To add content, click the **"Add block"** button and select additional blocks such as "Heading", "Signature", "Stars", and "Text".
{% endhint %}

### Heading

**Heading**\
Paste the main topic of a review into the field.

***

### Signature

**Signature**\
Add a customer username to the field.\
Style your text using the formatting options at the top of the input field.

***

### Stars

**Stars**\
Display a customer rating in the testimonial. Set a value on the scale from 1 to 5 to represent the customer's satisfaction.

***

### Text

**Description**\
The main review can be typed using the field.\
Style your text using the formatting options at the top of the input field.

***

<figure><img src="/files/jJnzC8OWFdffxPucKQNZ" alt=""><figcaption></figcaption></figure>