# Testimonials masonry

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

Testimonials masonry beautifully displays your customer reviews in a modern, responsive grid format. Showcase star ratings, product mentions, and genuine feedback to build trust and boost conversions.

## How to add a Testimonials masonry section to your Shopify store

{% hint style="success" %}

1. In the theme editor (**Customize**), click **Add section.**
2. Locate **Testimonials masonry.**
3. Make necessary changes.
4. **Save.**
   {% endhint %}

## How to edit a Testimonials masonry section

### Section settings

#### Section header

* Text alignment: Align the section header on desktop and mobile view separately.&#x20;
* Heading & subheading: Add an optional subheading and title for the section.

:eyes: You might be interested: [Add Highlighted text to your Headings](/hyper-theme/faqs/add-highlighted-text-to-your-headings.md)

* Text: Add description to the section header
* Text size: Small/ Base size/ Large/ Inherit

{% hint style="info" %}

* Go to **Theme settings** > [Typography](/hyper-theme/theme-settings/typography.md) to change the store's **Base size.**&#x20;

![](/files/KLvH2ik9NUCuWheJbJCw)

* Select Inherit to apply your rich text editor setting for the text.

![](/files/YtOT2Y0cII8SOEhNgjlb)
{% endhint %}

#### Layout settings

* Limit height: Set a height limit to enable a 'Show More' button.

{% hint style="info" %}
The button only shows when the section height exceeds the limit height you set.
{% endhint %}

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

#### Cart settings

* Color scheme: Select a set of colors you want to use for your testimonial cards.

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

:eyes: Learn how to set your Color schemes:

{% content-ref url="/pages/E1dNsgsqbhMsJjy8Hv1S" %}
[Colors](/hyper-theme/theme-settings/colors.md)
{% endcontent-ref %}

* Image ratio: Control how testimonial images display — set fixed ratios (e.g. 1:1) or allow them to adapt naturally.

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

#### Grid settings

* Number of columns on desktop: Control how many testimonials are shown in a row (between 2-5).
* Column gap and Row gap: Adjust space between column and row.

#### Mobile layout

* Enable swipe on mobile: When on, testimonials display in a horizontal scroll format, great for touch-friendly browsing.

<figure><img src="/files/8aSy3sCVDASVpnSlWp7Q" alt=""><figcaption></figcaption></figure>

* *When off*, testimonials stack vertically like a traditional grid.

<figure><img src="/files/6VsYHC53bgZkvQDZEAIa" alt=""><figcaption></figcaption></figure>

### Block settings

{% hint style="success" %}
In the Testimonials masonry, click **Add testimonial.**
{% endhint %}

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

In each testimonial, you can add, edit or remove:

* Icon: Choose to display 1-5 stars symbol or not.
* Image: Upload an image to support the review visually.
* Content: The main review text written by customer.
* Author:
  * Avatar: Customer photo.
  * Name: Author name.
  * Bio: Optional label like 'Verified buyer'.
* Product: Link the testimonial to a product in your store. Great for social proof and product trust.

## Best practices&#x20;

✅ **Curate visually balanced testimonials:** Similar text lengths and image qualities enhance visual harmony.

✅ **Use authentic images:** Real customer images increase credibility.

✅ **Control visual clutter:** Use appropriate *Limit height* and "Show More" to avoid long page scrolls.

***

<figure><img src="/files/6RW1JWuKNf9ovVFLkLXc" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_hyper&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/hyper-theme/theme-sections/testimonials-masonry.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.