Adding in discount code at cart page

Sell Online With Shopify
Trusted by millions of businesses worldwide
Sign up for a free trial and enjoy the first month of Shopify for $1.

Discount codes can only be processed in the checkout. This customization allows users to enter their discount code on the cart page, the discount code is sent into the checkout as a url parameter and automatically applied when the user reaches the first checkout page. Discount code is entered in the cart page.

discount-code-1

The discount code is automatically applied in the checkout, the code name and
value?discount=WeAreFeelingGenerous are appended to the url in the Checkout which
automatically applies the code.

discount-code-2

Step 1: ­Add the HTML to your cart page

Create a snippet called plus_cart_discount_code.liquid and add the following code

Include the snippet in the cart template where you want the discount input field to go.

Step 2: Add a theme setting to control the customisation

Step 3:­ (Optional) Store the form information locally in case the cart page gets updated

If the user decides to update the cart after adding the discount code, the code will be lost on page reload, because of this we’ve created a localStorage variable to store and re­apply the coupon data on page reload.

Warning: This portion of the gist is not required and could possibly cause complications. If the customer puts a new discount in at checkout, that value will not be saved to localStorage. If the user comes back to the cart, it’s going to put in the old discount and apply that at checkout.

Altogether now

Done.

Looking for Shopify Experts?

Hura Apps can help you take your store to the next level

Our team of experienced designers and developers can help you create a beautiful, high-converting Shopify store that will drive sales and increase customer satisfaction. From custom design to app development and optimization, we have the skills and expertise to help you achieve your eCommerce goals.

Get in touch

You may also like...

