I am going to show you how to make an incremental (bulk) quantity selector. An example would be a wholesale store and to be a member you must buy in groups of 12.
Better yet, all your products have different requirements. Some 12, some 6, and some 9.
I am going to show you how to do this using a Shopify variant metafield and a minor change to the theme files via the editor. This is all being done without the use of an app. App’s are nice and have their purpose, but they all have their own scripts that need to be loaded in externally and that can slow your site down. Page speed is so important in this day and age that even a millisecond matters.
Shopify Metafields
Okay let’s jump right in. Go to the Shopify admin panel and at the bottom find the settings tab. When you click that a popup opens a bunch more options.
Now choose the Metafields tab and open that. Choose Variant, since we are adding a field on the variant level. Now click the green button that says ‘Add Definition’.
Give it a name. In this case, I named it “quantity needed to buy”. Then a description to explain what the number is for. Just under that check the button to expose it to the API. and for content pick #integer since we need a number for the quantity.
Ignore the rest and click the save button. It’s important to save it as it won’t work without it.
Now if you go back to the variant listing there is one thing you need to copy for the next part. it’s the metafield name. Like the example below.
Adding the Incremental (bulk) Quantity Selector
Next, we need to modify the theme files slightly. This sounds worse than it is.
Every theme is different so you need to find the product template file in sections. For this example I am using the Dawn Theme. The file needed in this case is called ‘main-product.liquid’ and it can be found under sections in the theme editor. Open that file and scroll down to around line 280 you will see this.
<input
type="number"
name="quantity"
id="Quantity-{{ section.id }}"
min="1"
value="1"
form="{{ product_form_id }}"
>
This is what you are going to be changing. Below is what I changed it to.
<input
type="number"
name="quantity"
id="Quantity-{{ section.id }}"
value="{{ variant.metafields.custom.quantity_needed_to_buy }}"
min="{{ variant.metafields.custom.quantity_needed_to_buy }}"
step="{{ variant.metafields.custom.quantity_needed_to_buy }}"
onchange="changeMinQuantity(this, {{ product.metafields.custom.quantity_to_buy }})"
form="{{ product_form_id }}"
>
I will explain. Value is the number you see on the front end. It is normally 1. I changed it match the metafield name we just made. It must be in the {{ }} as it is a liquid variable. Min= is the minimum amount it can be. Since you are selling in bulk the minimum will be equal to the value in the metafield. Next is step. This is an addition to the input and necessary as it tells to increase by that number. So if you sell in groups of 12 it needs to increase in steps of 12 not 1.
Next we need to add a small bit of script to prevent the quantity selector from actually going below our number. That is the onchange part above and this script I just add right on the page I am working on.
<script>
function changeMinQuantity(_this, min) {
if (_this.value < min) _this.value = min;
return;
}
</script>
Now save the file.
The hard part is done. Just go to your products now. and open a product variant that you need to change the quantity for.
<img width="1024" height="430" src="https://bkthemes.rapidload-cdn.io/wp-content/uploads/2022/08/Screenshot-8-29-2022-2-00-15-PM-1024x430.png" alt="variant page new metafield" loading="lazy" srcset="https://i0.wp.com/bkthemes.design/wp-content/uploads/2022/08/Screenshot-8-29-2022-2-00-15-PM.png?resize=1024%2C430&ssl=1 1024w, https://i0.wp.com/bkthemes.design/wp-content/uploads/2022/08/Screenshot-8-29-2022-2-00-15-PM.png?resize=300%2C126&ssl=1 300w, https://i0.wp.com/bkthemes.design/wp-content/uploads/2022/08/Screenshot-8-29-2022-2-00-15-PM.png?resize=768%2C323&ssl=1 768w, https://i0.wp.com/bkthemes.design/wp-content/uploads/2022/08/Screenshot-8-29-2022-2-00-15-PM.png?w=1382&ssl=1 1382w" sizes="(max-width: 1024px) 100vw, 1024px" /> <p>You will notice at the bottom the new metafield you just created. Add a number in there for the amount they need to buy, and click save. Do this for all your product variants.You’re done. Go to the front end and test. if you need help as usual just reach out to me and I will help you
