Adding in discount code at cart page

Enercos - Single Product eCommerce Shopify Theme

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.


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.


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


You may also like...

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

    • 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’);
      $(‘form[action=”/cart”]’).on(‘submit’, function(){
      var $discountCode = $(‘input[name=”discount”]’).val();
      localStorage.setItem(‘storedDiscount’, $discountCode);


      {% 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?

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

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

    {{ ‘cart_discount’ | t: 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?

  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.

  13. shiingetter says:


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

Leave a Reply

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