Maximum Quantity Limiter – Shopify

This blog post comes from Amandeep Singh, one of our talented web developers. Amandeep recently did some work to customize a Shopify feature that many eCommerce brands may appreciate.

I was recently working on a Shopify project, and I decided to make some customizations in the liquid files to add a quantity limiter to the variants. Currently, I’ve only set this up for maximum quantity, meaning the customer can’t purchase products or variants that are higher than the defined limit. This functionality can be achieved easily without relying on a paid app, and I believe some users may find it useful.

I’ll explain how to add this functionality into Shopify later in the article, but here’s a demonstration to get you started:

Product A (Single Variant): Bjml Mystic Water Clean

This product has different size options, and you can find the maximum 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 and Leg), and you can find the maximum quantity allowed for each variant combination in the product description section.

Implementation in Theme Files

On my Sandbox account, I’m using the Shopify Timber theme and a free app called Metafields Editor to add a limit to each variant.

Step 1: Go to the product that will receive the limiter functionality. Open the Metafields Editor app from the product admin dashboard. Click on the Variants tab, and add “metafield” for the variant. Details for Metafield:

After entering these details for each variant, make sure you save.

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

[sourcecode language=”plain”]
<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>
[/sourcecode]
Replace the code block above with the following code:
[sourcecode]
{% 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 %}
[/sourcecode]

Step 3: Add the following code to the bottom of product.liquid:

[code lang=”js”]
$(“#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;
}
});
[/code]

Step 4: Go to the cart.liquid template file, and define the following variable in the beginning of the file (before the cart item count, depending on the condition):

[sourcecode]{% assign processCheckout = true %}[/sourcecode]

Step 5: Find the following code block within the cart.liquid template file:

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

Replace the code above with the following code:

[sourcecode]
<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>
[/sourcecode]

Step 6: Find the following code block within the cart.liquid template file. It should be at the end of the file:

[sourcecode]<input type=”submit” name=”checkout” class=”btn” value=”{{ ‘cart.general.checkout’ | t }}”>[/sourcecode]

Replace the code above with the following code:

[sourcecode]
{% 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 %}
[/sourcecode]

That’s it. You’re done! Now go ahead and test Cart Limiter to make sure it works. If you run into any problems, you can contact us.

You can also view the final code files on Github.