33 Responses

  1. Nathan Ferguson says:

    Glad you found the guide we wrote useful, Kiet. Thanks for sharing the knowledge!

  2. Keith says:

    Cant get this to fully work correctly, somehow it automatically applies code during check out at least, but still not fixing the issue of customers cant see the discount till well into checkout process if checking out with any option other than shopify payments…

  3. Kevin says:

    I ran into a problem with a translation error displaying above the discount input box. it was “translation error: en.cart.general.car_discount”. I think this means the label in the snippet needs to be updated. Not sure what with though. I tried to rename it just with a string called “Discount Code’ which worked.

    Also, upon submitting the discount code there is no application or change of price in cart.

  4. alvin says:

    is this only for shopify plus users?

  5. Roxie says:

    I;m confused by step 2 where does this go?

    • Roxie says:

      figured it out but now I see the translation issue “translation error: en.cart.general.car_discount” above the box and the discount code doesn’t change the price

      • Huynh Mai Anh Kiet says:

        Replace {{ ‘cart.general.cart_discount’ | t: shop_name: shop.name }} with CART DISCOUNT.

        • Roxie says:

          thanks, that fixed the translation label but now discounts aren’t updating price in cart

          • Huynh Mai Anh Kiet says:

            Yes! Just apply on checkout page.

          • Roxie says:

            I don’t understand I thought this was a work around to allow the customers to apply the discount code on cart page before the checkout page?

            even after entering codes, discount codes don’t even show on checkout page you have to renter codes again.

      • Craig Moodie says:

        Hi Roxie.
        If you don’t mind but where exactly did you place the text in the settings file? I’m getting an error that I can’t save the file.
        Thanks.

  6. phpdevloper says:

    Is discount apply to direct payment from cart page also.

  7. Paul Alionis says:

    Hi, I have applied all steps in this tutorial but it didn’t work. I’m looking at the povided code and for me it seems that there is something missing. We are adding label and input field but the script describing how field should work is non-existing. At some point, we need to add something that would append URL parameter ?discount=”code” and perharps modify checkout button.
    Can anyone explain how is this supposed to work? Thanks for tutorial.

  8. Eric I says:

    I implemented this as shown and it almost worked. Looking at the headers that are sent from this page, the discount code was there. however, then it redirected WITHOUT the code. Here’s how I fixed it. On plus_cart_discount_code.liquid, I removed the “$(document).on(‘page:load…” line and added
    $(‘form[action=”/cart”]’).find(‘[name*=”discount”][type=”hidden”]’).remove(); within the onsubmit. Now it works great.

    • sanjay kumar verma says:

      hello Eric
      please send aii code after change

    • kyle says:

      Hey Eric! im happy to hear someone got this working! Can you post your code i am trying to figure this out and I am just stuck here, it won’t apply the code how much of the $(document) line do you remove? and how do i put the code inside the onsubmit? i have been trying various locations but nothing seems to work! here is what i have:

      {% if plus_cart_discount_code %}

      (function($) {
      {
      if (localStorage.getItem(‘storedDiscount’)){
      var discountStored = localStorage.getItem(‘storedDiscount’);
      $(‘input[name=”discount”]’).val(localStorage.getItem(‘storedDiscount’));
      }
      $(‘form[action=”/cart”]’).on(‘submit’, function(){
      $(‘form[action=”/cart”]’).find(‘[name*=”discount”][type=”hidden”]’).remove();
      var $discountCode = $(‘input[name=”discount”]’).val();
      localStorage.setItem(‘storedDiscount’, $discountCode);
      });
      });
      })(jQuery);

      DISCOUNT CODE – APPLIED AT CHECKOUT

      {% endif %}

  9. Darren says:

    Hi, I installed the code and it works, except I couldn’t get the label to change, even after renaming it?

  10. Allan says:

    Hi Guys,
    Cool “How To”, thanks for sharing.

    I’m always getting an error when I try to save my settings_schema.json after adding the code of step 2…
    I’m getting Error: Invalid JSON: unexpected token

    How can I solve this?

    • Huynh Mai Anh Kiet says:

      Hi Allan,

      Thank you for your comment. I think you have error with comma (,)

      Please try add a comma to the end of code.

  11. Maria Fernanda Valencia says:

    I have this on the snippet:
    {% if plus_cart_discount_code %}

    (function($) {
    $(‘form[action=”/cart”]’).find(‘[name*=”discount”][type=”hidden”]’).remove();
    $(‘form[action=”/cart”]’).on(‘submit’, function(){
    var $discountCode = $(‘input[name=”discount”]’).val();
    localStorage.setItem(‘storedDiscount’, $discountCode);
    });
    });
    })(jQuery);

    {{ ‘cart_discount’ | t: shop_name: shop.name }}

    {% endif %}
    But still can’t fix the translation missing: es.cart.general.cart_discount and where do I put my value:
    ?discount=WeAreFeelingGenerous with my discount name?

    • Huynh Mai Anh Kiet says:

      Replace {{ ‘cart.general.cart_discount’ | t: shop_name: shop.name }} with DISCOUNT CODE – APPLIED AT CHECKOUT

  12. Jess says:

    Error when doing the theme settings

    {
    “name”: “Cart discounts executed in checkout [Plus]”,
    “settings”: [
    {
    “type”: “header”,
    “content”: “Enable cart page discount code input field.”
    },
    {
    “type”: “paragraph”,
    “content”: “Adds a discount code input field to the cart page.”
    },
    {
    “type”: “checkbox”,
    “id”: “plus_display_discount_code”,
    “label”: “Show discount code input field on cart page.”,
    “default”: true
    }
    ]
    }

    Gives me this

    An error prevented settings_schema.json from being saved.

    • Huynh Mai Anh Kiet says:

      Hi Jess,

      Thank you for your comment. I think you have error with comma (,). This is a syntax error

      Please try add a comma to the start or end of code.

  13. shiingetter says:

    Hi,

    If anyone can explain how the ?discount=”code” be add in the URL?

  14. Iman says:

    Hi, I want to make the discount code populate the discount code field on the cart drawer after an item is added to cart.

    Right now, if you add to cart, the code does not populate and the code does not go to checkout either.

  15. Oleg says:

    Great. It helped us a lot.

  16. Anthony says:

    Hey,

    How can i Make this code work on Mini-Cart.

    I mean The user Adds the product to cart => Then a mini cart shows up => I want the user to add the Coupon code on Cart and go to Checkout.

    Your Help is highly appreciated….

  17. Sean Soo says:

    Hi, I would like to know if it is possible to create a discount code to automatically add an item into the customer’s cart?

  18. dan says:

    Hi im looking at this but im stuck what to do here :

    Step 2: Add a theme setting to control the customisation
    can you help where this code goes etc..

Leave a Reply

Your email address will not be published. Required fields are marked *