If you want to add a product to your Shopify cart automatically when another product is added, and you want the new product to have the same quantity as the first one, this tutorial will show you how.
In this guide, we’ll go through the steps to automatically add a second product to the cart when the first one is added. We will also ensure that the second product gets the same quantity as the first product.
Steps:
-
Get Cart Information
First, we need to get the cart details using Shopify’s/cart.jsAPI. This gives us all the items in the cart, including the product IDs and quantities. -
Find the First Product
Next, we check if the first product (the one that triggers the action) is already in the cart. We use the product ID to find it. -
Check for the Second Product
We then check if the second product (the one we want to add automatically) is already in the cart. If it’s not, we proceed to add it. -
Add the Second Product
If the second product is not in the cart, we will automatically add it using Shopify’s/cart/add.jsAPI. We also ensure that the quantity of the second product is the same as the quantity of the first product. -
Refresh the Cart
After the second product is added, we refresh the page to update the cart with the new product.
The Code:
Here is the code that will do all of this:
<script>
fetch("/cart.js")
.then((res) => res.json())
.then((cart) => {
const items = cart.items;
// Check if the first product is in the cart
const productInCart = items.find(item => item.product_id === 7650687647902);
// Check if the second product is already in the cart
const secondProductInCart = items.find(item => item.product_id === 8356958601374);
if (productInCart) {
// Get the quantity of the first product
const productQuantity = productInCart.quantity;
// If the second product is not in the cart, add it with the same quantity
if (!secondProductInCart) {
fetch('/cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
items: [{
id: 45729011663006, // Variant ID of the second product
quantity: productQuantity // Same quantity as the first product
}]
})
})
.then((res) => res.json())
.then(() => {
// Refresh the page after adding the product to the cart
location.reload();
})
.catch((error) => console.error("Error adding product:", error));
}
}
})
.catch((error) => console.error("Error fetching cart:", error));
</script>
Explanation:
-
Get Cart Details: We fetch the cart using
/cart.jsto get all items and their details (like product ID and quantity). -
Find First Product: We check if the first product is in the cart by searching for its
product_id. -
Find Second Product: We then check if the second product is already in the cart. If it is not, we add it.
-
Same Quantity: The quantity of the second product is set to be the same as the first product’s quantity.
-
Refresh: After the second product is added, we refresh the page to update the cart.
Why This is Useful:
This solution is great for situations where you want to offer a “bonus” product to customers when they add a certain product to their cart. For example, if they add a “poultry feeder,” you can automatically add a “chicken egg brush” to their cart with the same quantity. This makes the shopping experience smoother and can help increase sales.
Conclusion:
By using this method, you can automatically add a second product to the cart in Shopify, and make sure it has the same quantity as the first product. This is a simple way to improve the customer experience on your store, and it doesn’t require complicated code.
