Maximum Quantity Limiter – Shopify

Few days ago I was working on a Shopify project and I made some customization in the liquid files to add quantity limiter (to variants). Currently I have setup this only for “Maximum” quantity (i.e. customer can not purchase product/variants more than the defined limit). I believe there are some application available for this purpose but this functionality can be easily achieved without using any paid app.

Here is the demo (Later I’ll explain how to add this into shopify):

Product A (Single Variant): Bjml Mystic Water Clean

This product has different sizes and you can find the max quantity allowed for each variant in the product description section.

Product B (Multiple Variants): Bobby Straight Recycled Renegade Mens Jean

This product has multiple variants (Size, Leg) and you can find the max quantity allowed for each variant combination in the product description section.

Implementation in theme files

On my sandbox account, I am using Shopify Timber Theme and Metafields Editor (Free App) to add limit for each variant.

Step 1: Go to Product to which you want to add limiter functionality. Open Metafields app from the product admin dashboard. Click on “Variants” tab and add metafield for the variant. Details for Metafield:

Namespace	limit
Key	max
Value Type	integer
Value	Any Numeric Value (Eg: 2)

After entering these details for each variant, please save the details

Step 2: Go to Theme Editor and open product.liquid and find this code block:

<select name="id" id="productSelect" class="product-single__variants">
            {% for variant in product.variants %}
              {% if variant.available %}

                {% comment %}
                  Note: if you use option_selection.js, your <select> tag will be overwritten, meaning what you have inside <option> will not reflect what you coded below.
                {% endcomment %}
                <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

              {% else %}
                <option disabled="disabled">
                  {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                </option>
              {% endif %}
            {% endfor %}
          </select>

Replace the above code block with the code given below:

    
        {% if cart.item_count > 0 %}
          
			<select name="id" id="productSelect" class="product-single__variants">
                {% for variant in product.variants %}
                  {% if variant.available %}

                      {% for item in cart.items %}
                        {% if variant.id == item.variant_id %}
                            {% assign limiter = variant.metafields.limit %}
                            {% if item.quantity >= limiter.max %}
    		                        <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" data-max="{{ variant.metafields.limit.max | minus: item.quantity }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>                          
                            {% else %}
									{% assign availability = true %}
    		                        <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" data-max="{{ variant.metafields.limit.max | minus: item.quantity }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>                          
                            {% endif %}

                        {% else %} 
							{% assign availability = true %}
              				<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" data-max="{{variant.metafields.limit.max}}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>                                        
              
              			{% endif %}
              
                      {% endfor %}

                      {% comment %}
                      Note: if you use option_selection.js, your select tag will be overwritten, meaning what you have inside <option> will not reflect what you coded below.
                      {% endcomment %}

                  {% else %}
                      <option disabled="disabled">
                        {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                      </option>
                  {% endif %}
              
              
                {% endfor %}
              </select>                    
              
          
          {% else %} 
          
            <select name="id" id="productSelect" class="product-single__variants">
				{% assign availability = true %}

                {% for variant in product.variants %}
                  {% if variant.available %}

                      {% comment %}
                      Note: if you use option_selection.js, your select tag will be overwritten, meaning what you have inside <option> will not reflect what you coded below.
                      {% endcomment %}
                      <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" data-max="{{variant.metafields.limit.max}}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>            
                  {% else %}
                      <option disabled="disabled">
                        {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                      </option>
                  {% endif %}
                {% endfor %}
              </select>
          
          {% endif %}  

Step 3: At the bottom of product.liquid. Please add this code.

    
$("#AddToCartForm").on("submit", function(){
      	variant_id = $('#productSelect').val();
        variant_max = parseInt($('#productSelect option[value="'+variant_id+'"]').attr('data-max'));
        variant_qty = parseInt($("#Quantity").val());
        if(variant_qty > variant_max){
          if(variant_max==0){
          alert("You've already reached to the max limit allowed for this product option.");
          } else {
          alert("You can not add more than " + variant_max + " quantity of this product.");
          }
          return false;
        }
 }); 

Step 4: Go to Cart.liquid template file and define this variable in the beginning of the file (before the cart item count if condition)

{% assign processCheckout = true %}

Step 5: Within the cart.liquid template file. Find this code block:

 <td data-label="{{ 'cart.label.quantity' | t }}">
    <input type="number" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" min="0">
 </td>

And Replace the above code with this one:

<td data-label="{{ 'cart.label.quantity' | t }}">
<input type="number" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" min="0" {% if item.variant.metafields.limit.max %} max="{{item.variant.metafields.limit.max}}"{% endif %}>
 {% if item.quantity > item.variant.metafields.limit.max %}
    <p class="cart_max-qty"><strong>Max Qty : {{item.variant.metafields.limit.max}}</strong></p>              
    {% assign processCheckout = false %}
 {% endif %}
</td>

Step 6: Within the cart.liquid template file. Find this code block (should be at the end of file):

<input type="submit" name="checkout" class="btn" value="{{ 'cart.general.checkout' | t }}">

And replace the above mentioned code with this one:

        
 {% if processCheckout %}
      	<input type="submit" name="checkout" class="btn" value="{{ 'cart.general.checkout' | t }}">
 {% else %}
      	<p class="info-message">One or more items exceeds the maximum limit. Please reduce to the quantity to proceed to checkout. </p>
 {% endif %}        

And Thats it. You’re done!! Now you can test. Cart Limiter should work. If you find any problem then please leave a comment or email me.

You can also check the final code files on github: https://github.com/amandeepsinghvirdi/shopify-quantity-limiter