SScale Themedocs

The Reviews section with 5 display modes, Trustpilot/Google integration, and full customization. The most complete review system available on a Shopify theme.

Reviews

The Reviews section is one of Scale Theme's major assets. It lets you display customer reviews in 5 different formats, all powered by the same content blocks. Whether you sell physical products, services or digital goods, this section lets you showcase social proof in the way best suited to your brand.

ℹ️The 5 variants (Slider, Grid, Masonry, Trustpilot, Google) are actually the same section with a different layout setting. You can switch from one mode to another without losing your reviews. Testimonial blocks are shared across all variants.

The 5 variants in detail

1. Slider

The Slider mode displays reviews in a horizontal carousel with arrow navigation and/or pagination. It is the default and most versatile mode.

When to use:

  • On the homepage for a quick review overview
  • When you have little vertical space available
  • For a dynamic and interactive presentation

Slider-specific settings:

SettingOptionsDescription
Slider typeCSS Scroll / NavigationCSS Scroll = native touch scrolling, Navigation = arrows + dots
NavigationOn / OffShows prev/next arrows
PaginationOn / OffShows dots or progress bar
AutoplayOn / OffAutomatic scrolling
Autoplay speed3-10 secondsInterval between each slide
LoopOn / OffReturns to the beginning after the last slide
💡CSS Scroll mode is ideal for mobile: it allows native touch swiping without additional JavaScript. Navigation mode is preferable on desktop for a more guided experience.

2. Grid

The Grid mode displays all reviews in a structured grid. All cards have the same height within each row.

When to use:

  • On a dedicated reviews page or landing page
  • When you have many reviews to show
  • For a structured and predictable display

Visibility settings (Grid and Masonry):

Grid (and Masonry) mode has visibility settings that limit the number of initially displayed reviews, with a "Show more" button:

SettingRangeDescription
Visible on mobile3-20Number of reviews shown before the "Show more" button on mobile
Visible on tablet4-30Number of reviews shown before the "Show more" button on tablet
"Show more" buttonOn / OffShows a button to load remaining reviews
Button stylePrimary / Secondary / TertiaryVisual style of the "Show more" button
💡For a dedicated reviews page, display 6 to 9 reviews initially, then let the "Show more" button load the rest. This keeps loading time fast while showing that you have many reviews.

3. Masonry

The Masonry mode creates a Pinterest-style column layout where each card has a different height based on content length. It is the most visually dynamic mode.

When to use:

  • When your reviews have very different lengths (short + long)
  • For a modern and visually attractive design
  • When you include images in some reviews

Customizable card size (Masonry only):

In Masonry mode, each individual review block has an additional Card size setting:

SizeBehavior
AutoHeight adapts to content (default)
SmallCompact card, text truncated if needed
MediumIntermediate size
LargeLarger card, takes more vertical space
ℹ️In Masonry mode, cards fill from top to bottom in each column. The order of cards in the Shopify editor corresponds to the display order from left to right, column by column.

4. Trustpilot Embed

The Trustpilot mode transforms the section into a complete Trustpilot-style widget, with the official logo, green stars and a header showing the average rating and total review count.

What changes in Trustpilot mode:

  • The header automatically displays the Trustpilot logo, rating and review count
  • The stars become green with Trustpilot style (green squares with white star)
  • The cards adopt the Trustpilot visual style
  • The platform is automatically set to Trustpilot

When to use:

  • If your store has an active Trustpilot profile
  • To maximize credibility through Trustpilot brand recognition
  • On sales landing pages where trust is crucial
⚠️Reviews are not automatically imported from Trustpilot. You must manually copy them into Testimonial blocks. The Trustpilot logo and style are visually reproduced for aesthetic integration. Add a link to your real Trustpilot page in the Platform link setting.

5. Google Embed

The Google mode works the same way as Trustpilot mode, but with the Google Reviews style: Google logo, yellow stars and Google card style.

What changes in Google mode:

  • The header displays the Google logo, rating and review count
  • The stars are yellow/gold in Google style
  • The Author Info field in blocks can display "Local Guide", "Top Contributor", etc.

When to use:

  • If your store has an active Google Business profile
  • For businesses with a strong local presence
  • For stores that receive reviews via Google Shopping
💡For an even more immersive effect in Trustpilot and Google modes, enable the Tilt option which slightly tilts the cards in a fan-like arrangement, giving the slider a more lively appearance.

Visual comparison of the 5 variants


Number of columns

The number of columns affects all modes (Slider, Grid, Masonry) and is configured separately for desktop, tablet and mobile.

