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

/ shopify liquid

Product features 2

Related snippets

Product features 3

Risk Free

Risk Free 2

Infinite Announcement Bar