Automatically apply gift card using cart URL

Will_Jones
New Member
1 0 2

Hi there,

Per this topic it's now clearly possible to apply discount codes using a few ways, including adding a paramter to the cart URL, so that the user doesn't have to input this manually. Is it possible to also achieve this with gift cards?

I'd like to be able to generate a URL that automatically applies the gift card for the customer to make spending it easier.

Thanks in advance!

Replies 9 (9)
Ryan
Shopify Staff
Shopify Staff
497 42 117

Hi Will, this is not currently something that we support but I will pass on your request.

 

Cheers,

Ryan

Ryan | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

James_Bostock
Tourist
8 0 2

Is there any news on this feature?

alejandrohcruz
New Member
1 0 3

Hi, any news on this? It would be great to have for our use case. Thanks

Happiness
Shopify Partner
5 0 1

Still nothing? It's been 4 years past and you didn't even provide any solution here.. What a great support.. I'm shocked.

Steven_Amrhein
Shopify Partner
7 0 10

This is possible by passing a gift card code to the checkout using a hidden discount field on the cart page:

 

<input type="hidden" name="discount" value="">

 

The /discount/CODE permalink creates a discount_code cookie, so you'll just need to update that hidden field's value with the cookie's value using javascript. Then you can share /discount/GIFTCARDCODE permalinks and the code will be automatically applied at checkout.

kwat87
New Member
2 0 1

@Steven_Amrhein I set this up in my cart-template.liquid and wrote some JS to copy the value of the discount_code cookie to the value of the hidden input but it is not working to apply a gift card in checkout. Any tips?

 

Here is my code:

<input id="discountcode" type="hidden" name="discount" value="">

<script>
  function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
  document.getElementById("discountcode").value = getCookie("discount_code");
}
</script>
arwd
New Member
1 0 1

@kwat87 You're almost there. The 'document.getElementById' bit needs to go outside the function because it is calling the getCookie function:

 

 

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}
  
document.getElementById("discountcode").value = getCookie("discount_code");

 

 Under this you could also add a check to see if the cookie is recognised and the hidden field is filled in:

 

console.log('Cookie: ' + getCookie("discount_code"));
console.log('Field: ' + document.getElementById("discountcode").value);

 

You need to insert the 

 

<input id="discountcode" type="hidden" name="discount" value="">

 

inside the <form> tags on the Cart page, best above the 'Proceed to Checkout' button.

 

If successful, the discount code will be passed as a parameter in the URL and this will be applied to the checkout automatically. E.g. https://yourwebsite.co.uk/26759096/checkouts/abc123def456gh?discount=B3AF92HBDGG75HW3

kwat87
New Member
2 0 1

@arwd Thank you so much for the helpful tips! I implemented your suggestions and the console is reporting the correct Cookie and Field values but now the discount parameter is empty when proceeding to checkout. Any idea what could be preventing that?

 

*UPDATE: I tested the code snippets by @arwd on another Shopify development store and it worked perfectly so I'm thinking an app or theme setting is preventing it from passing the discount parameter to checkout properly

MadsN
New Member
3 0 0

This approach works great in my scenario, but there is a small snag:

 

If the customer returns to cart from checkout (to change quantities or add more products), and then hits checkout again, there is a validation error in the discount field in checkout:

MadsN_0-1640044502092.png

Translation: "This gift card has already been used in your order".

The error also appears in a different variant if a regular discount code has been applied.

 

The question is how to modify the code in the cart so it does not apply the same discount code or gift card code twice?