# Testimonials masonry

![image](https://docs-assets.foxecom.app/hyper-theme/Hyper%20docs%20screenshot%20do%20not%20delete%20(58)_ed2L4quU.jpg)

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 type="success">

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

</Hint>

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

👀 You might be interested: [Add Highlighted text to your Headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings)

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

<Hint type="info">

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

![](https://docs-assets.foxecom.app/hyper-theme/image_KLvH2ik9.png)

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

![](https://docs-assets.foxecom.app/hyper-theme/image_YtOT2Y0c.png)

</Hint>

#### Layout settings

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

<Hint type="info">

The button only shows when the section height exceeds the limit height you set.

</Hint>



<Video src="https://docs-assets.foxecom.app/hyper-theme/Untitled%20design%20(43)_c1S3W0Yh.mp4" autoPlay="true" loop="true" muted="true" aria-label="image" />

#### Cart settings

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

![image](https://docs-assets.foxecom.app/hyper-theme/image_u2nG9DcW.png)

👀 Learn how to set your Color schemes:

<PageLink href="https://docs.foxecom.com/hyper-theme/theme-settings/colors">Colors</PageLink>

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

![image](https://docs-assets.foxecom.app/hyper-theme/image_JAudp5UA.png)

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

![image](https://docs-assets.foxecom.app/hyper-theme/image_8aSy3sCV.png)

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

![image](https://docs-assets.foxecom.app/hyper-theme/image_6VsYHC53.png)

### Block settings

<Hint type="success">

In the Testimonials masonry, click **Add testimonial.**

</Hint>

![image](https://docs-assets.foxecom.app/hyper-theme/image_RJQiSboQ.png)

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

✅ **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.