Back to Shopify Liquid
Shopify Liquid
Scrolling Reviews
Drop this Shopify Liquid snippet into your theme to add the scrolling reviews block. Copy the code below, paste it into your theme files, save and you're done.
196 lines · 6.7 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>Scrolling Reviews</title>7 <style>8 body.unique-body-vB79Q1 {9 font-family: Arial, sans-serif;10 display: flex;11 flex-direction: column;12 align-items: center;13 height: 100vh;14 margin: 0;15 background-color: #f8f4f1;16 }1718 /* Başlık Stili */19 .unique-title-Yp8T4 {20 font-size: 18px;21 font-weight: bold;22 color: #0d0d0d;23 margin-bottom: 15px;24 text-align: center;25 }2627 .unique-title-Yp8T4 span {28 font-family: 'Dancing Script', cursive; /* El yazısı fontu */29 font-size: 36px; /* Daha büyük font boyutu */30 background: linear-gradient(90deg, #32CD32, #006400); /* Daha modern gradyan yeşil */31 -webkit-background-clip: text;32 -webkit-text-fill-color: transparent;33 font-weight: bold;34 }3536 .unique-container-Xr4D2a {37 width: 100%;38 overflow: hidden;39 position: relative;40 display: flex;41 flex-direction: column;42 gap: 20px;43 }4445 .unique-slider-Rc9G7h {46 display: flex;47 gap: 20px;48 animation: scrollAnimation-8Tm5Yp 30s linear infinite;49 }5051 .unique-card-Lj6Z8k {52 background-color: #fff;53 border-radius: 25px;54 box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);55 padding: 15px 20px;56 display: flex;57 align-items: center;58 margin: 10px 0;59 white-space: nowrap;60 min-width: max-content;61 box-sizing: border-box;62 }6364 .unique-image-Ys3Kv9 {65 width: 40px;66 height: 40px;67 border-radius: 50%;68 margin-right: 15px;69 box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f4b400;70 }7172 @keyframes scrollAnimation-8Tm5Yp {73 0% {74 transform: translateX(0);75 }76 100% {77 transform: translateX(-100%);78 }79 }8081 /* Mobil versiyon için animasyon daha hızlı */82 @media (max-width: 768px) {83 .unique-slider-Rc9G7h {84 animation: scrollAnimation-8Tm5Yp 15s linear infinite; /* Daha hızlı */85 }86 }8788 /* Scroll Animation for the second row, in opposite direction */89 .unique-slider-Rc9G7h:nth-child(2) {90 animation-direction: reverse;91 }92 </style>93 <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet">94</head>95<body class="unique-body-vB79Q1">9697<!-- Başlık -->98<h1 class="unique-title-Yp8T4">Our customers <span>love</span> the product</h1>99100<div class="unique-container-Xr4D2a">101 <!-- Row 1 -->102 <div class="unique-slider-Rc9G7h">103 <div class="unique-card-Lj6Z8k">104 <img class="unique-image-Ys3Kv9" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Image">105 <p>The perfect fall slippers!</p>106 </div>107 <div class="unique-card-Lj6Z8k">108 <img class="unique-image-Ys3Kv9" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Image">109 <p>My new favorite pair of shoes!</p>110 </div>111 <div class="unique-card-Lj6Z8k">112 <img class="unique-image-Ys3Kv9" src="https://randomuser.me/api/portraits/women/3.jpg" alt="User Image">113 <p>A MUST buy for fall!</p>114 </div>115 <div class="unique-card-Lj6Z8k">116 <img class="unique-image-Ys3Kv9" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Image">117 <p>10/10 Worth every penny</p>118 </div>119 <div class="unique-card-Lj6Z8k">120 <img class="unique-image-Ys3Kv9" src="https://randomuser.me/api/portraits/women/5.jpg" alt="User Image">121 <p>I absolutely am in love with the slippers! I wear them everywhere!</p>122 </div>123124 <!-- Duplicate Row 1 for Smooth Loop -->125 <div class="unique-card-Lj6Z8k">126 <img class="unique-image-Ys3Kv9" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Image">127 <p>The perfect fall slippers!</p>128 </div>129 <div class="unique-card-Lj6Z8k">130 <img class="unique-image-Ys3Kv9" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Image">131 <p>My new favorite pair of shoes!</p>132 </div>133 <div class="unique-card-Lj6Z8k">134 <img class="unique-image-Ys3Kv9" src="https://randomuser.me/api/portraits/women/3.jpg" alt="User Image">135 <p>A MUST buy for fall!</p>136 </div>137 <div class="unique-card-Lj6Z8k">138 <img class="unique-image-Ys3Kv9" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Image">139 <p>10/10 Worth every penny</p>140 </div>141 <div class="unique-card-Lj6Z8k">142 <img class="unique-image-Ys3Kv9" src="https://randomuser.me/api/portraits/women/5.jpg" alt="User Image">143 <p>I absolutely am in love with the slippers! I wear them everywhere!</p>144 </div>145 </div>146147 <!-- Row 2 (Opposite Direction) -->148 <div class="unique-slider-Rc9G7h">149 <div class="unique-card-Lj6Z8k">150 <img class="unique-image-Ys3Kv9" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Image">151 <p>Comfy. Can't think of a better autumn shoe!</p>152 </div>153 <div class="unique-card-Lj6Z8k">154 <img class="unique-image-Ys3Kv9" src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Image">155 <p>OMG! Best autumn shoe!</p>156 </div>157 <div class="unique-card-Lj6Z8k">158 <img class="unique-image-Ys3Kv9" src="https://randomuser.me/api/portraits/women/8.jpg" alt="User Image">159 <p>Perfect for chilly days!</p>160 </div>161 <div class="unique-card-Lj6Z8k">162 <img class="unique-image-Ys3Kv9" src="https://randomuser.me/api/portraits/men/9.jpg" alt="User Image">163 <p>Amazing quality and comfort!</p>164 </div>165 <div class="unique-card-Lj6Z8k">166 <img class="unique-image-Ys3Kv9" src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Image">167 <p>Stylish and super comfy!</p>168 </div>169170 <!-- Duplicate Row 2 for Smooth Loop -->171 <div class="unique-card-Lj6Z8k">172 <img class="unique-image-Ys3Kv9" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Image">173 <p>Comfy. Can't think of a better autumn shoe!</p>174 </div>175 <div class="unique-card-Lj6Z8k">176 <img class="unique-image-Ys3Kv9" src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Image">177 <p>OMG! Best autumn shoe!</p>178 </div>179 <div class="unique-card-Lj6Z8k">180 <img class="unique-image-Ys3Kv9" src="https://randomuser.me/api/portraits/women/8.jpg" alt="User Image">181 <p>Perfect for chilly days!</p>182 </div>183 <div class="unique-card-Lj6Z8k">184 <img class="unique-image-Ys3Kv9" src="https://randomuser.me/api/portraits/men/9.jpg" alt="User Image">185 <p>Amazing quality and comfort!</p>186 </div>187 <div class="unique-card-Lj6Z8k">188 <img class="unique-image-Ys3Kv9" src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Image">189 <p>Stylish and super comfy!</p>190 </div>191 </div>192</div>193194</body>195</html>
