Skip to Content
SectionsTestimonials

Testimonials

FreeSocial proofv1.0.0

Put your best customer words where shoppers decide. Add reviews one by one with their stars, a headline, the quote, who said it and an optional photo, then link the product each one is about: the card shows it with its price and Add to cart, so praise turns straight into a sale. Lay them out as a carousel with arrows, a wall of columns, or a slow moving row that pauses on hover. Long quotes fold behind Read more, and an optional summary shows your average rating with a link to all reviews. Every word and number comes from you: nothing is generated or invented.

Good for: Home page social proof · Product and landing pages · Turning reviews into sales

Testimonials on a storefront

When to use it

Use it on your home page, a product page or a landing page to show what customers say about you, close to where shoppers decide.

  • Praise next to the product. Each review can show the product it’s about, with its price and Add to cart, so a shopper who likes what they read can buy it right there.
  • A layout for every page. Show reviews as a carousel with arrows, a wall of columns, or a slow moving row that pauses when shoppers hover over it.
  • Your words, nothing invented. You choose each quote, rating and name, and the average rating comes from the figure you enter. Long quotes fold behind Read more, so one long review doesn’t crowd out the rest.

Set it up

Add the section

Choose Add section and pick SU: Testimonials. It starts with three Review blocks.

Fill in each review

Select a Review block and fill in:

  • Stars: 5 stars, 4 stars, 3 stars, or Don’t show stars.
  • Headline, a short line above the quote.
  • Quote, in the customer’s words.
  • Name, and a Detail such as Verified buyer or a city.

Add another Review block for each review, up to 12.

Add a photo

Pick a Photo and choose Show photo as: Small, next to the name for a portrait, or Large, above the review for a photo of the product in use. With the small style and no photo, the card shows the name’s initials instead.

Pick the Reviewed product. It shows under the review with its picture, price and an add button. Products with several variants get Choose options. To show reviews without products, turn off Show the reviewed product with Add to cart in the section settings.

Choose a layout

Under Layout, pick Carousel, Wall (columns) or Moving row. Reviews per row on desktop sets how many cards show side by side in the carousel and the wall. Quote lines before Read more sets how long a quote can be before it folds.

Add a rating summary

Under Rating summary, enter your Average rating out of 5 (for example 4.8) and a Summary text such as From 1,240 reviews. The summary shows only once Average rating is filled in. Add a Link, for example to a page with all your reviews, and change its Link label if you like.

Finally, pick a Star color: Gold, Text color or Accent.

The section doesn’t read reviews from a reviews app. Copy the quotes and your average rating from your reviews app or your customers’ messages, and keep the average up to date yourself.

Try it

Live example with sample products. Links and checkout are turned off; Add to cart shows what shoppers would see.

Settings

In the theme editor, in the order you'll see them. Every section also has the heading and style settings.

Layout

SettingWhat it does
LayoutDropdownOptions: Carousel, Wall (columns), Moving rowDefault: Carousel
Reviews per row on desktopSlider (2–4)Default: 3
Quote lines before Read moreSlider (3–12)Default: 6
Show the reviewed product with Add to cartCheckboxDefault: On

Rating summary

SettingWhat it does
Show rating summaryCheckboxDefault: On
Average ratingTextOut of 5, e.g. 4.8: the figure from your reviews app. The summary shows once this is filled in.Shown when “Show rating summary” is on.
Summary textTextWhere the rating comes from, e.g. "From 1,240 reviews".Shown when “Show rating summary” is on.
Link labelTextDefault: Read all reviewsShown when “Show rating summary” is on.
LinkLinkShown when “Show rating summary” is on.
Star colorDropdownOptions: Gold, Text color, AccentDefault: Gold

Blocks go inside the section: use Add block, up to 12 in all, and drag them to change the order.

Block: Review

SettingWhat it does
StarsDropdownOptions: 5 stars, 4 stars, 3 stars, Don't show starsDefault: 5 stars
HeadlineText
QuoteRich textDefault: Paste what a customer told you, in their words.
NameTextDefault: Customer name
DetailTextE.g. "Verified buyer" or a city.
PhotoImage
Show photo asDropdownOptions: Small, next to the name, Large, above the reviewDefault: Small, next to the name
Reviewed productProduct

Good to know

  • Ratings and quotes are entered by you; the section doesn't read reviews from a reviews app.
  • Up to 12 reviews per section.
  • Without JavaScript the carousel and moving row scroll sideways and quotes show in full.
Accessibility: Reviews are a list of blockquotes; star ratings have a text equivalent; the carousel has labelled arrows and keyboard scrolling; the moving row has a pause button, pauses on hover and focus, and stays still with reduced motion.

Speed: Rendered in Liquid; photos are lazy-loaded responsive images. The script only measures quotes and moves the row; no extra requests.

Changelog

  • 1.0.0: Initial release.
Last updated on