Desktop: 2 columns

Ideal for: Long and detailed reviews, sections with images, showcasing key testimonials.

Desktop: 3 columns (default)

Ideal for: Most use cases, good balance between density and readability.

Desktop: 4 columns

Ideal for: Many short reviews, dedicated review pages, dense display.

Desktop: 5 columns

Ideal for: Trustpilot/Google mode, very short reviews, "wall of reviews" effect.

💡General rule: The longer your reviews, the fewer columns you should use. With 2-3 sentence reviews, 3-4 columns are perfect. With detailed 5+ sentence reviews, prefer 2 columns.

Card styles

The card style defines the visual appearance of each review. It applies to all variants.

Flat style (default)

When to use: Minimalist design, colored section background, when you don't want strong visual separation between cards.

Border style

When to use: Classic and professional design, when you want a clean but discreet separation between cards. Ideal for B2B or professional stores.

Shadow style

When to use: Modern and premium design, when you want the cards to visually "pop" from the page. The most impactful style, perfect for conversion landing pages.

💡The Shadow style is the most effective at drawing attention to reviews. Combine it with a contrasting section background (dark palette) for an even more pronounced effect.

Card customization

Beyond style, you have several settings to adjust card appearance:

SettingRangeDefaultDescription
Border radius0-30px8pxCard corner rounding
Padding12-48px24pxCard internal spacing
Gap0-60px20pxSpacing between cards
Image ratioAdapt / Square / Portrait / Vertical / LandscapeAdaptImage ratio within cards

, giving a strict and geometric look.)

, giving a soft and modern look.)


Stars and ratings

Star styles

Three star styles are available, each suited to a different context:

StyleAppearanceIdeal for
DefaultClassic stars colored according to your paletteCustom design, brand consistency
TrustpilotGreen squares with white starsTrustpilot integration, maximum credibility
GoogleYellow/gold starsGoogle integration, universal recognition

Star settings

SettingOptionsDescription
Show ratingsOn / OffEnable/disable star display
StyleDefault / Trustpilot / GoogleVisual star style
Size12-28pxStar size
ColorAccent 1 / Accent 2 / ForegroundStar color in Default mode
ℹ️In Trustpilot and Google modes, the star color is automatically fixed (Trustpilot green or Google yellow) and cannot be changed, to respect each platform's visual identity.

Testimonial block: full configuration

Each review is a Testimonial block (type "Review" in the editor). You can add up to 30 blocks per section. Here is the detail of each available field.

Review content

FieldTypeDescription
RatingRange 1-5 (0.5 steps)Number of stars for the review. Allows half-stars (e.g.: 4.5/5)
TitleShort textOptional review title (e.g.: "Amazing product!")
DescriptionRich textThe full review content, supports formatting (bold, italic)

, Title ("Amazing product!"), and Description with rich text.)

Author information

FieldTypeDescription
Author nameTextName displayed under the review (e.g.: "Emily B.")
Author infoTextAdditional information: city, "Verified buyer", "Local Guide", etc.
Verified purchaseCheckboxDisplays a green "Verified purchase" badge next to the name

, Author info ("Paris, France"), and the "Verified purchase" checkbox checked.)

Media (image or video)

Each review can optionally include a visual media:

FieldTypeDescription
Media typeNone / Image / VideoType of media to display in the card
ImageImage pickerProduct image, customer photo, etc.
VideoVideo pickerCustomer testimonial video

, followed by stars, review text, and author at the bottom.)

💡Alternate reviews with and without images for a natural look. In Masonry mode, reviews with images will automatically be larger, creating an interesting visual contrast with text-only reviews.

Per-review card options

FieldTypeDescription
Title size50-150%Adjusts the title size of this specific review
Card sizeAuto / Small / Medium / LargeCard size in Masonry mode only

Platform integration (generic mode)

Even in Slider, Grid or Masonry modes, you can enable platform integration (Trustpilot or Google) to add the header with logo and average rating.

SettingDescription
PlatformNone / Trustpilot / Google
Show platform headerEnables the header with logo, rating and review count
Platform rating1-5 (in 0.1 steps) - the rating displayed in the header
Review countFree text (e.g.: "2,547") - displayed in the header
Platform linkURL to your Trustpilot or Google page
ℹ️The difference between the "Trustpilot" mode (variant) and the "Platform: Trustpilot" setting: the mode forces the layout to Slider and the complete Trustpilot style. The Platform setting only adds the header and star style to the layout of your choice (Grid, Masonry, etc.).

Tilt effect (Slider modes only)

