Shopify Liquid

Click Discount

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

82 lines · 2.5 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 Button</title>
7    <style>
8        .discount-wrapper-X34YZ {
9            text-align: center;
10            margin-top: 20px;
11        }
12
13        .discount-btn-9KlmP {
14            display: inline-flex;
15            align-items: center;
16            justify-content: center;
17            padding: 10px 20px;
18            font-size: 16px;
19            color: #2E7D32; /* Dark green */
20            background-color: #D3E8D1; /* Slightly darker green */
21            border: 1px solid #C8E6C9; /* 1px border */
22            border-radius: 10px; /* Border radius added */
23            cursor: pointer;
24            outline: none;
25            transition: background-color 0.3s ease;
26            width: 100%; /* Full width */
27            box-sizing: border-box; /* Include padding in width */
28            position: relative;
29            overflow: hidden; /* Ensure the shine effect stays within the button */
30        }
31
32        .btn-text-6u7Hd {
33            display: flex;
34            align-items: center;
35            justify-content: center;
36            width: 100%;
37        }
38
39        .discount-btn-9KlmP:after {
40            content: '';
41            position: absolute;
42            top: 0;
43            left: -200%;
44            width: 200%;
45            height: 200%;
46            transform: skewX(-20deg);
47            background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
48            animation: shine 1.6s ease infinite;
49        }
50
51        @keyframes shine {
52            100% {
53                left: 200%;
54            }
55        }
56    </style>
57</head>
58<body>
59    <div class="discount-wrapper-X34YZ">
60        <button id="discountBtn-A1b2C" class="discount-btn-9KlmP">
61            <span class="btn-text-6u7Hd">
62                Click to apply a discount
63            </span>
64        </button>
65    </div>
66    <script>
67        document.getElementById('discountBtn-A1b2C').addEventListener('click', function() {
68            var button = this;
69            var buttonText = button.querySelector('.btn-text-6u7Hd');
70
71            // Show loading animation
72            buttonText.innerHTML = 'Applying...';
73
74            // Simulate a delay for loading animation (e.g., 2 seconds)
75            setTimeout(function() {
76                buttonText.innerHTML = 'A 10% discount will be applied at checkout!';
77            }, 2000); // 2 second delay
78        });
79    </script>
80</body>
81</html>

Related snippets

/ shopify liquid

Click Discount

Related snippets

Comparison table

Comparison Table 2

Copyable discount bar

Copyable discount bar 2