# Testimonials masonry

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. * Heading & subheading: Add an optional subheading and title for the section. :eyes: You might be interested: [add-highlighted-text-to-your-headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings "mention") * Text: Add description to the section header * Text size: Small/ Base size/ Large/ Inherit {% hint style="info" %} * Go to **Theme settings** > [typography](https://docs.foxecom.com/hyper-theme/theme-settings/typography "mention") to change the store's **Base size.** ![](https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FDmPUZj7w0pLbus6N7RiW%2Fimage.png?alt=media\&token=f624cf51-cfa4-485e-8d5e-053dc3579c32) * Select Inherit to apply your rich text editor setting for the text. ![](https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FquSRZVZzwbCH2rN03RRY%2Fimage.png?alt=media\&token=3d454acb-ac90-4e28-9abe-1afdcfe96495) {% 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 %}

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

:eyes: Learn how to set your Color schemes: {% content-ref url="../theme-settings/colors" %} [colors](https://docs.foxecom.com/hyper-theme/theme-settings/colors) {% endcontent-ref %} * Image ratio: Control how testimonial images display — set fixed ratios (e.g. 1:1) or allow them to adapt naturally.

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

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

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

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