Shopify Liquid
Copyable discount bar

Drop this Shopify Liquid snippet into your theme to add the copyable discount bar block. Copy the code below, paste it into your theme files, save and you're done.
150 lines · 4.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>Discount Banner</title>
7    <style>
8        body.unique-body-x1234 {
9            font-family: Arial, sans-serif;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15            background-color: #f0f2f5;
16        }
17
18        .discount-banner-x1234 {
19            display: flex;
20            align-items: center;
21            justify-content: flex-start;
22            background-color: #f5f5f5;
23            padding: 10px 15px;
24            border: 1px solid #dcdcdc;
25            border-radius: 10px;
26            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
27            font-size: 12px;
28            width: 100%;
29            animation: fadeIn-x1234 2s ease-in-out;
30            margin: 3px 0; /* Yukarı ve aşağı boşluk ekler */
31        }
32
33        .discount-banner-x1234 span {
34            color: #333333;
35            display: flex;
36            align-items: center;
37        }
38
39        .coupon-container-x1234 {
40            display: inline-flex;
41            align-items: center;
42            cursor: pointer;
43            margin-left: 8px;
44        }
45
46        .coupon-code-x1234 {
47            font-weight: bold;
48            color: #333333;
49            display: inline-flex;
50            align-items: center;
51        }
52
53        .copy-button-x1234 {
54            background: none;
55            border: none;
56            cursor: pointer;
57            margin-left: 0;
58            transition: transform 0.3s ease-in-out;
59            display: inline-flex;
60            align-items: center;
61            padding: 0;
62        }
63
64        .copy-button-x1234:hover {
65            transform: scale(1.2);
66        }
67
68        .copy-button-x1234 img {
69            width: 14px;
70            height: 14px;
71            transition: transform 0.3s ease-in-out;
72            margin-left: 3px;
73        }
74
75        .copy-button-x1234 img:hover {
76            transform: rotate(20deg);
77        }
78
79        .coupon-icon-x1234 {
80            width: 20px;
81            height: 20px;
82            margin-right: 8px;
83            transition: transform 0.3s ease-in-out;
84            animation: floatAndRotate-x1234 5s infinite;
85        }
86
87        @keyframes fadeIn-x1234 {
88            from { opacity: 0; }
89            to { opacity: 1; }
90        }
91
92        @keyframes floatAndRotate-x1234 {
93            0%, 100% { transform: translateY(0) rotate(0deg); }
94            25% { transform: translateY(-5px) rotate(-5deg); }
95            50% { transform: translateY(0) rotate(0deg); }
96            75% { transform: translateY(5px) rotate(5deg); }
97        }
98
99        @media (max-width: 600px) {
100            .discount-banner-x1234 {
101                font-size: 10px;
102            }
103            .copy-button-x1234 img {
104                width: 12px;
105                height: 12px;
106            }
107            .coupon-icon-x1234 {
108                width: 16px;
109                height: 16px;
110                margin-right: 6px;
111            }
112        }
113    </style>
114</head>
115<body class="unique-body-x1234">
116    <div class="discount-banner-x1234">
117        <img class="coupon-icon-x1234" src="https://www.svgrepo.com/show/524464/confetti.svg" alt="Confetti Icon">
118        <span>You've won an extra 10% off coupon code: 
119            <span class="coupon-container-x1234" id="coupon-container-x1234">
120                <strong id="coupon-code-x1234" class="coupon-code-x1234" onclick="copyToClipboard(event)">SUMMER10</strong>
121                <button class="copy-button-x1234" onclick="copyToClipboard(event)">
122                    <img src="https://www.svgrepo.com/show/520670/copy-2.svg" alt="Copy Icon">
123                </button>
124            </span>
125        </span>
126    </div>
127
128    <script>
129        function copyToClipboard(event) {
130            event.stopPropagation(); // Bu, tıklama olayının bubble yapmasını önler
131            const couponCode = document.getElementById("coupon-code-x1234").innerText.trim();
132            navigator.clipboard.writeText(couponCode).then(() => {
133                alert('Coupon code copied: ' + couponCode);
134            }).catch(err => {
135                console.error('Failed to copy text: ', err);
136            });
137        }
138
139        document.getElementById("coupon-container-x1234").addEventListener("click", (event) => {
140            const couponCode = document.getElementById("coupon-code-x1234").innerText.trim();
141            navigator.clipboard.writeText(couponCode).then(() => {
142                alert('Coupon code copied: ' + couponCode);
143            }).catch(err => {
144                console.error('Failed to copy text: ', err);
145            });
146        });
147    </script>
148</body>
149</html>
Related snippets

/ shopify liquid
Copyable discount bar

Related snippets

Copyable discount bar 2

Copyable discount bar 3

Copyable discount bar 4

3 CTA pills (above title)
