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

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

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

Back to blog

Leave comments

Veuillez noter que les commentaires doivent être approuvés avant d'être publiés.

1 de 2