HYPER theme
Try Hyper freeResourcesOther solutions
  • What is Hyper theme
  • Changelog
  • Refund policy
  • Support policy
  • Getting started
    • Install Hyper theme
    • Set up my store as Hyper demo
    • Update Hyper theme
    • Theme license & Transfer
  • Page's global sections
    • Announcement bar
    • Top bar
    • Header
      • Mega menu
      • Use Country/ Region selector
      • Use Language selector
    • Footer
    • Cart drawer
    • Popup
    • Product compare
    • Quick view
    • Spotlight picks
  • Theme sections
    • Banner with hotspots
    • Before/after image slider
    • Brand logos 🔥
    • Button group
    • Collapsible tabs
    • Collection list
    • Collection list slider
    • Collection tabs
    • Contact form
    • Countdown timer
    • Custom content
    • Custom liquid
    • Email signup
    • Favorite products 🔥
    • Featured blogs
    • Featured collection
    • Featured countdown timer 🔥
    • Featured product
    • Horizontal products list 🔥
    • Image with text
    • Image with text overlay
    • Image with text slider 🔥
    • Lookbook slider
    • Multicolumn
    • Multicolumn with icon
    • Press 🔥
    • Products bundle 🔥
    • Promotion banner
    • Recently viewed products
    • Rich text
    • Shop the feed 🔥
    • Scrolling banner
    • Scrolling gallery images
    • Scrolling promotion
    • Slideshow
    • Tabs content
    • Testimonials
    • Testimonials masonry 🔥
    • Video
    • Video hero
  • Theme settings
    • General
    • Animations
    • Blog cards
    • Buttons
    • Cart
    • Color swatches
    • Colors
    • Currency format
    • Custom CSS
    • Layout
    • Logo
    • Product badges
    • Product cards
    • Product compare
    • Quick view
    • Search behavior
    • Social media
    • Typography
  • Collections & Products
    • Product page
      • Product template
      • Breadcrumbs
      • Product information
      • Quick comparision table
      • Quick order list
      • Related products
    • Collection page
      • Collection template
      • Collection banner
      • Product grid
    • Collections list page
  • Other pages
    • Blogs
    • Blog posts
    • Cart
    • Password
    • Search page
  • FAQs
    • Add Highlighted text to your Headings
    • Add gift wrap option to my cart
    • Combined listings app
    • Set up Local Pickup option
    • Set up quantity rules and volume pricing in B2B
    • Show Payment icons
Powered by GitBook
On this page
  • How to add a Testimonials masonry section to your Shopify store
  • How to edit a Testimonials masonry section
  • Section settings
  • Block settings
  • Best practices
  1. Theme sections

Testimonials masonry 🔥

Highlight your customers' experiences with an eye-catching testimonials masonry layout

PreviousTestimonialsNextVideo

Last updated 20 days ago

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

  1. In the theme editor (Customize), click Add section.

  2. Locate Testimonials masonry.

  3. Make necessary changes.

  4. Save.

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.

  • Text: Add description to the section header

  • Text size: Small/ Base size/ Large/ Inherit

  • Go to Theme settings > Typography to change the store's Base size.

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

Layout settings

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

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

Cart settings

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

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

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.

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.

You might be interested: Add Highlighted text to your Headings

Learn how to set your Color schemes:

👀
👀
Colors