Limit Quantity Selector

Highlighted
Tourist
5 0 4

Apologies if this has been answered but I can't seem to find it.

 

Using the Pop theme I have enabled the Product Quantity selector. As it is currently programmed, a customer can select an infinite qty and only on the cart page are they notified that the qty they selected is unavailable and it will need to be reduced. My expectation of functionality would be that if a variant has an available qty of 4 that the qty selector would max out at 4 and not allow the customer to select a qty of 5+ before clicking add to cart. Shopify support says Development is "aware" of this. Thanks in advance!

0 Likes
Shopify Expert
2179 367 456

Hi @Walker_Edwards 

Follow this:

1. Section -> product-template.liquid -> find your quantity box and add bellow code:

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

So it look like something:

<input type="number" id="Quantity-{{ section.id }}" name="quantity" max="{{ product.selected_or_first_available_variant.inventory_quantity}}" value="1" min="1" class="product-form__input" pattern="[0-9]*">

If you have variants then you have to change max value using Js from Asset->theme.js from variants select callback function.  find if(variants)

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Shopify Staff
Shopify Staff
138 14 19

Hey, @Walker_Edwards!

 

My name is Lilith, I'm on the Social Care team at Shopify.

 

The above answer from @Jasoliya will work excellently! I also wanted to drop a few screenshots of how Pop works for limited quantities.

 

Pop Theme notification

 

It does have a notice on the Product Page before going to the Cart Page where the customer can have a limit of how many items they can add to the cart.

If you have Shopify tracking your inventory this is what it'll look like.

 

This is the inventory set at 10 maximum on a test store for these variants:

 

 

alt

 

 

When viewing the site, this is what happens if more than the maximum is selected:

 

 

alt

 

 

It shouldn't allow the customer to add the item to the cart. If this isn't happening on your site, there could be some custom code that could be interfering with it. The other reason this might not show up is if your theme is not up to date. In the latter case, I'd recommend downloading a fresh copy of the theme and adding your customized visuals to it if you haven't had too many customizations to the theme, this will usually help solve several things for merchants.

 

Showing Inventory Left In Stock

 

Another helpful option that I've used frequently in my own stores is to add a snippet to the product page as well to let customers know how much is left in stock.

 

Here's the snippet I used on any Pop theme:

 

 <div>{{ variant.inventory_quantity }} left in stock</div>

 

You can add it anywhere in the Section called product-template.liquid, but here's where I normally placed it:

 

 

alt

 

 

Of course, you can add styles to it and change the font format and much more, but for the purposes of simplicity, I've left it plain here.

Here's what it looks like on the site:

 

 

alt

 

 

Some other options

 

I've got a couple of apps that can do a similar display of in-stock numbers as well if you'd like to check them out.

 

I do like using a display of inventory on products even if a maximum quantity is limited on the page. This display of stock count helps drive a bit of urgency and can really boost conversions in the long run as well. I love using it, but this is just an option and an idea that might help as well.

 

Here are the apps that can help with this if you don't want to modify the code:

 

 

Let me know how you do with the information above! I'm happy to answer any questions you think of as you work on your business.

Lilith | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes