How to add quantity plus/minus button in Shopify

Byadmin

This tutorial describes how to add quantity plus/minus button in Shopify without any app.

Demo preview. Password: glaold

Warning

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, JavaScript, and Liquid is required. If you need help, then you can hire a Shopify expert.

Warning

Before you start the installation, it is highly recommended creating a duplicate of your preferred theme. This allows you to test your installation before making the theme live on your store.

Step 0: Add jQuery

You can skip this step if your theme already have jQuery installed.

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

3. In the Assets directory, click Add a new asset.

4. Name your asset jquery.min, select .js for the file type, then click Add asset. Your asset file opens in the code editor.

5. Paste the code from this file into your newly created file.

6. In the Layouts folder, open the theme.liquid file.

7. Right above </head>, paste this code:

{{ 'jquery.min.js' | asset_url | script_tag }}

8. Click Save.

Step 1: Add code to product page

1. In the Sections directory, open product-template.liquid (or product.liquid, if missing product-template.liquid)

2. Find a line that similar to <input type="number" name="quantity" ... />.

3. Right above this line, paste this code:

<div style="clear: both"></div>
<input type="button" value="-" class="qtyminus" field="quantity">

4. Right below this line, pase this code:

<input type="button" value="+" class="qtyplus" field="quantity">
<div style="clear: both"></div>
Final code

5. Click Save.

Step 2: Add code to cart page

1. In the Sections directory, open cart-template.liquid (or cart.liquid, if missing cart-template.liquid)

2. Find lines that similar to <input type="number" value="{{ item.quantity }}" ... />. Some themes have more than one line.

3. Right above these line, paste this code:

<div style="clear: both"></div>
<input type="button" value="-" class="qtyminus" field="quantity">

4. Right below these line, pase this code:

<input type="button" value="+" class="qtyplus" field="quantity">
<div style="clear: both"></div>
Final code

5. Click Save.

Step 3: Create a snippet

1. In the Snippets directory, click Add a new snippet.

2. Name your snippet quantity-button, then click Create snippet. Your snippet file opens in the code editor.

3. Paste the following code into your newly created quantity-button file:

<script>
  jQuery(document).ready(function () {
    // This button will increment the value
    $('.qtyplus').click(function (e) {
      // Stop acting like a button
      e.preventDefault();
      // Get the field name
      fieldName = $(this).attr('field');
      // Get its current value
      var currentVal = parseInt($('input[name=' + fieldName + ']').val());
      // If is not undefined
      if (!isNaN(currentVal)) {
        // Increment
        $('input[name=' + fieldName + ']').val(currentVal + 1);
        $('input[name=' + fieldName + ']').change();
        $(this).prev().prev().removeClass('disabled');
        $(this).prev().prev().prop("disabled", false);
      } else {
        // Otherwise put a 0 there
        $('input[name=' + fieldName + ']').val(0);
        $('input[name=' + fieldName + ']').change();
      }
    });
    // This button will decrement the value till 0
    $(".qtyminus").click(function (e) {
      // Stop acting like a button
      e.preventDefault();
      // Get the field name
      fieldName = $(this).attr('field');
      // Get its current value
      var currentVal = parseInt($('input[name=' + fieldName + ']').val());
      // If it isn't undefined or its greater than 0
      if (!isNaN(currentVal) && currentVal > 2) {
        // Decrement one
        $('input[name=' + fieldName + ']').val(currentVal - 1);
        $('input[name=' + fieldName + ']').change();
        $(this).removeClass('disabled');
        $(this).prop("disabled", false);
      } else {
        // Otherwise put a 0 there
        $(this).addClass('disabled');
        $(this).prop("disabled", true);
        $('input[name=' + fieldName + ']').val(1);
        $('input[name=' + fieldName + ']').change();
      }
    });

    $('.template-cart input[name="updates[]"]').each(function (i, obj) {
      if (jQuery(this).val() == 1) {
        jQuery(this).prev().addClass('disabled');
        jQuery(this).prev().prop("disabled", true);
      }
    });
  });
</script>
<style>
  .qtyminus {
    float: left;
  }
  input[name="quantity"], input[name="updates[]"] {
    float: left;
    margin: 0 5px;
  }
</style>

4. Click Save.

Step 4: Include your snippet

1. In the Layouts folder, open the theme.liquid file.

2. Scroll to the bottom of the file. Right above the closing tag, paste this code:

{% render 'quantity-button' %}

3. Click Save.

Good luck!