Discount codes in Cart page

Adding Discount Codes to the Cart Page in Shopify

Log in or Sign up to ensure access to purchased code across multiple devices.

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: Compatible with  Shopify 2.0 FREE themes   ONLY

It would be nice to add the coupon code in the cart page so the customer do not need to wait until going to checkout page to see how much they are paying. 

As an e-commerce business owner, one of the most effective ways to attract and retain customers is by offering discounts and promotions. Shopify, one of the leading e-commerce platforms, provides a user-friendly interface that allows you to seamlessly integrate discount codes into your online store. In this article, we'll guide you through the process of adding discount codes directly to the cart page in Shopify, making it easier for your customers to apply and enjoy the benefits of your promotions.

See the demo with the cart drawer here

What you are buying:

  • Add a input for discount code entry in cart page
  • Apply the discount in cart items and when in checkout
  • Only applied one discount code per entry and cannot use multiple code per cart items.

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

To start:

1. Go to Admin Shopify store > Themes > Actions > Edit Code.

2. In Snippet folder, create a new snippet, and name it "discount-cart". Place the code below in the newly created snippet.

 

3. If you are using cart-drawer feature, please skip step #3 and step #4. Otherwise, please find the section folder, and open the file main-cart-items.liquid. Find the class="cart-items",  then before the >,  place the code below

 

See image for placement:

Main cart items discount

4. In the same file, main-cart-items.liquid, before the {% schema %}, place the code below

 

See image for placement:

Render discount snippet file

5. To show this discount in cart drawer, please open the cart-drawer.liquid under the Snippet folder. Inside the file, find the class="cart-items", then add the code below before the >.

 

See the image below for placement:

cart drawer discount code

6. Next, find the </cart-drawer-items>, and in the new line place the code below

 

See image below for placement:

cart drawer discount code

That's it (",)

Copied!
Back to blog

Leave a comment