Back to Shopify Liquid
Shopify Liquid
Review Sliders v2
Drop this Shopify Liquid snippet into your theme to add the review sliders v2 block. Copy the code below, paste it into your theme files, save and you're done.
273 lines · 10.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>Card Slider with Swiper</title>7 <!-- Swiper CSS -->8 <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">9 <style>1011 #card-container {12 width: 100%;13 margin: 0 auto;14 overflow: hidden;15 position: relative;1617 }18 .swiper-wrapper {19 min-width: 100%; /* Set a minimum width to prevent excessive compression */20 box-sizing: content-box; /* Ensure the width includes padding and border, but not margin */21}2223 .swiper-container {24 width: calc(100% - 20px);25 position: relative;26 margin: 0 auto;27padding: 10px 0px;28 }2930@keyframes upAndDown {31 0%, 100% {32 transform: translateY(0); /* Original position */33 }34 25% {35 transform: translateY(-4px);36 }37 50% {38 transform: translateY(0px);39 }40 75% {41 transform: translateY(4px);42 }43}4445@keyframes downAndUp {46 0%, 100% {47 transform: translateY(0); /* Original position */48 }49 25% {50 transform: translateY(4px);51 }52 50% {53 transform: translateY(0px);54 }55 75% {56 transform: translateY(-4px);57 }58}5960.swiper-slide:nth-child(odd) {61 animation: upAndDown 4s infinite linear;62}6364.swiper-slide:nth-child(even) {65 animation: downAndUp 4s infinite linear;66}676869.swiper-slide {70 max-width: 280px;71 height: 230px;72 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);73 display: flex;74 flex-direction: column;75 align-items: center;76 background-color: #fff;77 border: 2px solid rgb(239, 239, 243);78 border-radius: 5px;79 padding: 11px;80 box-sizing: border-box;81 justify-content: space-between;82 gap: 15px;83}84858687 .rating {88 font-size: 32px;89 color: #f7d131;90 margin-top: 10px;91line-height: 20px;92 }9394 .description {95 font-size: 14px;96 color: #333;97 text-align: center;98 justify-content: space-between;99 line-height: 22px;100 }101.name{102 display: flex;103 align-items: center;104 gap: 5px;105}106107108109 .swiper-button-prev, .swiper-button-next {110 color: white;111 font-size: 15px!important;112 background-color: #333;113 width: 30px;114 height: 30px;115 border-radius: 50%;116 margin: 0 10px;117 top: 42%!important;118 }119120 @media (max-width: 767px) {121 .swiper-button-prev, .swiper-button-next {122 display: none;123 }124 }125126 .swiper-pagination {127 position: relative;128 top: auto;129 left: auto;130 right: auto;131 margin-top: 30px;132 display: flex;133 justify-content: center;134 align-items: center;135 }136137.swiper-pagination-bullet {138 width: 2.5rem;139 height: 0.5rem;140 background-color: #0d437d;141 margin: 0 5px;142 border-radius: 0px;143 cursor: pointer;144 margin: 0 var(--swiper-pagination-bullet-horizontal-gap,0px)!important;145}146147 .swiper-pagination-bullet-active {148 width: 3rem;149background-image: linear-gradient(45deg, #1cbcc3, #4abf8f 80%);150 border-radius: 4px;151 }152 .swiper-button-next:after,.swiper-button-prev:after {153 font-family: swiper-icons;154 font-size: 15px;155 text-transform: none!important;156 letter-spacing: 0;157 font-variant: initial;158 line-height: 1159}160161 </style>162163164165166167168<div class="container">169 <div id="card-container">170 <div class="swiper-container">171 <div class="swiper-wrapper">172 <div class="swiper-slide">173 <div class="rating">★★★★★</div>174 <div class="description">"I much prefer them over liquid detergent because they are easy to store, clean to use and I love that you can rip the sheets if you want to change the amount you are using."</div>175 <div class = "name"> <font style = "color: #13152f!important; font-weight: bold;">Davina K</font> <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" width="20px" height="20px" alt="Verified"> <font style = "font-size: 12px; color: #13152f;" >Verified</font></div>176 </div>177 <div class="swiper-slide">178 <div class="rating">★★★★★</div>179 <div class="description">"I'm impressed so far with the cleaning power, as well as the convenience. Of course limited packaging waste is a big win, too!"</div>180 <div class = "name"> <font style = "color: #13152f!important; font-weight: bold;">Aliza</font> <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" width="20px" height="20px" alt="Verified"> <font style = "font-size: 13px; color: #13152f;" >Verified</font></div>181 </div>182 <div class="swiper-slide">183 <div class="rating">★★★★★</div>184 <div class="description">Very simple detergent, does the job just as good, small pacakging, great product"</div>185 <div class = "name""> <font style = "color: #13152f!important; font-weight: bold;">Jayna H</font> <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" width="20px" height="20px" alt="Verified"> <font style = "font-size: 13px; color: #13152f;" >Verified</font></div>186 </div>187<div class="swiper-slide">188 <div class="rating">189 <span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="color: #DDDDDD;">★</span>190 </div>191 <div class="description" style = "margin-top:10px">192 "Yes very happy with the product. I bought it to use when travelling in our caravan. Light and convenient. Tested it on clothes at home and seems to work very well."193 </div>194 <div class = "name"> <font style = "color: #13152f!important; font-weight: bold;">Ally</font> <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" width="20px" height="20px" alt="Verified"> <font style = "font-size: 13px; color: #13152f;" >Verified</font></div>195</div>196197 <div class="swiper-slide">198 <div class="rating">★★★★★</div>199 <div class="description">"200 i used to get rashes before using these sheets, well not anymore, thank you so much!201 "</div>202 <div class = "name" > <font style = "color: #13152f!important; font-weight: bold;">Mehul G</font> <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" width="20px" height="20px" alt="Verified"> <font style = "font-size: 13px; color: #13152f;" >Verified</font></div>203 </div>204 <div class="swiper-slide">205 <div class="rating">★★★★★</div>206 <div class="description">"207 Easy to order, easy to use and great washing results !208 "</div>209 <div class = "name"> <font style = "color: #13152f!important; font-weight: bold;">Noah D</font> <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" width="20px" height="20px" alt="Verified"> <font style = "font-size: 13px; color: #13152f;" >Verified</font></div>210 </div>211<div class="swiper-slide">212 <div class="rating">213 <span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="background-image: linear-gradient(to right, #f7d131 50%, #dddddd 50%);214 -webkit-background-clip: text !important;215 -moz-background-clip: text !important;216 -webkit-text-fill-color: transparent !important;">★</span>217 </div>218 <div class="description">It has completely stopped my skin irritation, i never knew how harmful my liquid detergent was</div>219 <div class = "name"> <font style = "color: #13152f!important; font-weight: bold;">Ada T</font> <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" width="20px" height="20px" alt="Verified"> <font style = "font-size: 13px; color: #13152f;" >Verified</font></div>220</div>221222<div class="swiper-slide">223 <div class="rating">224 <span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="color: #DDDDDD;">★</span>225 </div>226 <div class="description">My shelves are now free for my other cleaning supplies, one neat tidy cupboard for all my supplies thanks to your compact detergent</div>227 <div class = "name"> <font style = "color: #13152f!important; font-weight: bold;">Martha</font> <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" width="20px" height="20px" alt="Verified"> <font style = "font-size: 13px; color: #13152f;" >Verified</font></div>228</div>229 </div>230 <!-- Add Navigation Arrows -->231 <div class="swiper-button-prev"></div>232 <div class="swiper-button-next"></div>233 <!-- Add Pagination -->234 <div class="swiper-pagination"></div>235 </div>236 </div>237</div>238239240 <!-- Swiper JS -->241 <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>242 <script>243 document.addEventListener("DOMContentLoaded", function () {244 var swiper = new Swiper('.swiper-container', {245 slidesPerView: 'auto',246 spaceBetween: 10,247 navigation: {248 nextEl: '.swiper-button-next',249 prevEl: '.swiper-button-prev',250 },251 pagination: {252 el: '.swiper-pagination',253 clickable: true,254 },255 autoplay: {256 delay: 10000, // Autoplay every 10 seconds257 disableOnInteraction: false, // Allow manual navigation without stopping autoplay258 },259 breakpoints: {260 1024: {261 slidesPerView: 3,262 },263 1300: {264 slidesPerView: 4,265 },266 },267 });268 });269 </script>270271272</body>273</html>
