Shopify: add the "promo code" function in the cart

Summary

One of the most requested functions in the cart page, and which Shopify still has not integrated into its themes, is the function promo code. Indeed, it is only possible to add a promo code at the payment stage. Which is a bit late.

Note: Before any manipulation, be sure to make a backup of your theme. Better yet, if you're used to tweaking your theme often, install GoBack to make automatic backups.

Then you just have to find in the code of its theme, the section or template corresponding to the basket. It is very often cart-template.liquid.

Then copy and paste the following code where you want the promo code field :

<div class="cart-promo">
<h2>Vous avez un code promo ?</h2>
<input type="text" id="devPromo">
<a href="/checkout?discount=none" id="redemDevPromo">Appliquer</a>
</div>
<script>
$(document).ready(function(){
//listen to the promo button click
$('#redemDevPromo').on('click', function(event){
//disable the button event
event.preventDefault();
//write the url format
var theUrl = '/checkout?discount=';
//grab the discount code from the input
var theDiscount = $('#devPromo').val();
//full url to redirect to checkout with promo code
var toRedirect = theUrl+theDiscount;
console.log(toRedirect);
//redirect
window.location.href = toRedirect;
});
});
</script>

For example, you can put it above the button to order:

promo code

Leave a comment

Please note that comments must be approved before posting