Back to Shopify Liquid
Shopify Liquid
Review sliders
Drop this Shopify Liquid snippet into your theme to add the review sliders block. Copy the code below, paste it into your theme files, save and you're done.
166 lines · 8.0 KB
Shopify Liquid
1<!DOCTYPE html>2<html lang="en">3 <head>4 <meta charset="UTF-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />6 <title>reviews Bar with Infinite Scroll</title>7 <style>8 .reviews-bar,9 .reviews-barv2 {10 width: 100%;11 padding: 3px 0;12 overflow: hidden;13 white-space: nowrap;14 position: relative;15margin-top: 10px;16max-width: 1500px;17margin-right: auto;18margin-left: auto;19 }20 .reviews-wrapper,21 .reviews-wrapperv2 {22 display: flex;23 }24 .reviews-wrapper {25 animation: scroll-text 20s linear infinite;26 }27 .reviews-wrapperv2 {28 animation: scroll-text-reverse 20s linear infinite;29 }30.reviews-text, .reviews-textv2 {31 color: #000;32 font-size: 12px;33 font-weight: 500;34 margin-right: 15px;35 border: 2px solid #f2f2f2;36 padding: 10px 30px;37 border-radius: 5px;38 display: flex;39 flex-direction: row;40 gap: 18px;41 align-items: center;42 justify-content: center;43max-width: 300px;44line-height: 15px;45}4647 .profile-pictures {48 width: 30px;49 height: 30px;50 border-radius: 50%;51 object-fit: cover;52 }53 @keyframes scroll-text {54 0% {55 transform: translateX(0);56 }57 100% {58 transform: translateX(-100%);59 }60 }61 @keyframes scroll-text-reverse {62 0% {63 transform: translateX(-100%);64 }65 100% {66 transform: translateX(0);67 }68 }69 </style>70 </head>71 <body>72 <div class="reviews-barv2">73 <div class="reviews-wrapperv2">74 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">75<span>review goes here<br>76new line</span></div>77 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">78<span>review goes here<br>79new line</span></div>80 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">81<span>review goes here<br>82new line</span></div>83 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">84<span>review goes here<br>85new line</span></div>86 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">87<span>review goes here<br>88new line</span></div>89 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">90<span>review goes here<br>91new line</span></div>92 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">93<span>review goes here<br>94new line</span></div>95 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">96<span>review goes here<br>97new line</span></div>98 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">99<span>review goes here<br>100new line</span></div>101 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">102<span>review goes here<br>103new line</span></div>104 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">105<span>review goes here<br>106new line</span></div>107 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">108<span>review goes here<br>109new line</span></div>110 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">111<span>review goes here<br>112new line</span></div>113 <div class="reviews-textv2"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">114<span>review goes here<br>115new line</span></div>116 </div>117 </div>118<div class="reviews-bar">119 <div class="reviews-wrapper">120 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">121<span>review goes here<br>122new line</span></div>123 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">124<span>review goes here<br>125new line</span></div>126 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">127<span>review goes here<br>128new line</span></div>129 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">130<span>review goes here<br>131new line</span></div>132 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">133<span>review goes here<br>134new line</span></div>135 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">136<span>review goes here<br>137new line</span></div>138 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">139<span>review goes here<br>140new line</span></div>141 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">142<span>review goes here<br>143new line</span></div>144 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">145<span>review goes here<br>146new line</span></div>147 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">148<span>review goes here<br>149new line</span></div>150 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">151<span>review goes here<br>152new line</span></div>153 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">154<span>review goes here<br>155new line</span></div>156 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">157<span>review goes here<br>158new line</span></div>159 <div class="reviews-text"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdwXtAOL0wCTsYOlr33hJX33swJ5ItWUmeRA&s"User Profile Picture" class="profile-pictures">160<span>review goes here<br>161new line</span></div>162163 </div>164 </div>165 </body>166</html>