The Tilt effect slightly tilts the cards for a more dynamic and visually unique look. It is available only in Slider mode (includes Trustpilot and Google).

SettingOptionsDescription
Enable tiltOn / OffEnables the tilt effect
StyleFan / AlternateFan = all tilted in the same direction, Alternate = alternating left/right
Angle1-5 degreesTilt intensity
Tilt on mobileOn / OffAlso applies the effect on mobile

"Read more" feature

For long reviews, the section offers a "Read more" feature that truncates text after a certain number of characters.

SettingRangeDefaultDescription
Enable Read moreOn / OffOnTruncates long texts
Limit50-300 characters120Number of characters before truncation
"Read more" textText"Read more"Text of the expand link
"Read less" textText"Read less"Text of the collapse link

Slider navigation

In Slider mode (including Trustpilot and Google), you have many settings to customize navigation.

Pagination styles

Three pagination styles are available:

StyleDescription
DotsClassic dots, the active dot is highlighted
ProgressHorizontal progress bar
Fraction"2 / 7" display (current slide / total)
PositionDescription
OverlayArrows are overlaid on the cards
ExternalArrows are outside the carousel
Integrated paginationArrows are integrated next to the pagination

Arrow customization

SettingOptionsDescription
Arrow backgroundTransparent / Background / Foreground / Accent 1 / Accent 2Arrow button background color
Icon colorForeground / Background / Accent 1 / Accent 2Arrow color itself
Icon size16-32pxArrow size
Button shapeCircle / Rounded / SquareShape of the button containing the arrow
Show on hoverOn / OffArrows only appear when hovering the section

Heading block

The Reviews section accepts a Heading block (limited to 1) displayed above the reviews. This block offers advanced options:

FieldDescription
SubtitleShort text above the title (e.g.: "Testimonials")
TitleMain title with rich text support (bold, italic)
Bold text styleDefault / Color / Highlight - how bold text is formatted
Title levelH1 / H2 / H3 / H4 - for SEO
Title size50-200% - relative title size
SeparatorDecorative line under the title (configurable width, height, color)

Section global settings

CategorySettings
WidthNarrow / Normal / Full Padded / Full
PaddingTop/Bottom desktop (0-100px), Top/Bottom mobile (0-100px)
ColorsSection color palette
VisibilityHide on desktop / Hide on mobile
SeparatorsTop and bottom SVG separator (wave, curve, etc.)
AnimationsEntry animation, stagger for cards

Configuration examples by store type

Fashion / lifestyle store

  • Layout: Masonry, 3 columns
  • Card style: Shadow
  • Media: Images in 50% of reviews (worn photos)
  • Stars: Default, accent-1 color
  • Heading: "What our customers say"
  • Border radius: 16px for a modern look

Tech / SaaS store

  • Layout: Grid, 3 columns
  • Card style: Border
  • Platform: Trustpilot
  • Stars: Trustpilot style
  • Heading: With average rating and Trustpilot logo
  • Border radius: 4px for a professional look

Local / artisan store

  • Layout: Slider, 2-3 columns
  • Card style: Shadow
  • Platform: Google
  • Author info: City + "Local Guide"
  • Tilt: Enabled, Fan style
  • Heading: "Our customers speak"

Conversion landing page

  • Layout: Trustpilot (variant)
  • 5 desktop columns for a "wall of proof" effect
  • Tilt: Enabled to add visual dynamism
  • Autoplay: Enabled (5 seconds)
  • Many reviews (15-20) for a volume effect

Best practices

- Add at least 8-10 reviews for a credible look and smooth slider - Vary text lengths: mix short reviews (1 sentence) and long ones (3-4 sentences) - Add avatars/images when possible - reviews with images generate +30% more trust - Use the Verified purchase badge on the majority of reviews - Add titles to some reviews to create visual hooks
- Slider mode is the most performant as it only loads visible reviews - Limit the number of reviews to 6-9 visible in Grid/Masonry mode with the "Show more" button - Images in reviews are lazy loaded automatically - CSS Scroll mode is lighter than Navigation mode (no JavaScript)
- Don't give 5 stars to all reviews: a few 4 or 4.5 stars make the whole thing more credible - Don't leave the Author info field empty everywhere: add cities, "Loyal customer", etc. - Don't mix Trustpilot and Google star styles on the same page - Don't duplicate the Reviews section on the same page: use a single section with enough reviews

In addition to this section, Scale Theme offers a dedicated Reviews Carousel section optimized for a continuously scrolling testimonials banner. See Reviews Carousel.