Shopify Liquid
Customer Review 2

Drop this Shopify Liquid snippet into your theme to add the customer review 2 block. Copy the code below, paste it into your theme files, save and you're done.
157 lines · 6.9 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>Customer Reviews</title>
7<style>
8  body.unique-body-Abc987 {
9    display: flex;
10    justify-content: center;
11    align-items: center;
12    height: 100vh;
13    margin: 0;
14    background-color: #f0f2f5;
15  }
16
17  .unique-review-wrapper-Def654 {
18    position: relative;
19    width: 100%;
20    max-width: 600px;
21    height: auto;
22  }
23
24  .unique-review-container-Ghi321 {
25    display: none;
26    align-items: center;
27    background-color: #fffacd; /* Çok ama çok açık sarı arka plan */
28    border-radius: 12px;
29    padding: 16px;
30    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
31    font-size: 14px;
32    color: #333; /* Metin rengi */
33    width: 100%;
34    margin: 2px 0; /* Yukarı ve aşağı 2px boşluk ekler */
35  }
36
37  .unique-review-image-Jkl210 {
38    width: 50px;
39    height: 50px;
40    border-radius: 50%;
41    object-fit: cover;
42    margin-right: 16px;
43    border: 2px solid #e0e0e0; /* İnce gri border */
44  }
45
46  .unique-review-content-Mno543 {
47    display: flex;
48    flex-direction: column;
49  }
50
51  .unique-review-author-Pqr876 {
52    display: flex;
53    align-items: center;
54    margin-bottom: 8px;
55  }
56
57  .unique-review-author-name-Stu789 {
58    font-weight: bold;
59    margin-right: 8px;
60  }
61
62  .unique-review-stars-Vwx654 {
63    display: flex;
64  }
65
66  .unique-review-stars-Vwx654 svg {
67    fill: #FFD700; /* Sarı yıldız rengi */
68    width: 16px; /* Yıldız boyutu */
69    height: 16px; /* Yıldız boyutu */
70    margin-right: 2px;
71  }
72
73  .unique-review-text-Yza321 {
74    font-size: 14px;
75    color: #555; /* Hafif daha koyu gri metin rengi */
76  }
77</style>
78<!-- SVGRepo ikonlarını ekliyoruz -->
79</head>
80<body class="unique-body-Abc987">
81
82<div class="unique-review-wrapper-Def654">
83  <div class="unique-review-container-Ghi321 unique-review-1-Jkl987">
84    <img class="unique-review-image-Jkl210" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Customer Image">
85    <div class="unique-review-content-Mno543">
86      <div class="unique-review-author-Pqr876">
87        <span class="unique-review-author-name-Stu789">Lori F.</span>
88        <div class="unique-review-stars-Vwx654">
89          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.132 1.144-5.895 5.608 1.392 8.049L12 18.896l-7.297 3.84 1.392-8.049-5.895-5.608 8.132-1.144z"/></svg>
90          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.132 1.144-5.895 5.608 1.392 8.049L12 18.896l-7.297 3.84 1.392-8.049-5.895-5.608 8.132-1.144z"/></svg>
91          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.132 1.144-5.895 5.608 1.392 8.049L12 18.896l-7.297 3.84 1.392-8.049-5.895-5.608 8.132-1.144z"/></svg>
92          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.132 1.144-5.895 5.608 1.392 8.049L12 18.896l-7.297 3.84 1.392-8.049-5.895-5.608 8.132-1.144z"/></svg>
93          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.132 1.144-5.895 5.608 1.392 8.049L12 18.896l-7.297 3.84 1.392-8.049-5.895-5.608 8.132-1.144z"/></svg>
94        </div>
95      </div>
96      <div class="unique-review-text-Yza321">
97        I really love this, it's made my life so much easier. I can't believe I got it at such a steal!!
98      </div>
99    </div>
100  </div>
101
102  <div class="unique-review-container-Ghi321 unique-review-2-Qwe456">
103    <img class="unique-review-image-Jkl210" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Customer Image">
104    <div class="unique-review-content-Mno543">
105      <div class="unique-review-author-Pqr876">
106        <span class="unique-review-author-name-Stu789">John D.</span>
107        <div class="unique-review-stars-Vwx654">
108          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.132 1.144-5.895 5.608 1.392 8.049L12 18.896l-7.297 3.84 1.392-8.049-5.895-5.608 8.132-1.144z"/></svg>
109          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.132 1.144-5.895 5.608 1.392 8.049L12 18.896l-7.297 3.84 1.392-8.049-5.895-5.608 8.132-1.144z"/></svg>
110          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.132 1.144-5.895 5.608 1.392 8.049L12 18.896l-7.297 3.84 1.392-8.049-5.895-5.608 8.132-1.144z"/></svg>
111          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.132 1.144-5.895 5.608 1.392 8.049L12 18.896l-7.297 3.84 1.392-8.049-5.895-5.608 8.132-1.144z"/></svg>
112          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.132 1.144-5.895 5.608 1.392 8.049L12 18.896l-7.297 3.84 1.392-8.049-5.895-5.608 8.132-1.144z"/></svg>
113        </div>
114      </div>
115      <div class="unique-review-text-Yza321">
116        Fantastic product! It's really improved my daily routine. Highly recommend it.
117      </div>
118    </div>
119  </div>
120
121  <div class="unique-review-container-Ghi321 unique-review-3-Rty789">
122    <img class="unique-review-image-Jkl210" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Customer Image">
123    <div class="unique-review-content-Mno543">
124      <div class="unique-review-author-Pqr876">
125        <span class="unique-review-author-name-Stu789">Emily R.</span>
126        <div class="unique-review-stars-Vwx654">
127          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.132 1.144-5.895 5.608 1.392 8.049L12 18.896l-7.297 3.84 1.392-8.049-5.895-5.608 8.132-1.144z"/></svg>
128          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.132 1.144-5.895 5.608 1.392 8.049L12 18.896l-7.297 3.84 1.392-8.049-5.895-5.608 8.132-1.144z"/></svg>
129          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.132 1.144-5.895 5.608 1.392 8.049L12 18.896l-7.297 3.84 1.392-8.049-5.895-5.608 8.132-1.144z"/></svg>
130          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.132 1.144-5.895 5.608 1.392 8.049L12 18.896l-7.297 3.84 1.392-8.049-5.895-5.608 8.132-1.144z"/></svg>
131          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.132 1.144-5.895 5.608 1.392 8.049L12 18.896l-7.297 3.84 1.392-8.049-5.895-5.608 8.132-1.144z"/></svg>
132        </div>
133      </div>
134      <div class="unique-review-text-Yza321">
135        Absolutely love it! It's a game changer. Worth every penny.
136      </div>
137    </div>
138  </div>
139</div>
140
141<script>
142  const reviews = document.querySelectorAll('.unique-review-container-Ghi321');
143  let currentIndex = 0;
144
145  function showNextReview() {
146    reviews[currentIndex].style.display = 'none';
147    currentIndex = (currentIndex + 1) % reviews.length;
148    reviews[currentIndex].style.display = 'flex';
149  }
150
151  reviews[currentIndex].style.display = 'flex';
152  setInterval(showNextReview, 4000);
153</script>
154
155</body>
156</html>
Related snippets

/ shopify liquid
Customer Review 2

Related snippets

Customer Review Star

Customer Review Star 2

Customer Review Star 3

Customer Review Star 3
