Add Discount Field to Your Shopify Cart in Minutes (Without Apps)
Mohamed El-Ghorfi
Shopify Frontend Developer | Shopify Apps | Advanced Themes Customization | Shopify Expert Consultant |
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:
Steps:
> 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.
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.”
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.
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.
Digital & Tecnology Manager
6 个月Hey! amazing work! Do you know a way to load the discounts not stored in the localStorage? For example, i already have a coupon loaded by a url click from a newsletter: https://myshopifystore.com/discount/MYDISCOUNTCODE?redirect=/collections/XYZ If i go to my cart page, the script don't show any discount, but in the checkout is correctly loaded..
Software Engineer | PHP | Laravel | Wordpress | Shopify | Elixir | Liquid | Developer
10 个月Is this code compatible with the cart drawer?
Shopify Customization Expert | Custom-Coded Sections & Templates | Making E-commerce Stores Stand Out and Convert
11 个月Thank you for this