Display Shopify Discount Codes on Storefront Pages

Figure 1: Shopify Admin: Discount PROMO18 created

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).

Figure 2: The left shopping cart page displays the discount code, the right page doesn’t display the code.

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:

  1. 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
  2. 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/
  3. 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.

Chrom DevTools: Show Session Storage values in Application tab.

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.

--

--

--

I ❤️ Shopify & Next.js. checkout-agency.com, Founder

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Markus Tripp

Markus Tripp

I ❤️ Shopify & Next.js. checkout-agency.com, Founder

More from Medium

How to Auto-Generate Instagram Graphics For Your New Shopify Products

How to create Collection and Sub-Collection Flow in Shopify Online Store 2.0 (Dawn theme)

Behind the Scenes of Personalized emails

Building a Blog With Next.js and MDX