review auto slider
Page: Product Pages (Optimized for Conversions)
Snippet Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<title>reviews Bar with Infinite Scroll</title>
<style>
/* .shopify-section-spaced-section >.shopify-section-template--19301802901741__custom_liquid_jKrJKT{
margin-top: 60px !important;
} */
.reviews-bar,
.reviews-barv2 {
width: 200%;
padding: 3px 0;
overflow: hidden;
white-space: nowrap;
position: relative;
margin-top: 50px;
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
.reviews-wrapper,
.reviews-wrapperv2 {
display: flex;
}
.reviews-wrapper {
animation: scroll-text 20s linear infinite;
}
.reviews-wrapperv2 {
animation: scroll-text-reverse 20s linear infinite;
}
.reviews-text,
.reviews-textv2 {
color: #000;
font-size: 12px;
font-weight: 500;
margin-right: 15px;
border: 2px solid #f2f2f2;
padding: 15px 70px;
/* border-radius: 5px; */
display: flex;
flex-direction: row;
gap: 18px;
align-items: center;
justify-content: center;
max-width: 300px;
line-height: 15px;
}
.star {
margin-bottom: 30px;
Color: black;
font-weight: bold;
line-height: 20px;
}
.profile-pictures {
width: 300px;
height: 200px;
object-fit: cover;
}
@keyframes scroll-text {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-75%);
}
}
@keyframes scroll-text-reverse {
0% {
transform: translateX(-75%);
}
100% {
transform: translateX(0);
}
}
@media screen and (max-width: 768px) {
.reviews-bar,
.reviews-barv2 {
width: 100%;
overflow: hidden;
}
.reviews-text {
font-size: 12px;
padding: 10px 15px;
min-width: 200px;
max-width: 200px;
}
.profile-pictures {
width: 60px;
height: 60px;
}
.star {
font-size: 12px;
line-height: 15px;
}
@keyframes scroll-text {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
@keyframes scroll-text-reverse {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
}
@media screen and (max-width: 1199.98px) {
.shopify-section:not(.contact-us, .not-hide-br) br {
display: block !important;
}
}
</style>
</head>
<body>
<div class="reviews-barv2">
<div class="reviews-wrapperv2">
<div class="reviews-text"> <img
src="https://cdn.shopify.com/s/files/1/0876/4325/9193/files/1584747929_-1606356422_b3d9448bf515f_512_65eb7b92-c58f-4bba-9f01-c01a2c6f5551.jpg?v=1740742855"
User Profile Picture" class="profile-pictures">
<span class="star"><i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-regular fa-star"></i><br><br> Also color is so <br> pretty better <br> than shown in
<br> picture.</span>
</div>
<div class="reviews-text"> <img
src="https://cdn.shopify.com/s/files/1/0876/4325/9193/files/4553005475_4578239867_01892bd4f8394_512.jpg?v=1740742855"
User Profile Picture" class="profile-pictures">
<span class="star"><i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-regular fa-star"></i><br><br> Very comfortable <br> and good quality <br> ♥️.</span>
</div>
<div class="reviews-text"> <img
src="https://cdn.shopify.com/s/files/1/0876/4325/9193/files/1043166642_-1062411903_8417b760c3b9f_512_40e0201c-7630-4354-bed1-1f614457210a.jpg?v=1740742856"
User Profile Picture" class="profile-pictures">
<span class="star"><i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i><br><br> Fit, Fabric, <br> Comfort and style
<br> all very good.</span>
</div>
<div class="reviews-text"> <img
src="https://cdn.shopify.com/s/files/1/0876/4325/9193/files/1_36319527_ba2682ae583e8_512.jpg?v=1740722303"
User Profile Picture" class="profile-pictures">
<span class="star"><i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i><br><br> Fitting and size is <br> perfect.
Colour is <br> good 👍.</span>
</div>
<div class="reviews-text"> <img
src="https://cdn.shopify.com/s/files/1/0876/4325/9193/files/4573332494_4598650537_5676d0d89efbc_512.jpg?v=1740722073"
User Profile Picture" class="profile-pictures">
<span class="star"><i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i><br><br> Lookwise and <br> comfort is <br>
great…</span>
</div>
<div class="reviews-text"> <img
src="https://cdn.shopify.com/s/files/1/0876/4325/9193/files/1876880320_-1899831991_9eb5f7f6e8e55_512.jpg?v=1741424952"
User Profile Picture" class="profile-pictures">
<span class="star"><i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-regular fa-star"></i><br><br> Amazing quality <br> and fitting <br> worth for
<br> money</span>
</div>
<div class="reviews-text"> <img
src="https://cdn.shopify.com/s/files/1/0876/4325/9193/files/1788481347_-1811029299_29ecc1733f6fe_512.jpg?v=1741429349"
User Profile Picture" class="profile-pictures">
<span class="star"><i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-regular fa-star"></i><br><br> Good quality <br> and comfortable <br> to wear.</span>
</div>
<div class="reviews-text"> <img
src="https://cdn.shopify.com/s/files/1/0876/4325/9193/files/712-DvCaNkL.jpg?v=1741429350" User
Profile Picture" class="profile-pictures">
<span class="star"><i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i><br><br> Comfortable and <br> beautiful
frock <br> 👌
</span>
</div>
</div>
</div>
<div class="reviews-bar">
<div class="reviews-wrapper">
<div class="reviews-text"> <img
src="https://cdn.shopify.com/s/files/1/0876/4325/9193/files/1874988073_-1897929750_c1a1ec99443a8_512.jpg?v=1742291347"
User Profile Picture" class="profile-pictures">
<span class="star"><i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-regular fa-star"></i><br><br> Very good <br> quality nice <br> product you <br> must
try <br> product 💗</span>
</div>
<div class="reviews-text"> <img
src="https://cdn.shopify.com/s/files/1/0876/4325/9193/files/4215171284_4238988178_77f57383c550b_512.jpg?v=1742291347"
User Profile Picture" class="profile-pictures">
<span class="star"><i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-regular fa-star"></i><br><br> Nice color <br> and cloth <br> very good 👍</span>
</div>
<div class="reviews-text"> <img
src="https://cdn.shopify.com/s/files/1/0876/4325/9193/files/1_127463220_5130975f5f4a7_128.jpg?v=1742291347"
User Profile Picture" class="profile-pictures">
<span class="star"><i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i><br><br> Value for <br> money. It's <br>
really very <br> nice for <br> summer.</span>
</div>
<div class="reviews-text"> <img
src="https://cdn.shopify.com/s/files/1/0876/4325/9193/files/2052664090_-2076412082_cb24fba8fa2e4_128.jpg?v=1742291347"
User Profile Picture" class="profile-pictures">
<span class="star"><i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i><br><br> Very beautiful <br> and good <br>
looking in <br> low price</span>
</div>
<div class="reviews-text"> <img
src="https://cdn.shopify.com/s/files/1/0876/4325/9193/files/2109221167_-2133214065_b6b224728f9fa_128.jpg?v=1742291347"
User Profile Picture" class="profile-pictures">
<span class="star"><i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-regular fa-star"></i><br><br> Nice colour <br> good quality <br> material, value <br>
for money <br>Love it</span>
</div>
<div class="reviews-text"> <img
src="https://cdn.shopify.com/s/files/1/0876/4325/9193/files/986229464_-1005202259_bfe170db8be88_512.jpg?v=1742292147"
User Profile Picture" class="profile-pictures">
<span class="star"><i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i><br><br> Looking nice <br> only little <br>
tight on <br> the shoulder.</span>
</div>
<div class="reviews-text"> <img
src="https://cdn.shopify.com/s/files/1/0876/4325/9193/files/61WSNsNRXDL_d7380116-d8bf-4322-bf2e-6e21fcfec5b8.jpg?v=1742293940"
User Profile Picture" class="profile-pictures">
<span class="star"><i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i><br><br> Loved the <br> way it looked <br>
on me. Nice <br> fitting and <br> flowy.</span>
</div>
<div class="reviews-text"> <img
src="https://cdn.shopify.com/s/files/1/0876/4325/9193/files/6173fdbd-88fa-4063-b868-2d7b42435a461718617867280-image811.jpg?v=1742296757"
User Profile Picture" class="profile-pictures">
<span class="star"><i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i>
<i class="fa-solid fa-star" style="color: #fab005;"></i><br><br> Same as a <br> pictures and <br>
quality is so <br> good 💖
</span>
</div>
</div>
</div>
</body>
</html>Instructions
Heyy Guys 
Watch the video below to learn how to Import these Codes into your Shopify Ecommerce Store!