How To add Coupon Code — Discount Field On Shopify Cart Before Checkout Without Apps [UPDATED]

Elghorfi Mohamed
4 min readAug 26, 2022

--

#Introduction

Offering discounts to your customers is a powerful marketing strategy for your Shopify store. To offer discounts, you can create discount codes, and set up automatic discounts that can grow the engagement of your customers.

Shopify gives customers the ability to enter coupon codes to get discounts on their orders. But it is only on the checkout page.

From Unsplash by @anniespratt

A few days ago, I had a task from one of my clients asking me to add an input to the cart page instead of the checkout page, so their customer can add the coupon code directly on the cart page.

PS: You can add it whenever you want, not only on the cart page.

I had to choose between two choices, even using an application from the app store or building it by myself. I just hate using apps on Shopify stores. So I decided to do it myself.

I will share with you today how to make it happen for your store also. Easy steps to achieve that.

I will show you the way to achieve that, and you can improve it much as you want.

Let the party start!

The first thing we need to do is to locate the liquid file that contains the code of your cart page.

#Locate Cart Template

  • From your Shopify admin, go to Online Store > Themes.
  • Find the theme you want to edit, and then click Actions > Edit code.
  • In the Sections directory, click cart-template.liquid Or main-cart-footer.liquid. This varies from theme to another, try to identify the file in sections folder, it might be the word cart mentioned on it. Else you can reach out, I can help you to identify it with you.
  • Copy/paste the code below anywhere you want to add the discount input to your cart.
    {% render 'snippet-gf-discount-code' %}

#Create Snippet File

  • Now, let’s create the snippet file, on the sidebar locate the snippets folder and click Add a new snippet:
  • On the popup, type the name ‘snippet-gf-discount-code.liquid’ as below
  • Copy the code below or from here and paste it into the files we’ve just created in the previous step.

So, this is the end of our article today, I hope you learned something from it.
Have a wonderful, great day. Don’t hesitate to contact me if you have any questions. If you face any issues with adding it, you can reach out to me.

Follow me for more:

If you like this article, Buy Me a Coffee, Maybe? Even $1 can make my day.

Buy Me a Coffee?

--

--

Elghorfi Mohamed

Frontend || Shopify Expert Developer || Shopify Consulting