Shopify Liquid

Product features

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

84 lines · 2.7 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>Features List</title>
7    <style>
8        @keyframes borderAnimation {
9            0% {
10                border-color: #e8e8e8;
11                box-shadow: 0 0 10px rgba(232, 232, 232, 0.5);
12            }
13            50% {
14                border-color: #dcdcdc;
15                box-shadow: 0 0 20px rgba(220, 220, 220, 0.7);
16            }
17            100% {
18                border-color: #e8e8e8;
19                box-shadow: 0 0 10px rgba(232, 232, 232, 0.5);
20            }
21        }
22
23        body.unique-body-xyz123 {
24            font-family: Arial, sans-serif;
25            display: flex;
26            justify-content: center;
27            align-items: center;
28            height: 100vh;
29            margin: 0;
30            background-color: #f0f0f0; /* Açık gri */
31            padding: 4px 0; /* Yukarı ve aşağı 4px boşluk */
32        }
33
34        .features-container-xyz123 {
35            background-color: #f8f9fa; /* Bir ton daha açık gri */
36            border-radius: 12px;
37            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
38            padding: 20px;
39            max-width: 400px;
40            width: 100%;
41            border: 2px solid #e8e8e8; /* Bir ton daha açık border rengi */
42            animation: borderAnimation 3s infinite;
43        }
44
45        .feature-item-xyz123 {
46            display: flex;
47            align-items: center;
48            margin-bottom: 15px;
49        }
50
51        .feature-item-xyz123:last-child {
52            margin-bottom: 0;
53        }
54
55        .check-icon-xyz123 {
56            width: 24px;
57            height: 24px;
58            margin-right: 10px;
59        }
60
61        .feature-text-xyz123 {
62            font-size: 14px;
63            color: #333;
64        }
65    </style>
66</head>
67<body class="unique-body-xyz123">
68    <div class="features-container-xyz123">
69        <div class="feature-item-xyz123">
70            <img src="https://www.svgrepo.com/show/507980/check-badge.svg" alt="Check Icon" class="check-icon-xyz123">
71            <div class="feature-text-xyz123">Easily Changeable 6 Different Heads</div>
72        </div>
73        <div class="feature-item-xyz123">
74            <img src="https://www.svgrepo.com/show/507980/check-badge.svg" alt="Check Icon" class="check-icon-xyz123">
75            <div class="feature-text-xyz123">Waterproof Charging Unit</div>
76        </div>
77        <div class="feature-item-xyz123">
78            <img src="https://www.svgrepo.com/show/507980/check-badge.svg" alt="Check Icon" class="check-icon-xyz123">
79            <div class="feature-text-xyz123">3.5 hours continuous operation time</div>
80        </div>
81    </div>
82</body>
83</html>

Related snippets

/ shopify liquid

Product features

Related snippets

Product features 2

Product features 3

Risk Free

Risk Free 2