Shopify Quantity Selector limiter

Don’t you hate it when the quantity selector in a shop does not take into account how many products is in stock? We do! But the good news is that there is a really simple hack you can use in Shopify to greatly improve the user experience.

There are to goals with this hack:

• When selling unika products (only one available of each) do not show the quantity selector
• When more products available only allow to select a maximum of what is in stock

Show availablity

First we want to show how many products are available. Some themes already do this but in case your theme do not you can add it like this:

{{ 'products.product.quantity.label' | t }} ({{ product.selected_or_first_available_variant.inventory_quantity}} available)

Copy

You probably want to wrap it in a container and style it a bit. For the Dawn theme this is how it’s done:

<label class="form__label" for="Quantity-{{ section.id }}">
      {{ 'products.product.quantity.label' | t }} ({{ product.selected_or_first_available_variant.inventory_quantity}} available)
</label>

Copy

Here is an example of how it can look for a product that have more than one in stock:

Limit how many products that can be added to the cart

Next we want to limit how many products you can add to the cart. This can be done with the following line of code added to the selector form:

max="{{ product.selected_or_first_available_variant.inventory_quantity}}"  

Copy

The final form code can look like this (example from the Dawn theme):

<quantity-input class="quantity">
   <button class="quantity__button no-js-hidden" name="minus" type="button">
       <span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: product.title | escape }}</span>
       {% render 'icon-minus' %}
    </button>
    <input class="quantity__input"
       type="number"
       name="quantity"
       id="Quantity-{{ section.id }}"
       min="1"
       value="1"
       form="product-form-{{ section.id }}"
       max="{{ product.selected_or_first_available_variant.inventory_quantity}}"   
     >
     <button class="quantity__button no-js-hidden" name="plus" type="button">
       <span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product.title | escape }}</span>
       {% render 'icon-plus' %}
     </button>
</quantity-input>

Copy

Only show quantity selector if more products is available

The last thing we want to do is to only show the quantity selector if there is actually more than one product available. If there is only one – for example a unika product, then the quantity selector serves no purpose and may just confuse your customers. 

To do this you need to wrap your quantity selector in this code:

{%- if product.selected_or_first_available_variant.inventory_quantity  > 1 -%}

(FORM)

{% endif %}

Copy

Here is example of an unika product where we have removed the quantity selector:

 

That’s it! Now the quantity selector only show available options. This will greatly improve usability.

But how does this apply to SEO?

It dosen ‘t really. But indirectly it does. Because with better usability it is more likely visitors will buy in your shop, stay longer and come back again. That is what we refer to as “user engagement” – and better user engagement have an impact on SEO.