Back to Shopify Liquid
Product features 2
Shopify Liquid

Product features 2

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

94 lines · 2.8 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>Product Features</title>
7 <style>
8 :root {
9 --text-color: #333;
10 --hover-bg-color: #f1f1f1;
11 --highlight-color: #000;
12 --transition-duration: 0.3s;
13 --font-family: 'Helvetica Neue', Arial, sans-serif;
14 }
15
16 body.bdy-a123 {
17 font-family: var(--font-family);
18 display: flex;
19 justify-content: flex-start;
20 align-items: flex-start;
21 height: 100vh;
22 margin: 0;
23 background: none;
24 padding: 20px;
25 }
26
27 .container-x987 {
28 width: 100%;
29 max-width: 600px;
30 display: flex;
31 flex-direction: column;
32 gap: 5px; /* Boşlukları azaltmak için gap değeri */
33 }
34
35 .item-z456 {
36 display: flex;
37 align-items: center;
38 padding: 5px 0; /* Dikey boşluğu azaltmak için padding değeri */
39 border-radius: 8px;
40 transition: background-color var(--transition-duration) ease, transform var(--transition-duration) ease;
41 cursor: default; /* İmlecin değişmesini engellemek için */
42 }
43
44 .item-z456:hover {
45 background-color: var(--hover-bg-color);
46 transform: translateX(10px);
47 }
48
49 .icon-w321 {
50 width: 24px;
51 height: 24px;
52 margin-right: 10px;
53 transition: filter var(--transition-duration) ease;
54 }
55
56 .item-z456:hover .icon-w321 {
57 filter: brightness(0) invert(0);
58 }
59
60 .text-v654 {
61 font-size: 16px;
62 color: var(--text-color);
63 transition: color var(--transition-duration) ease;
64 }
65
66 .item-z456:hover .text-v654 {
67 color: var(--highlight-color);
68 }
69
70 @media (max-width: 600px) {
71 .text-v654 {
72 font-size: 14px;
73 }
74 }
75 </style>
76</head>
77<body class="bdy-a123">
78 <div class="container-x987">
79 <div class="item-z456">
80 <img src="https://www.svgrepo.com/show/507980/check-badge.svg" alt="Check Icon" class="icon-w321">
81 <div class="text-v654">Easily Changeable 6 Different Heads</div>
82 </div>
83 <div class="item-z456">
84 <img src="https://www.svgrepo.com/show/507980/check-badge.svg" alt="Check Icon" class="icon-w321">
85 <div class="text-v654">Waterproof Charging Unit</div>
86 </div>
87 <div class="item-z456">
88 <img src="https://www.svgrepo.com/show/507980/check-badge.svg" alt="Check Icon" class="icon-w321">
89 <div class="text-v654">3.5 hours continuous operation time</div>
90 </div>
91 </div>
92</body>
93</html>

Related snippets