How to display a discount code in Shopify before checkout?

Tweet LinkedIn

When you create a discount probably you already know that this can be applied only in checkout due to how Shopify works at this point in time.

There are ways to achieve this differently with code, but I want to highlight a simple way, more of a workaround, especially for those that can’t afford to invest in custom code or don’t want to tinker with code.

I’ll show you how you can apply a discount that will be listed on the cart page before the customer will reach the checkout page without any coding.

I’ve used this technique in many of my clients’ Shopify stores and in many cases it increased conversions since the customer can see the discount inside the cart before reaching the checkout page which is one more incentive that will convince your customer to follow through with the purchase process.

This technique will be achieved by using a shareable discount link which you can get easily from Shopify admin.

This technique will not work if the client comes from search engines, but it works if the client comes from social media or anywhere you post the discount link.

I’ll assume you already have the discount code created since in this tutorial I’ll only show you how to get the shareable link and how this will work inside the Shopify storefront.

These links direct customers to your store home page, specific collections, or products, automatically applying the discount code in cart and at checkout.

Shareable links are only valid for active discounts. Create and save your discount code first, targeting the desired products or collections.

For multiple discounts on one product, the link applies the latest discount.

Apply a discount and redirect the customer to the store home page

This will give you a link that when clicked will take the customer directly to the home page with the discount applied.

Create the discount link

Navigate to the “Discount” section (marked with 1 in the image below) on your Shopify admin dashboard.

Click on “Discounts” to open the page where you can manage and create new discount codes.

On the “Discounts” page, you’ll see your existing discount codes.

The example “Promo” discount (marked with 2 in the image below) offers a 10% discount on the entire order and is limited to one use per customer.

Discount listing page in Shopify.
Discount listing page in Shopify.

Click on the “Promote” dropdown (marked with 1 in the image below) to access options for sharing the discount.

Use the “Get a shareable link” feature (marked with 2 in the image below) to generate a link that customers can click to apply the discount directly to their cart before checkout.

Configuring and sharing a discount in Shopify.
Configuring and sharing a discount in Shopify.

After clicking on “Get a shareable link” for your Shopify discount, a unique URL is generated inside a pop-up.

You can then click the “Copy link” button to copy this URL and share it with customers, allowing them to apply the discount directly in their cart before proceeding to checkout.

Generating a Shareable Discount Link in Shopify.
Generating a Shareable Discount Link in Shopify.

If you create a new discount code in Shopify, you’ll see on the “Discounts” listing page (marked with 1 in the image below) a success message.

Click “Get shareable link” (marked with 2 in the image below) to generate a link of the discount code via email or social media.

You’ll get the same above pop-up with the shareable link.

Shareable link inside the successfully created discount in Shopify.
Shareable link inside the successfully created discount in Shopify.

Test the discount link

This is how the link will look in my case, in your case it will look slightly different containing your store name and the name of your discount:

https://storename.myshopify.com/discount/Promo

Now wherever you share the link when the user will click it or tap it, they will be redirected to your store home page and the discount will be kept inside a session cookie and it will be deleted when the user closes their web browser.

Technical test

Go to your browser of choice and paste the link and hit enter to access the store. I’m going to use Chrome.

Verifying discount code in browser cookies.
Verifying discount code in browser cookies.

After applying the discount code using the shared link, you can verify the code’s application through the browser’s “DevTools”.

Open “DevTools” with + + C (MacOS) or CTRL + + C (Windows or Linux) and navigate to the “Application” tab (marked with 1 in the image below).

Go to the “Application” tab (marked with 1 in the image below) and navigate to the “Cookies” section within the (marked with 2 in the image below)

Confirm that the value of the “discount_code” is set to “Promo” (marked with 3 in the image below), indicating the discount has been successfully applied.

Now the technical side is checked and the discount code is functioning properly, let’s see how it looks from the customer side.

Storefront test

Add a product to the cart and go to the cart page on your theme. I’m using for this example the default Shopify theme.

In my case the discount is red since I’ve customized it to make it more visible.

Shopify discount applied in the cart page before checkout.
Shopify discount applied in the cart page before checkout.

And when you navigate to checkout the discount code will look like this:

Shopify discount applied on the checkout page.
Shopify discount applied on the checkout page.

Apply a discount and redirect the customer to any page on the store

In the previous case the discount link as it is, it redirects the user to the store home page but we can customize the link to redirect the user to any page on the store by adding a redirect at the end of the link (URL).

https://storename.myshopify.com/discount/Promo?redirect=/new-path

Change “new-path” to match the URL extension of the page that you want to link to.

If you want to redirect the customer to a collection page you’ll need to create a URL like this:

https://storename.myshopify.com/discount/Promo?redirect=/collections/promo-sale

If you want to redirect the customer to a specific product page you’ll need to create a URL like this:

https://storename.myshopify.com/discount/Promo?redirect=/products/blue-t-shirt

You can do a lot of combinations and redirects for all Shopify store pages.

Conclusion

I hope this will be helpful to those that need a quick way to test the promo codes and even use these techniques to help you increase sales since now the customer will see the discount code inside the cart on the cart page before reaching checkout.