I have a single product that can be purchased in different quantities. Instead of adding the same product over and over to change the quantity to add to cart, I’d like to have the variant quantities with their different prices be clickable and able to add to the cart with adjusted price. Any help is greatly appreciated!
Hi Italia,
I’d be happy to help you with this, it sounds like you’re trying to set up a number of buttons that will automatically add a fixed quantity of a product to the cart.
For example on the “bag product” product page, you would have the normal add to cart button which adds a $5 bag to cart, and then a button for “add 5 bags” that would automatically add 5 bags at $25, a “add 10 bags” button that would add 10 bags for $50 and so on.
Is this correct? If so you’ll want to use Shopify’s Cart API https://shopify.dev/docs/api/ajax/reference/cart - If you’re not able to build something like this yourself you could hire a developer.
You’ll want to include a liquid snippet in your main-product.liquid section file to achieve this, I’ve thrown one together for you here, but without a further understanding of your existing code it’s unlikely to slot perfectly in. If you don’t mind muddling through from there using the docs I’ve linked, you should get there! Of course if you have any questions feel free to reach out.
{% comment %}
Include this file by writing {% render 'multi-add-to-cart' %} below your add to cart button in 'main-product.liquid'
It accepts arguments for 4 new quantity auto-add-to-carts, these will inform the buttons the snippet will output on your product page.
For exampe the following will output 4 buttons, 1 to add Three of the product to cart, another to add Five, another to add Ten and a fourth button to add Twenty.
{% render 'multi-add-to-cart', product: product, quantity_1: 3, quantity_2: 5, quantity_3: 10, quantity_4: 20 %}
If the argument is not passed the button will not display, for example:
{% render 'multi-add-to-cart', product: product, quantity_1: 3, quantity_2: 5, quantity_3: 10 %}
will only output 3 buttons.
{% endcomment %}
{% javascript %}
const productToAdd = document.querySelector('.multi-add-to-cart__button--wrapper').dataset.product;
const addMultipleButton = document.querySelectorAll('.multi-add-to-cart__button');
let customFormData = {
items: [
{
quantity: 1,
id: ''
}
]
}
addMultipleButton.forEach(button => {
button.addEventListener('click', () => {
customFormData.items[0].quantity = parseInt(button.dataset.qty);
customFormData.items[0].id = parseInt(productToAdd);
fetch(window.Shopify.routes.root + 'cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => {
return response.json();
})
.catch((error) => {
console.error('Error:', error);
});
})
})
{% javascript %}
{% if quantity_1 != blank %}{% endif %}
{% if quantity_2 != blank %}{% endif %}
{% if quantity_3 != blank %}{% endif %}
{% if quantity_4 != blank %}{% endif %}
(Just copy & paste the code block into a file title multi-add-to-cart.liquid in your “Snippets” folder in your theme)
1 Like
Hi,
Create an additional variation called Quantity or Bundle of…, same as you would create Size or Colour.
Close…
Thank You for reaching out so quickly! I think you are close to describing what I want.
I have one product that comes in a 8 piece kit. that same kit can come in 12, 16, 20, 24 piece kit. I want to just add the 8 piece kit as a product, and if someone wants a 16 piece, then have buttons to automatically add the different quantities and correct price change to the cart. That way i do not have to keep adding products over and over just for the different quantities and price change.
1 Like
but I have several different quantities of the same product. it wouldn’t let me add more than one quantity variation. it said "you already have that name/variation.
Hi Italia,
Not a problem!
Looking at the quantities you’re looking to offer I’d like to propose you alter your offering slightly…
The initial product in a 4 piece kit, and include the snippet I’ve provided for Mutli-quantity buttons for 2, 3, 4, 5, & 6 of those 4 piece kits.
The reason for this being that an 8 piece kit only factors into 16 (2 x 8 )& 24 (3 x 8), whereas the 12 & 20 offering you want to display would technically be 1.5 of the 8 piece kit and 2.5 of the 8 piece kit which Shopify (and most e-commerce platforms) wouldn’t support.
If you were to change your original product from an 8 piece to a 4 piece kit, then the following snippet would still allow you to offer the 8 piece kit, 12 piece kit, 16 piece kit, 20 piece kit & 24 piece kit, does this make sense?
Updated snippet found below
If you need further instructions please let me know, otherwise please feel free to mark this response as your accepted solution and have a great day!
{% comment %}
Include this file by writing {% render 'multi-add-to-cart' %} below your add to cart button in 'main-product.liquid'
It accepts arguments for 4 new quantity auto-add-to-carts, these will inform the buttons the snippet will output on your product page.
For exampe the following will output 4 buttons, 1 to add Three of the product to cart, another to add Five, another to add Ten and a fourth button to add Twenty.
{% render 'multi-add-to-cart', product: product, quantity_1: 2, quantity_2: 3, quantity_3: 4, quantity_4: 5, quantity_5: 6 %}
If the argument is not passed the button will not display, for example:
{% render 'multi-add-to-cart', product: product, quantity_1: 2, quantity_2: 3, quantity_3: 4 %}
will only output 3 buttons.
{% endcomment %}
{% javascript %}
const productToAdd = document.querySelector('.multi-add-to-cart__button--wrapper').dataset.product;
const addMultipleButton = document.querySelectorAll('.multi-add-to-cart__button');
let customFormData = {
items: [
{
quantity: 1,
id: ''
}
]
}
addMultipleButton.forEach(button => {
button.addEventListener('click', () => {
customFormData.items[0].quantity = parseInt(button.dataset.qty);
customFormData.items[0].id = parseInt(productToAdd);
fetch(window.Shopify.routes.root + 'cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => {
return response.json();
})
.catch((error) => {
console.error('Error:', error);
});
})
})
{% endjavascript %}
{% if quantity_1 != blank %}{% endif %}
{% if quantity_2 != blank %}{% endif %}
{% if quantity_3 != blank %}{% endif %}
{% if quantity_4 != blank %}{% endif %}
{% if quantity_5 != blank %}{% endif %}
1 Like
Hi @Italia153
This is Jun from Bundle Kit.
Perhaps you might be interested in using an app.
Our app is able to meet your needs as it is primarily a bundle inventory management system so it will also be able to track the SKUs for variants of each product.
The bundle inventory is automatically set based on the available inventories of the bundle item(s), including the inventories of the variants. Proper quantity will also be taken out of the inventory of each bundle that is being purchased.
You can create bundles using our app. We have step-by-step instructions here: https://help.bundlekit.io/creating-a-multi-pack-bundle
Let us know if you have any questions.
Hi,
I have a similar problem as above, i want to code to use the variant picker as a button to change the quantity.
So as you can see in my screenshot, when the customer clicks on Double 2 cleaners the quantity has to change to 2 and if they click on family 3 cleaners it has to change to 3.
i use the dawn theme, could you help me please?
Hi @AVmaster I’d be happy to help.
First I want to check a couple of things:
Do you sell other products on your site that use variants in the traditional way (i.e instead of adjusting quantity, adjust the colour/size/style of a product) ?
If the answer is yes, that is fine - you’ll just want to start by duplicating the product template and assigning it to this product (You can see how to do this in the video attached).
If the answer is no, then you may want to follow this step anyway just to future-proof the site for new products.
The second thing I want to check is, what’s your expected behaviour if the user selects “Double 2 Cleaners” and then increases quantity, and is this going to be clear to users. (i.e If I select Double 2 Cleaners and increase the quantity to 2, does it add 4 cleaners to my cart?).
If you can provide me the answers to these questions, I can provide you a solution to your problem!