Testimonials masonry 🔥
Highlight your customers' experiences with an eye-catching testimonials masonry layout
Last updated
Highlight your customers' experiences with an eye-catching testimonials masonry layout
Last updated
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.
In the theme editor (Customize), click Add section.
Locate Testimonials masonry.
Make necessary changes.
Save.
Text alignment: Align the section header on desktop and mobile view separately.
Heading & subheading: Add an optional subheading and title for the section.
Text: Add description to the section header
Text size: Small/ Base size/ Large/ Inherit
Limit height: Set a height limit to enable a 'Show More' button.
Color scheme: Select a set of colors you want to use for your testimonial cards.
Image ratio: Control how testimonial images display — set fixed ratios (e.g. 1:1) or allow them to adapt naturally.
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.
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.
In the Testimonials masonry, click Add testimonial.
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.
✅ 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.
You might be interested: Add Highlighted text to your Headings
Learn how to set your Color schemes: