How to Apply discount code to Shopify Stores Automatically — Advanced
In this blog, we are checking out how to auto-apply a discount code to the Shopify cart programmatically.
Check out the first blog in this series on how to apply a discount code on the Shopify site without any coding via a simple URL.
Hey folks, If you are here, we are on a mission to make the customer experience seamless. Showing a customer a discount code, and then expecting them to remember it or copy it for use later is too much to ask and makes the experience troublesome. You can simply lose out if the user forgets to copy the code or even bad forgets it 📋.
Traditional Way
A simple way to achieve this recommended by Shopify is redirecting the user to a URL with the format https://yoursite.com/discount/DISCOUNT_CODE/ , this will auto-apply the discount code and redirect the user to the homepage. If you want to redirect the user to a different page, we can add a param in the end redirect=/product/my-product-2 and it will redirect the user to the specified handle.
Seems simple, but what about the redirects, we simply redirected the user from the page they currently were, and they don’t know why this redirect happened at all and they lost their progress on the site.
But how to solve this now? We have to auto-apply the discount code but also don’t want to redirect the user anywhere, so the experience should be like a simple action. (A user who visits your page to do some activities and receives a coupon code and it should just auto apply to the cart). Simply, not too much to ask from the customer's perspective.
Solution
Shopify uses a variety of cookies for analytics, authentication, payments, etc. One of the cookies is discount_code , which is used to manage this auto-apply discount code feature. 🍪 (& That’s why cookie is the star of the article)
So, whenever you redirect a user to /discount/DISCOUNT_CODE/ the site checks for the discount code value in the URL and sets this value in the above cookie and then redirect the user.
Now, to achieve a better user experience, rather than redirecting the user we can simply set the cookie ourselves, and make the experience seamless. Simple Enough.
Let’s write this
<script src=”https://gist.github.com/onlyoneaman/8d51813dbcef52b8e3ed01a60ceb46db.js"></script>
In the above code, we created a function setCookie with the single purpose of setting the cookie in the document, then we created another function setDiscountCookie which calls setCookie to set the coupon code in the cookie. That’s It. You can change the day's parameter depending on the life of the coupon code or for how much time you want the discount code to be set in the cookie.
Now, When a user gets a discount code rather than redirecting simply call this setDiscountCookie function to auto apply the coupon code. And we are good to go.
Troubleshooting
- If you are unable to set the cookie, check that you set the cookie from a script or code which has access to the website’s cookies. You might be calling this function from within an iframe, but iframes don’t have access to the main website’s cookies.
- Shopify Checkout Flow (Credit Card / Debit Card / Default Flow) uses the
discount_codemethod to auto-apply the discount code. While if you are using some other checkout flow it might not be doing so, you need to ask the custom checkout flow team for similar behaviour. - Check you’re giving the cookie enough expiry time, don’t keep the expiry time too short such that the cookie expires even before the user goes to the checkout flow.
Conclusion
Cookies are a great way on making things simpler, though Shopify handles this auto-apply discount flow via redirection, we can make the flow even more seamless by doing the action ourselves.
What do you think of this or If you have stumbled upon a different way of achieving this behaviour, hit a response, waiting to hear 😄.
