Add Discount Field to Your Shopify Cart in Minutes (Without Apps)

Add Discount Field to Your Shopify Cart in Minutes (Without Apps)


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).

Add Discount Field On Shopify Cart Without Apps [NEW]

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.

  1. Navigate to your Shopify Admin Dashboard.
  2. Click on “Online Store” and then “Themes.”
  3. Find your active theme or any other theme and click on “Actions” and then “Edit Code.”
  4. In the left-hand sidebar, click on “Sections.”
  5. 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.

  1. Navigate to your Shopify Admin Dashboard.
  2. Click on “Online Store” and then “Themes.”
  3. Find your active theme or any other theme and click “Customize.”
  4. 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

Add Discount Field On Shopify Cart Without Apps [NEW]

Easy Way to Display Videos From Youtube Channel in Your Shopify Store

Shopify ThemeKit for local theme development [Install & Setup]


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?

Buy Me a Coffee?
Matteo Arlotti

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..

回复
Junaid Naeem

Software Engineer | PHP | Laravel | Wordpress | Shopify | Elixir | Liquid | Developer

10 个月

Is this code compatible with the cart drawer?

Waqar Ahmad - Custom Shopify Developer

Shopify Customization Expert | Custom-Coded Sections & Templates | Making E-commerce Stores Stand Out and Convert

11 个月

Thank you for this

要查看或添加评论,请登录

Mohamed El-Ghorfi的更多文章

社区洞察

其他会员也浏览了