How To add Coupon Code — Discount Field On Shopify Cart Before Checkout Without Apps [UPDATED]
#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.
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.liquidOrmain-cart-footer.liquid. This varies from theme to another, try to identify the file in sections folder, it might be the wordcartmentioned 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.
PS: It works only if The customer account is not required to place an order.
That’s it, now you can go to the cart page and test your discount form.
PS: For some stores, Shopify has changed how they manipulate their checkout page, it might not work on some stores. I am working to get a solution for this. So if you face any issues with implementing it, you can reach out to me, so I can check if this is the case for you.
I posted another method, check it out here.
