Review stack
Review stack shows your rating on one side (a score, stars, the number of reviews, a short text and a button) and customer reviews on the other. As the page scrolls, each review card stops just below the one before, so the cards pile up while the summary stays in view.
How to set it up
Step 1: Add the section
- In the theme editor, open the home page and click Add section in the Template area.
- Choose Review stack. Drag it to where you want it on the page.
Step 2: Write the summary
- Under Summary, write the Eyebrow and Heading, the Score (for example
4.9) and the Review count text (for exampleBased on 1,280 reviews). - Add a short Text, and a button to your reviews page with Button label and Button link.
Step 3: Add reviews
- Click Add block > Review.
- Set the Rating (1 to 5 stars), the Title and the Review.
- Write the Name and Details, such as
Verified buyeror a city. Add an Avatar (the first letter of the name shows without one) and an optional Customer photo. - Choose the Reviewed product to show it with a link on the card.
Step 4: Set the stacking
- Under Layout, choose the Summary position (left or right).
- Keep Stack reviews on scroll (1) on to pile the cards up, and set the Stack offset: how much of each card stays visible above the next.
- Under Mobile layout, choose Stacked cards (they keep piling up) or Swipe row.
Step 5: Style the cards
- Under Review cards, choose Outline or Filled, the corner radius and the Review text style. Pick the Star color under Color.
Settings reference
Review stack
| Layout | |
|---|---|
| Summary position | On desktop the summary stays in view while the reviews scroll. Options: Left, Right. |
| Stack reviews on scroll | Each review holds below the one before, so the cards pile up as the page scrolls. |
| Stack offset | Slider. |
| Mobile layout | Options: Stacked cards, Swipe row. |
| Color | |
| Star color | |
| Summary | |
| Score | |
| Review count | |
| Button label | |
| Button link | Where the link goes. |
| Button style | Options: Primary, Secondary, Outline. |
| Review cards | |
| Card style | Options: Outline, Filled. |
| Corner radius | Slider. |
| Review text style | Options: Secondary heading, Subheading, Body. |
| Corners | |
| Make section rounded | Rounds this section's corners with the radius set for each one. |
| Top left radius | Slider. |
| Top right radius | Slider. |
| Bottom right radius | Slider. |
| Bottom left radius | Slider. |
Full width, section layout, color scheme, spacing and mobile overrides work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.
How it works
- The reviews are written in the section; they don't come from a review app. Copy real reviews from your review app or emails.
- Turn off stacking to show the cards one after another.