Ask Gaurav

Learn how to increase prepaid orders on your Shopify store by adding discount badges

In this tutorial, we’ll guide you through implementing the code step by step. Watch now!

If you want to increase the percentage of prepaid orders or encourage prepaid orders on your Shopify store, you can do so by offering discounts. Let’s see how we can implement this through code. It’s quite easy. First, you need to go to your Shopify dashboard. Here, we have already placed the badge that we’ll be using. So, let’s add this badge. You can upload it in the Files section under Content. I have already added the badge here. You can download the link for it.

I’ll provide the link in the description. Now, we need to open our online store. After opening the online store, you need to edit the code. Search for the main product file, which is usually named “product.liquid.” Open this file, and we need to place our code below the Buy Now button. I had removed this code earlier for making the video. Let me refresh and show you. The code isn’t here now. We need to find the Buy Now button. Press Ctrl + F to find it, then press Next.

Once we find the Buy Now button, we go to the next step. Our Buy Now button is here now. The code ends here, so we’ll implement our code here. We’ll copy this code and paste it here. Just remember to replace the image link you copied earlier from your store. Replace it here, and simply save it. If you have any other offers, like changing from an extra 10% off to 15% off, you can change all those lines from here. If you need to change anything in terms of styling or colors, you can do it from here to here. Save it, and let’s check if our code has been implemented on our website.

Once we refresh, our code is here. So, you can add this code to your Shopify store to increase prepaid orders. If you need any help with your Shopify store, you can DM me. Thanks for watching!

How to Add Discount Badge on Shopify | Increase Prepaid orders | Trust Badges on Shopify Product

Here is the Source code:

<!– Custom Code Starts –>
<div class=”available-offer”>
<h4><img src=”https://cdn.shopify.com/s/files/1/0812/3639/4295/files/Tick.png?v=1707473854″> 2 Offers Available</h4>
</div>
<div class=”badge-container”>
<p><span class=”offerheadline”>EXTRA 10% OFF</span> – Use Code <strong> “NEW10″</strong></p>
</div>
<div class=”badge-container”>
<p><span class=”offerheadline”>GET 5% OFF</span> – Additional 5% OFF on<strong> PREPAID ORDERS</strong></p>
</div>
<style>
.badge-container{
display:inline-flex;
flex-wrap:wrap;
align-content:space-around;
background: #cef8e4;
border-radius:5px;
padding: 10px 1em;
min-width: calc(100% – 0px);
align-items: center;
line-height: 1.3;
height: fit-content;
margin: 5px 0;
}
.offerheadline{
color: #fff;
background-color: #039910;
padding: 2px 5px;
margin: 0.5rem 0 0;
width: fit-content;
font-family:roboto;
line-height: 1.3;
font-weight:600;
font-size: calc(100% – 2px);
}
.available-offer h4{
margin-bottom: 0;
}
.available-offer p{
font-family:roboto;
}
.available-offer h4{
font-family:roboto;
/* color:#dc3f45; */
color:black;
padding:10px;
font-weight: 700;
}
.available-offer img{
width:20px;
padding:0;
margin-bottom: 4px;
}
</style>
<!– Custom Code End –>