Add Discount Field to Your Shopify Cart in Minutes (Without Apps)
Many of you has read my previous article regarding adding Discount Field On Shopify Cart Without using an application (Below the link if you haven’t read it yet).
I am sharing with you today a new, simple way that will work for you. Follow these small steps later on this article, and you’ll be able to add it yourself.
Remember, if you faced any issues with implementing this in your store, don’t hesitate to contact me for help.
This time is a bit different, and much easier than the old method. Let’s try it and see if it works.
Prerequisites:
- Basic understanding of your Shopify theme structure.
- Comfort with copying and pasting code snippets.
- Basic understanding of Shopify Theme Customizer.
Steps:
- Step 1: Create New Section
- Step 2: Create new Cart Template
- Step 3: Add Section to your cart
- Step 4: Test It
> Step 1: Create New Section
Below (Or from here) We have 2 files, One for the section (section-gf-discount-code.liquid) and the other will be used to create the cart template (cart.discount.liquid), we will need it later on 2nd step.
- Navigate to your Shopify Admin Dashboard.
- Click on “Online Store” and then “Themes.”
- Find your active theme or any other theme and click on “Actions” and then “Edit Code.”
- In the left-hand sidebar, click on “Sections.”
- Click on “Add a new section.”
Now, copy the content from the file section-gf-discount-code.liquid, and paste it inside the file we just created.
Or Copy it from here.
> Step 2: Create New Cart Template
Following the previous step, and on the same interface, click on “Templates”, then “Add a new template.”
- From the popup, Select cart on “Template type”.
- Choose “liquid”.
- Type “discount”, on the input. Make sure you write it as it is.
- Then Click Done.
Or simply follow the steps in the image below:
Copy the content from the file cart.discount.liquid, and paste it inside the file we just created.
Or Copy it from here.
> Step 3: Add Section to your cart
After creating the required files, now all we have to do is to add the section in our Cart page or any other page we want.
- Navigate to your Shopify Admin Dashboard.
- Click on “Online Store” and then “Themes.”
- Find your active theme or any other theme and click “Customize.”
- In the top-bar, click on “Home page” and select Cart, as shown on the below image:
5. On the left-hand sidebar, click on “Add Section”.
6. Search/Locate the Section “Discount Field By Mohamed”.
7. Configure/Style it from the section settings.
8. That’s it
> Step 4: Testing
All you need to do now, is to get a valid discount code and test it.
One last thing you need to do, on the JavaScript code, change the totalCartSelector to match your theme.
PS: If this method doesn’t work for your store, try the other method I shared before. Else, you can reach out to me, so I can help you!
Again, this is just to make it work for you, you can still refactor the code and adapt it to your needs.
If you used this code and works for you, leave a comment for me to see you!
#Useful resources
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 want me to do that for you, from here.
If you like this article, Buy Me a Coffee, Maybe?
