Display Shopify Discount Codes on Storefront Pages
In 2017 Shopify introduced “Shareable Discount Links” which is a great way to distribute discount codes to your clients via email, vouchers, printed QR codes, etc.
Shareable discount links are standard web links using a special format. Once a client clicks on the link he comes directly to your online store. The discount code is applied automatically so he does not have to enter the code during checkout.
Figure 1 shows the Shopify admin page after the discount code PROMO18 has been created. When you click the “Get shareable link” button you can copy the shareable discount link and use if for your promotions. The link has the following format: https://www.myshop.com/discount/PROMO18.
In this article I use www.myshop.com as example shop domain. Replace the links with your real shop domain.
When a discount code is applied through such a link I want to display the code for instance on the shopping cart page (see figure 2).
Unfortunately the official Shopify API does not offer a way to access to the applied discount code on storefront pages.
In this article I show you a workaround using JavaScript and the sessionStorage property which is supported by modern web browsers.
Solution:
- New Discount Link: https://www.myshop.com/?discount=PROMO18
Get the discount parameter from the URL
Store the discount code in the browser’s sessionStorage
Redirect to https://www.myshop.com/discount/PROMO18 - Shopify Discount Link: https://www.myshop.com/discount/PROMO18
Shopify stores the discount code in their session environment
Redirect back to https://www.myshop.com/ - Display Discount Code: Use standard JavaScript throughout the storefront pages to access the applied discount code from the sessionStorage.
JavaScript Snippet:
Add the following JavaScript snippet right after the opening <head> tag of your theme.liquid file. See “Editing theme code” in the Shopify help center for more information about editing theme code.
This snippet adds the discount code to the sessionStorage and redirects to the standard Shopify discount link.
You can verify that the code is added correctly to the sessionStorage using the Chrome DevTools.
Access Discount Code from sessionStorage:
In the basket section of my theme which is embedded in the cart page I use the following form to proceed to checkout:
This creates the shopping cart including the discount input box you can see on the right image in figure 2.
Now I want to display the discount code if it has been applied before. This can be achieved via the following JavaScript which I placed at the end of the basket section (it requires JQuery to be imported before).
Please be aware that this is just a workaround. It adds an extra redirect when entering the new promotion link and the browser sessionStorage is not in sync with the Shopify session environment. Anyway I use this solution for quite some time now without any complaints.
