Shopify Liquid
Copyable discount bar 3

Drop this Shopify Liquid snippet into your theme to add the copyable discount bar 3 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>Mother's Day Discount Banner</title>
7    <style>
8        body.unique-body-md2024 {
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-md2024 {
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-md2024 2s ease-in-out;
30            margin: 3px 0; /* Yukarı ve aşağı boşluk ekler */
31        }
32
33        .discount-banner-md2024 span {
34            color: #333333;
35            display: flex;
36            align-items: center;
37        }
38
39        .coupon-container-md2024 {
40            display: inline-flex;
41            align-items: center;
42            cursor: pointer;
43            margin-left: 8px;
44        }
45
46        .coupon-code-md2024 {
47            font-weight: bold;
48            color: #333333;
49            display: inline-flex;
50            align-items: center;
51        }
52
53        .copy-button-md2024 {
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-md2024:hover {
65            transform: scale(1.2);
66        }
67
68        .copy-button-md2024 img {
69            width: 14px;
70            height: 14px;
71            transition: transform 0.3s ease-in-out;
72            margin-left: 3px;
73        }
74
75        .copy-button-md2024 img:hover {
76            transform: rotate(20deg);
77        }
78
79        .coupon-icon-md2024 {
80            width: 20px;
81            height: 20px;
82            margin-right: 8px;
83            transition: transform 0.3s ease-in-out;
84            animation: floatAndRotate-md2024 5s infinite;
85        }
86
87        @keyframes fadeIn-md2024 {
88            from { opacity: 0; }
89            to { opacity: 1; }
90        }
91
92        @keyframes floatAndRotate-md2024 {
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-md2024 {
101                font-size: 10px;
102            }
103            .copy-button-md2024 img {
104                width: 12px;
105                height: 12px;
106            }
107            .coupon-icon-md2024 {
108                width: 16px;
109                height: 16px;
110                margin-right: 6px;
111            }
112        }
113    </style>
114</head>
115<body class="unique-body-md2024">
116    <div class="discount-banner-md2024">
117        <img class="coupon-icon-md2024" src="https://www.svgrepo.com/show/524464/confetti.svg" alt="Confetti Icon">
118        <span>Mother's Day Special! Extra 15% off coupon code: 
119            <span class="coupon-container-md2024" id="coupon-container-md2024">
120                <strong id="coupon-code-md2024" class="coupon-code-md2024" onclick="copyToClipboard(event)">MOM2024</strong>
121                <button class="copy-button-md2024" 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-md2024").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-md2024").addEventListener("click", (event) => {
140            const couponCode = document.getElementById("coupon-code-md2024").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 3

Related snippets

Copyable discount bar 4

3 CTA pills (above title)

Customer Review

Customer Live Sale
