Adding in discount code at cart page

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.

You may also like...

24 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?

  6. phpdevloper says:

    Is discount apply to direct payment from cart page also.

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

  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?

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

Leave a Reply

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