A Shopify Scrolling Reviews Liquid section can give a product page or homepage a more dynamic review experience without relying on a slider library.
The supplied scrolling-reviews.txt snippet creates an automatically moving row of customer review cards. Each card includes a star rating, written review, initials avatar, customer name, location, and a green Verified badge. The section also shows an overall 4.8 out of 5 rating based on 180+ reviews.
The visual structure is strong. The animation is CSS-only, the review cards are duplicated to create a continuous loop, hover pauses the animation, and there is already a good reduced-motion fallback that turns the slider into a manually scrollable row.
The main issue is the review data. Every name, rating, comment, location, verification badge, and aggregate score is hard-coded. Nothing in the snippet connects those values to a real Shopify review app or verified purchase source.
Where to Paste This Shopify Code
This snippet is not a complete Shopify section because it does not include a {% schema %} block.
It also loads:
customer-reviews.css
from the theme assets folder, even though a large CSS block is included directly later in the snippet.
For a quick setup, you can use a Custom Liquid block if your theme allows the code there.
A cleaner reusable setup is:
- Open Shopify Admin → Online Store → Themes.
- Duplicate your live theme.
- Open Edit code.
- Create a new snippet such as
scrolling-reviews.liquid. - Paste the markup and CSS.
- Render the snippet from your product template or another section.
- Test it on desktop and mobile.
If you want merchants to edit reviews, headings, colors, or slider settings from Theme Customize, convert it into a real Shopify section with blocks and schema settings.
How This Shopify Code Works
The section starts with a review heading:
What Our Customers Say
Under that is an aggregate rating:
4.8 out of 5 · Based on 180+ reviews
The slider contains eight unique review cards.
Each card has:
- star rating
- review text
- initials avatar
- customer name
- green Verified badge
- customer location
After those eight cards, the entire review set is duplicated.
The duplicated cards use:
aria-hidden="true"
which is a good accessibility detail because screen readers do not need to hear the exact same reviews twice.
The .slider-track moves from:
translateX(0)
to:
translateX(-50%)
over 60 seconds.
Because the second half of the track duplicates the first, the animation can restart and appear continuous.
Shopify Liquid Code
{{ 'customer-reviews.css' | asset_url | stylesheet_tag }}
<div class="reviews-section">
<div class="reviews-container">
<div class="reviews-header">
<span class="reviews-eyebrow">Reviews</span>
<h2>What Our Customers Say</h2>
<div class="overall-rating">
<div class="stars">★★★★★</div>
<p><strong>4.8</strong> out of 5 <span>· Based on 180+ reviews</span></p>
</div>
</div>
<!-- Auto Sliding Reviews -->
<div class="slider-container">
<div class="slider-track" id="reviewSlider">
<!-- ===== Review set (duplicated below for a seamless loop) ===== -->
<div class="review-card">
<div class="review-stars" aria-label="5 out of 5 stars">★★★★★</div>
<p class="review-text">These oversized t-shirts are next level — soft fabric and a perfect loose fit. Best purchase in 2026.</p>
<div class="review-author">
<span class="avatar">AH</span>
<div class="who">
<strong>Ali Hassan</strong>
<span class="meta"><span class="badge">✓ Verified</span> Lahore</span>
</div>
</div>
</div>
<div class="review-card">
<div class="review-stars" aria-label="5 out of 5 stars">★★★★★</div>
<p class="review-text">Bought 3 different colors. Quality is premium and the stitching is very good. Highly recommended for oversized lovers.</p>
<div class="review-author">
<span class="avatar">AR</span>
<div class="who">
<strong>Ahmed Raza</strong>
<span class="meta"><span class="badge">✓ Verified</span> Karachi</span>
</div>
</div>
</div>
<div class="review-card">
<div class="review-stars" aria-label="4 out of 5 stars">★★★★<span class="star-empty">★</span></div>
<p class="review-text">Really good t-shirt. Fabric is comfortable for summer. Only took 2 days to deliver in Bahawalpur.</p>
<div class="review-author">
<span class="avatar">TM</span>
<div class="who">
<strong>Talha Mahmood</strong>
<span class="meta"><span class="badge">✓ Verified</span> Bahawalpur</span>
</div>
</div>
</div>
<div class="review-card">
<div class="review-stars" aria-label="5 out of 5 stars">★★★★★</div>
<p class="review-text">I gifted this oversized tee to my brother. He loved the fit and style. Very happy with the purchase!</p>
<div class="review-author">
<span class="avatar">NK</span>
<div class="who">
<strong>Nazia Khan</strong>
<span class="meta"><span class="badge">✓ Verified</span> Islamabad · Gifted</span>
</div>
</div>
</div>
<div class="review-card">
<div class="review-stars" aria-label="5 out of 5 stars">★★★★★</div>
<p class="review-text">Maza aa gaya yar! Best oversized t-shirt in this price range. Fabric feels expensive.</p>
<div class="review-author">
<span class="avatar">AA</span>
<div class="who">
<strong>Abdul Ahad</strong>
<span class="meta"><span class="badge">✓ Verified</span> Multan</span>
</div>
</div>
</div>
<div class="review-card">
<div class="review-stars" aria-label="5 out of 5 stars">★★★★★</div>
<p class="review-text">Perfect drop-shoulder fit, I wear it daily. Washed it 5 times and the color and print still look brand new.</p>
<div class="review-author">
<span class="avatar">MK</span>
<div class="who">
<strong>Maaz Khan</strong>
<span class="meta"><span class="badge">✓ Verified</span> Faisalabad</span>
</div>
</div>
</div>
<div class="review-card">
<div class="review-stars" aria-label="4 out of 5 stars">★★★★<span class="star-empty">★</span></div>
<p class="review-text">Very nice quality. Size is exactly as shown and delivery was fast.</p>
<div class="review-author">
<span class="avatar">DI</span>
<div class="who">
<strong>Dawood Ibrahim</strong>
<span class="meta"><span class="badge">✓ Verified</span> Rawalpindi</span>
</div>
</div>
</div>
<div class="review-card">
<div class="review-stars" aria-label="5 out of 5 stars">★★★★★</div>
<p class="review-text">Gifted to my cousin and he wears it all the time now, haha. Excellent product!</p>
<div class="review-author">
<span class="avatar">NF</span>
<div class="who">
<strong>Nazish Fatima</strong>
<span class="meta"><span class="badge">✓ Verified</span> Lahore · Gifted</span>
</div>
</div>
</div>
<!-- ===== Duplicate set (aria-hidden) — required for the seamless infinite loop ===== -->
<div class="review-card" aria-hidden="true">
<div class="review-stars">★★★★★</div>
<p class="review-text">These oversized t-shirts are next level — soft fabric and a perfect loose fit. Best purchase in 2026.</p>
<div class="review-author">
<span class="avatar">AH</span>
<div class="who"><strong>Ali Hassan</strong><span class="meta"><span class="badge">✓ Verified</span> Lahore</span></div>
</div>
</div>
<div class="review-card" aria-hidden="true">
<div class="review-stars">★★★★★</div>
<p class="review-text">Bought 3 different colors. Quality is premium and the stitching is very good. Highly recommended for oversized lovers.</p>
<div class="review-author">
<span class="avatar">AR</span>
<div class="who"><strong>Ahmed Raza</strong><span class="meta"><span class="badge">✓ Verified</span> Karachi</span></div>
</div>
</div>
<div class="review-card" aria-hidden="true">
<div class="review-stars">★★★★<span class="star-empty">★</span></div>
<p class="review-text">Really good t-shirt. Fabric is comfortable for summer. Only took 2 days to deliver in Bahawalpur.</p>
<div class="review-author">
<span class="avatar">TM</span>
<div class="who"><strong>Talha Mahmood</strong><span class="meta"><span class="badge">✓ Verified</span> Bahawalpur</span></div>
</div>
</div>
<div class="review-card" aria-hidden="true">
<div class="review-stars">★★★★★</div>
<p class="review-text">I gifted this oversized tee to my brother. He loved the fit and style. Very happy with the purchase!</p>
<div class="review-author">
<span class="avatar">NK</span>
<div class="who"><strong>Nazia Khan</strong><span class="meta"><span class="badge">✓ Verified</span> Islamabad · Gifted</span></div>
</div>
</div>
<div class="review-card" aria-hidden="true">
<div class="review-stars">★★★★★</div>
<p class="review-text">Maza aa gaya yar! Best oversized t-shirt in this price range. Fabric feels expensive.</p>
<div class="review-author">
<span class="avatar">AA</span>
<div class="who"><strong>Abdul Ahad</strong><span class="meta"><span class="badge">✓ Verified</span> Multan</span></div>
</div>
</div>
<div class="review-card" aria-hidden="true">
<div class="review-stars">★★★★★</div>
<p class="review-text">Perfect drop-shoulder fit, I wear it daily. Washed it 5 times and the color and print still look brand new.</p>
<div class="review-author">
<span class="avatar">MK</span>
<div class="who"><strong>Maaz Khan</strong><span class="meta"><span class="badge">✓ Verified</span> Faisalabad</span></div>
</div>
</div>
<div class="review-card" aria-hidden="true">
<div class="review-stars">★★★★<span class="star-empty">★</span></div>
<p class="review-text">Very nice quality. Size is exactly as shown and delivery was fast.</p>
<div class="review-author">
<span class="avatar">DI</span>
<div class="who"><strong>Dawood Ibrahim</strong><span class="meta"><span class="badge">✓ Verified</span> Rawalpindi</span></div>
</div>
</div>
<div class="review-card" aria-hidden="true">
<div class="review-stars">★★★★★</div>
<p class="review-text">Gifted to my cousin and he wears it all the time now, haha. Excellent product!</p>
<div class="review-author">
<span class="avatar">NF</span>
<div class="who"><strong>Nazish Fatima</strong><span class="meta"><span class="badge">✓ Verified</span> Lahore · Gifted</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.reviews-section {
--rv-card: #ffffff;
--rv-ink: #14161a;
--rv-muted: #6a7180;
--rv-star: #ffb400;
--rv-accent: #ff4d2e;
--rv-badge: #1ca672;
--rv-card-w: 360px;
background: #EEEEEE;
padding: 80px 0;
text-align: center;
overflow: hidden;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
} padding: 80px 0;
text-align: center;
overflow: hidden;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.reviews-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.reviews-eyebrow {
display: inline-block;
text-transform: uppercase;
letter-spacing: .22em;
font-size: .72rem;
font-weight: 700;
color: var(--rv-accent);
margin-bottom: 10px;
}
.reviews-header h2 {
font-size: clamp(1.9rem, 4vw, 2.7rem);
line-height: 1.1;
color: var(--rv-ink);
margin: 0 0 16px;
font-weight: 800;
letter-spacing: -.02em;
}
.overall-rating {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 4px;
color: var(--rv-ink);
}
.overall-rating .stars {
color: var(--rv-star);
font-size: 1.9rem;
letter-spacing: 6px;
line-height: 1;
}
.overall-rating p {
margin: 0;
font-size: 1rem;
color: var(--rv-muted);
}
.overall-rating strong {
color: var(--rv-ink);
font-size: 1.1rem;
}
/* ---- Slider ---- */
.slider-container {
margin-top: 54px;
position: relative;
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.slider-track {
display: flex;
gap: 24px;
width: max-content;
padding: 14px 0;
animation: rv-slide 60s linear infinite;
}
.slider-track:hover { animation-play-state: paused; }
.review-card {
position: relative;
flex: 0 0 var(--rv-card-w);
width: var(--rv-card-w);
background: var(--rv-card);
padding: 30px 28px 26px;
border-radius: 18px;
border: 1px solid rgba(20, 22, 26, .06);
box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px -12px rgba(16, 24, 40, .18);
text-align: left;
transition: transform .3s ease, box-shadow .3s ease;
overflow: hidden;
}
.review-card::before {
content: "201C";
position: absolute;
top: 6px;
right: 18px;
font-family: Georgia, "Times New Roman", serif;
font-size: 5.5rem;
line-height: 1;
color: var(--rv-accent);
opacity: .12;
pointer-events: none;
}
.review-card:hover {
transform: translateY(-8px);
box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 22px 40px -14px rgba(16, 24, 40, .28);
}
.review-stars {
color: var(--rv-star);
font-size: 1.25rem;
letter-spacing: 3px;
margin-bottom: 16px;
}
.review-stars .star-empty { color: #d8dbe1; }
.review-text {
font-size: 1.02rem;
line-height: 1.6;
color: #2a2e36;
margin: 0 0 22px;
font-weight: 450;
}
.review-author {
display: flex;
align-items: center;
gap: 12px;
border-top: 1px solid rgba(20, 22, 26, .07);
padding-top: 16px;
}
.avatar {
flex: 0 0 auto;
width: 42px;
height: 42px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .85rem;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, var(--rv-accent), #ff7a2e);
letter-spacing: .02em;
}
.who { display: flex; flex-direction: column; gap: 3px; }
.who strong {
font-size: 1rem;
color: var(--rv-ink);
line-height: 1.1;
}
.meta {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: .82rem;
color: var(--rv-muted);
}
.badge {
display: inline-flex;
align-items: center;
gap: 3px;
background: rgba(28, 166, 114, .12);
color: var(--rv-badge);
font-weight: 700;
font-size: .72rem;
padding: 2px 8px;
border-radius: 999px;
}
@keyframes rv-slide {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (max-width: 768px) {
.reviews-section { padding: 56px 0; --rv-card-w: 300px; }
.slider-container { margin-top: 36px; }
.review-text { font-size: .98rem; }
}
/* Accessibility: no motion + let users scroll manually */
@media (prefers-reduced-motion: reduce) {
.slider-track { animation: none; }
.slider-container {
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-mask-image: none;
mask-image: none;
}
.review-card { scroll-snap-align: start; }
}
</style>The Main Issue: The Reviews Are Hard-Coded
The supplied markup contains customer names such as:
Ali Hassan
Ahmed Raza
Talha Mahmood
Nazia Khan
and others.
It also contains specific review statements, cities, star ratings, and Verified badges.
None of that comes from Shopify.
There is no review app object, API request, customer-order lookup, or Liquid data source.
That means the section should be treated as a design demo unless these are genuine reviews you are authorized to display.
1. Replace Demo Reviews With Real Customer Reviews
The most important improvement is simple: use genuine review data.
If your store uses a review platform, pull reviews through the provider’s approved integration, app block, API, or exported data.
If you manage testimonials manually, only publish feedback you can verify came from real customers.
Do not create realistic names and cities just to make the slider look active.
The visual design already does enough work. The content should not need to pretend.
2. The “Verified” Badge Must Mean Something
Every visible review card contains:
✓ Verified
That label suggests the reviewer has been checked as a genuine purchaser.
But the snippet does not perform any verification.
If the review provider marks a review as verified, showing the badge makes sense.
If not, remove it.
A safer fallback is to display the customer name and review without any purchase-status claim.
This is especially important because the duplicate cards also repeat the Verified badge.
3. The 4.8 Rating and 180+ Review Count Are Static
The header shows:
4.8 out of 5 · Based on 180+ reviews
That looks like live aggregate review data.
It is not.
The value is plain HTML.
If your real store rating is 4.6 from 73 reviews, then showing 4.8 from 180+ would be inaccurate.
Use real aggregate values or remove the aggregate block.
A smaller real review count is more useful than an impressive number that cannot be supported.
4. The Infinite Loop Technique Is Good
The review set is duplicated manually.
That is intentional.
The first set contains the visible review cards.
The second set contains the same content with aria-hidden="true".
The slider then animates by exactly 50%.
That gives the section a continuous movement without JavaScript.
This is a solid implementation.
The downside is maintenance.
If you edit a review in the first set but forget to update its duplicate, the loop will no longer contain matching halves.
A future Shopify section could generate the duplicate automatically with Liquid so each review only needs to be entered once.
5. Reduced-Motion Support Is Already Better Than Most Snippets
One of the best parts of this code is the reduced-motion fallback.
When the visitor has:
prefers-reduced-motion: reduce
enabled, the automatic animation stops.
The container switches to horizontal manual scrolling.
It also uses:
scroll-snap-type: x mandatory
and:
scroll-snap-align: start
for the cards.
That is a much better accessibility approach than simply freezing the track halfway through.
The customer can still browse every review, just without continuous motion.
I would keep this behavior.
6. Fix the CSS Syntax Error Around .reviews-section
There is a noticeable CSS problem after the main .reviews-section block.
The code closes the block and then repeats:
padding: 80px 0;
text-align: center;
overflow: hidden;
font-family: ...
followed by another closing brace.
That repeated fragment sits outside a selector.
Browsers will ignore invalid declarations there, but it makes the stylesheet messy and can make debugging harder.
Remove the duplicate declarations after the first closing brace.
The correct .reviews-section rule already contains those properties.
This is worth fixing before publishing the snippet in your code library.
7. Review the External CSS Asset Reference
The first line loads:
customer-reviews.css
with Shopify’s asset_url.
But the snippet also includes the full review styling inside a <style> block.
If customer-reviews.css already contains the same CSS, you may be loading the styles twice.
If the asset does not exist, the browser will request a missing stylesheet.
Choose one approach:
- keep the CSS in the asset file and remove the inline style block
- or keep the inline CSS and remove the stylesheet asset reference
For a reusable production theme, a separate asset can be cleaner.
For a simple downloadable tutorial snippet, inline CSS is easier for beginners because everything stays in one file.
The Review Cards Are Designed Well
Each review card has a fixed width of 360px on desktop.
That drops to 300px below 768px.
The layout is simple and readable.
The design uses:
- white cards
- light gray section background
- orange accent color
- yellow star ratings
- green verification badge
- initials avatars
- subtle card shadow
- hover lift
The large decorative quotation mark in the corner adds visual detail without affecting the text.
This is a good example of adding personality without making the review body difficult to read.
Hover Pause Is Useful
The slider pauses when the visitor hovers over the track.
That gives desktop users time to read a review without chasing moving text.
For mobile users, there is no hover state.
The 60-second animation duration is relatively slow, which helps.
If your real review text is longer than the current examples, consider slowing the slider further.
The goal is readability, not constant movement.
Avoid Product-Specific Claims on the Wrong Products
Several reviews specifically mention oversized T-shirts.
Examples include comments about:
- oversized fit
- drop shoulders
- T-shirt fabric
- washing the print
- summer comfort
That means the supplied content is clearly written for one apparel product type.
If this section is added to a general product template, these reviews could appear on products they do not describe.
A reusable version should either:
- load product-specific reviews
- use separate templates
- or make review content editable per product
Do not show a T-shirt review underneath a completely different product simply because the slider looks good.
Scrolling Reviews vs. Live Review Widget
You already have [INTERNAL LINK NEEDED: Shopify Live Review Widget Liquid].
The live-review widget shows one review at a time in a chat-style layout.
This scrolling-review section shows several cards in a continuous horizontal stream.
Use the chat widget when you want a compact product-page element.
Use this slider when you want reviews to become a larger visual section.
Both should rely on genuine customer feedback.
Scrolling Reviews vs. Compact Trust Section
The [INTERNAL LINK NEEDED: Shopify Compact Trust Section Liquid] focuses on short trust metrics.
This section focuses on written customer experiences.
Those two forms of social proof can work together, but avoid repeating unsupported numbers.
For example, if the review slider already shows a genuine aggregate rating and count, the trust strip does not also need an invented 5,000+ Verified Reviews message.
One real source of proof is stronger than several conflicting claims.
Pair It With Product Benefits
The [INTERNAL LINK NEEDED: Shopify Product Benefits Liquid] can sit above this review section.
The benefits block explains what the merchant says about the product.
The reviews explain what customers say.
That creates a natural content flow:
Product benefits → Purchase area → Reviews
It also reduces the need to overload each review with technical product information.
Accessibility Notes
The original review cards include useful:
aria-label
text for star ratings.
The duplicate cards are hidden from assistive technology with:
aria-hidden="true".
The reduced-motion fallback is also strong.
One improvement would be to ensure the manually scrollable slider has a meaningful accessible label if it becomes an important interactive region.
For example, a future version could use a semantic section heading relationship or region label.
Frequently Asked Questions
Are these reviews pulled from Shopify automatically?
No. The supplied review cards are hard-coded HTML.
Does this code use JavaScript?
No. The scrolling animation is CSS-only.
Why are the reviews duplicated?
The second set allows the slider to loop continuously while moving by 50% of the track width.
Are the Verified badges real?
Not automatically. The code does not verify purchases.
Does the slider support reduced motion?
Yes. Automatic animation stops and the cards become manually scrollable.
Can I use this on a homepage?
Yes. It can work on a homepage or product page, but make sure the reviews are relevant to the context where they appear.
Can I connect it to a review app?
Yes, but the integration method depends on the review provider. The supplied version does not include that connection.
Explore More Shopify Code
Shopify Scrolling Marquee Liquid
A Shopify Scrolling Marquee Liquid section is a good fit when you want to add movement to a storefront without bringing in a slider library or extra JavaScript.
https://css-liquids-for-shopify.site/shopify-scrolling-marquee-liquid/
Shopify Compact Trust Section Liquid
A Shopify Compact Trust Section Liquid can place several trust signals into a very small area of the storefront. The supplied snippet combines two pieces: a dark social-proof header showing “10,000+ Happy Customers” with a pulsing Live badge, and a continuously scrolling trust bar underneath.
https://css-liquids-for-shopify.site/shopify-compact-trust-section-liquid/
For more help, you can read Shopify’s official theme customization guide :Shopify Theme Customization Guide
For Shopify’s Liquid section you can visit over Shopify Liquid Code Library: https://css-liquids-for-shopify.site/shopify-liquid-code-library/
3 Responses