Shopify Liquid
Customer Review

Drop this Shopify Liquid snippet into your theme to add the customer review block. Copy the code below, paste it into your theme files, save and you're done.
120 lines · 3.2 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 Review</title>
7  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=verified" />
8  <style>
9    body.unique-body-AzY123 {
10      display: flex;
11      justify-content: center;
12      align-items: center;
13      height: 100vh;
14      margin: 0;
15      background: linear-gradient(135deg, #fafafa, #e0e0e0); /* Yumuşak gri gradyan arka plan */
16    }
17
18    /* Border animasyonunu tanımla */
19    @keyframes borderAnimation {
20      0% {
21        border-color: #e0e0e0;
22        box-shadow: 0 0 10px rgba(193, 199, 208, 0.3);
23      }
24      50% {
25        border-color: #d3d3d3;
26        box-shadow: 0 0 15px rgba(193, 199, 208, 0.3);
27      }
28      100% {
29        border-color: #e0e0e0;
30        box-shadow: 0 0 10px rgba(193, 199, 208, 0.3);
31      }
32    }
33
34    .unique-review-container-WsX456 {
35      display: flex;
36      align-items: center;
37      background-color: #fafafa; /* Beyaz arka plan */
38      border-radius: 12px;
39      padding: 16px;
40      font-size: 14px;
41      color: #333; /* Metin rengi */
42      max-width: 600px;
43      width: 100%;
44      margin: 2px 0;
45      border: 2px dashed #e0e0e0; /* Daha açık gri border */
46      animation: borderAnimation 2s infinite alternate; /* Border animasyonu */
47    }
48
49    .unique-review-image-EdC789 {
50      width: 50px;
51      height: 50px;
52      border-radius: 8px; /* Kare profil resmi */
53      object-fit: cover;
54      margin-right: 16px;
55      border: 2px solid #e0e0e0; /* İnce gri border */
56    }
57
58    .unique-review-content-RfV012 {
59      display: flex;
60      flex-direction: column;
61      width: 100%;
62    }
63
64    .unique-review-author-TgB345 {
65      display: flex;
66      align-items: center;
67      margin-bottom: 8px;
68    }
69
70    .unique-review-author-name-YhN678 {
71      font-weight: bold;
72      margin-right: 4px;
73      display: flex;
74      align-items: center;
75    }
76
77    .unique-review-icon-JqL456 {
78      font-size: 16px; /* İkon boyutu */
79      color: #1DA1F2; /* Mavi onay işareti rengi */
80      margin-left: 4px;
81    }
82
83    .unique-review-text-KiL234 {
84      font-size: 14px;
85      color: #555; /* Hafif daha koyu gri metin rengi */
86    }
87
88    /* Mobil versiyon için daha küçük metin boyutları */
89    @media (max-width: 768px) {
90      .unique-review-container-WsX456 {
91        padding: 12px;
92        font-size: 12px; /* Genel metin boyutunu küçült */
93      }
94
95      .unique-review-text-KiL234 {
96        font-size: 12px; /* Yorum metni daha küçük */
97      }
98    }
99  </style>
100</head>
101<body class="unique-body-AzY123">
102
103<div class="unique-review-container-WsX456">
104  <img class="unique-review-image-EdC789" src="https://i.hizliresim.com/je7b0fg.jpg" alt="Profil Resmi">
105  <div class="unique-review-content-RfV012">
106    <div class="unique-review-author-TgB345">
107      <span class="unique-review-author-name-YhN678">
108        Burkisoy
109        <span class="unique-review-icon-JqL456 material-symbols-outlined">verified</span>
110      </span>
111    </div>
112    <div class="unique-review-text-KiL234">
113      I really liked it. The shopping experience in this store was seamless.
114    </div>
115  </div>
116</div>
117
118</body>
119</html>
Related snippets

/ shopify liquid
Customer Review

Related snippets

Customer Live Sale

Customer Review 2

Customer Review Star

Customer Review Star 2
