Shopify Liquid

Customer Review Star

Drop this Shopify Liquid snippet into your theme to add the customer review star block. Copy the code below, paste it into your theme files, save and you're done.

60 lines · 2.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 Rating</title>
7  <style>
8    body.unique-body-Qaz123 {
9      display: flex;
10      justify-content: center;
11      align-items: center;
12      height: 100vh;
13      margin: 0;
14      background-color: #fff;
15    }
16
17    .unique-rating-container-Wsx456 {
18      display: flex;
19      align-items: center;
20      font-size: 14px;
21      color: #333; /* Metin rengi */
22    }
23
24    .unique-rating-stars-Edc789 {
25      display: flex;
26      margin-right: 8px;
27    }
28
29    .unique-rating-stars-Edc789 svg {
30      fill: #FFD700; /* Sarı yıldız rengi */
31      width: 16px; /* Küçültülmüş yıldız boyutu */
32      height: 16px; /* Küçültülmüş yıldız boyutu */
33      transition: transform 0.3s;
34    }
35
36    .unique-rating-stars-Edc789 svg:hover {
37      transform: scale(1.3); /* Üzerine gelince büyütme */
38    }
39
40    .unique-rating-text-Rfv012 {
41      font-size: 14px;
42      color: #333; /* Metin rengi */
43    }
44  </style>
45</head>
46<body class="unique-body-Qaz123">
47
48<div class="unique-rating-container-Wsx456">
49  <div class="unique-rating-stars-Edc789">
50    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.144 1.18-5.906 5.434 1.391 8.079L12 18.896l-7.297 3.843 1.391-8.079-5.906-5.434 8.144-1.18z"/></svg>
51    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.144 1.18-5.906 5.434 1.391 8.079L12 18.896l-7.297 3.843 1.391-8.079-5.906-5.434 8.144-1.18z"/></svg>
52    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.144 1.18-5.906 5.434 1.391 8.079L12 18.896l-7.297 3.843 1.391-8.079-5.906-5.434 8.144-1.18z"/></svg>
53    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.144 1.18-5.906 5.434 1.391 8.079L12 18.896l-7.297 3.843 1.391-8.079-5.906-5.434 8.144-1.18z"/></svg>
54    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.144 1.18-5.906 5.434 1.391 8.079L12 18.896l-7.297 3.843 1.391-8.079-5.906-5.434 8.144-1.18z"/></svg>
55  </div>
56  <span class="unique-rating-text-Rfv012">Rated 4.8/5 by 1500+ Customers!</span>
57</div>
58
59</body>
60</html>

Related snippets

/ shopify liquid

Customer Review Star

Related snippets

Customer Review Star 2

Customer Review Star 3

Customer Review Star 3

Delivery Time & Guarantee