Offering discounts is a great way to incentivize customers to make a purchase, and making those discounts easily accessible can enhance the shopping experience even further. In this guide, we’ll show you how to create a simple, user-friendly discount code widget for your Shopify product page. With just a few lines of code, you can allow customers to easily copy a discount code and apply it at checkout, driving sales and improving customer satisfaction.
Code: https://github.com/ndrishinski/blogs/commit/a2c6313571a4c59e51b56326ce3069fbe12fc3ef
Prefer Video?
Enjoy, otherwise read on!
Create Theme Block
The first thing we need to do is add our theme block to the our product page’s section file schema, so it will appear in the customizer. In the Dawn theme, that file is main-product.liquid. There we will make a couple of modifications.
...
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when '@app' -%}
{% render block %}
{% comment %} add here {% endcomment %}
{%- when 'copy-discount-code' -%}
{% render 'copy-discount-code' %}
{% comment %} add here {% endcomment %}
{%- when 'text' -%}
<p
class="product__text inline-richtext{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}"
{{ block.shopify_attributes }}
>
{{- block.settings.text -}}
</p>
{%- when 'title' -%}
...
{% schema %}
{
"name": "t:sections.main-product.name",
"tag": "section",
"class": "section",
"blocks": [
{
"type": "@app"
},
// add here
{
"type": "copy-discount-code",
"name": "Copy Discount Code Widget",
"settings": []
},
// add here
{
...There are two updates we are making here. First we are adding our theme block to the schema -> blocks section. This will make it appear in the customizer. Then we also add it to our for loop to actually render our block when it is added. You may notice that we are referencing a snippet that does not exist yet. Let’s add that now.
Under the Snippets directory, create a file called ‘copy-discount-code.liquid’ and paste the following code:
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
.discount-widget {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #6e8efb, #a777e3);
color: #ffffff;
padding: 0.5rem 1rem;
border-radius: 40px;
box-shadow: 0 4px 16px rgba(31, 38, 135, 0.37);
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.18);
text-align: center;
max-width: 400px;
height: 80px;
margin: 2rem auto;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
position: relative;
overflow: hidden;
}
.discount-widget:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(31, 38, 135, 0.5);
}
.discount-content {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
}
.discount-title {
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-right: 1rem;
flex: 1;
}
.discount-code {
font-size: 1.5rem;
font-weight: 600;
background: rgba(255, 255, 255, 0.2);
padding: 0.25rem 0.75rem;
border-radius: 20px;
display: inline-block;
position: relative;
overflow: hidden;
}
.discount-code::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
to bottom right,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0.1) 50%,
transparent 100%
);
transform: rotate(45deg);
animation: shimmer 3s infinite;
}
.discount-text {
font-size: 0.8rem;
opacity: 0.9;
margin-left: 1rem;
}
.copy-feedback {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: 600;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
@keyframes shimmer {
0% {
transform: translateX(-100%) rotate(45deg);
}
100% {
transform: translateX(100%) rotate(45deg);
}
}
</style>
<div class="discount-widget" id="discountWidget">
<div class="discount-title">Save 20%</div>
<div class="discount-content">
<div class="discount-code" id="discountCode"></div>
</div>
<div class="discount-title">Click to copy</div>
<div class="copy-feedback" id="copyFeedback">Copied! Apply at Checkout</div>
</div>
<script>
const discountWidget = document.getElementById('discountWidget');
const discountCode = document.getElementById('discountCode');
const copyFeedback = document.getElementById('copyFeedback');
discountWidget.addEventListener('click', () => {
const tempInput = document.createElement('input');
tempInput.value = discountCode.textContent;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand('copy');
document.body.removeChild(tempInput);
copyFeedback.style.opacity = '1';
setTimeout(() => {
copyFeedback.style.opacity = '0';
}, 2500);
});
// Get product tags and find the discount code
const productTags = {{ product.tags | json }};
const discountTag = productTags.find(tag => tag.startsWith('copy-discount-code-'));
if (discountTag) {
// Extract the discount code from the tag
const code = discountTag.split('-').pop();
discountCode.textContent = code; // Update the discount code displayed
} else {
discountWidget.style.display = 'none'
}
discountWidget.addEventListener('click', () => {
const tempInput = document.createElement('input');
tempInput.value = discountCode.textContent;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand('copy');
document.body.removeChild(tempInput);
copyFeedback.style.opacity = '1';
setTimeout(() => {
copyFeedback.style.opacity = '0';
}, 2500);
});
</script>Phew that’s a lot of code. What is all that doing? Well the first part is CSS which I won’t get into. But then we have our HTML structure to display our badge. Then we use JavasScript to do a couple of things. First we check for the tag “copy-discount-code-” (that we will add in a moment) and if it is present then we take that code and insert it into the DOM so the user can see the discount code.
Then we have an event listener for when our widget is clicked, it will then copy that discount code to the customers clipboard, which they can then apply at checkout.
Creating a Discount Code in Shopify Admin
Now that we have our code in place, we need to do a few more things. Starting with creating the discount code in the Shopify Admin. In the dashboard navigate to the discounts page in the left navbar.
- Click “Create discount”
- Select “Amount off product”
- Give your discount code a name (mine is NSDTT)
- Add a percentage (in the HTML we have 20%)
- Then select a collection to apply this discount to
- Click save
Now that we have created our discount, we only need add a tag to our collection so that our liquid code can determine if it is eligible for the discount.
Bulk Apply Tag to Collection
To achieve this bulk operation, we will navigate to the ‘products’ section on the left hand navbar.
- On the left hand side near the top, you’ll see a magnify glass for filtering.
- Select this and choose ‘Add a filter’
- Select ‘collection’ and choose the collection you have created the discount for
- Click the ‘select all’ checkbox near the top
- Click on the far right 3 dot menu which opens a dropdown
- Click ‘Add tags’
- Create a tag named ‘copy-discount-code-NSDTT’ (substitute your discount code in) and add it to the collection.
Now every product in that collection should have a tag of ‘copy-discount-code-NSDTT’ applied to it. This is crucial because it is what our javascript is looking for in our snippet file.
Add our Theme Block from Customizer
Now we should have all of our code and configurations set up, let’s add our block via the customizer. In a duplicate theme I am going to add this newly created block like so:
And if we save our theme and preview, we should see our widget showing on the collection we chose, with a successful copy to clipboard, which also works at checkout.
Conclusion
By adding a copy-and-paste discount code widget to your Shopify product page, you can streamline the shopping experience and give your customers a little extra motivation to complete their purchase. This simple yet effective feature not only boosts engagement but also helps increase conversions by making discounts easy to apply. With minimal effort, you can provide a seamless way for shoppers to take advantage of your promotions, enhancing both user experience and sales performance.