Is there a way to add multiple products (or a collection) to cart with one button on a blog page?
the buy button is quite close but it requires user to add one by one instead of one button that adds all products.
all the bundle apps don’t work either as most are for discount purpose or upsell.
You could try using the order form example to do it. Here is a link to example code: https://gist.github.com/carolineschnapp/9122054
Basically you’re using “updates” input as the quantity field. If the variant doesn’t exist in the cart, it will add it with the quantity in the input. Just beware that if the variant is in the cart, it will set the quantity to the input value.
Hey @ave ,
Our PickyStory app can help you there. We enable you to create looks (bundles) and link your products to them quickly. Your shoppers will be able to shop complete looks instead of just purchasing individual items. We offer multiple widgets to display on your website (no coding required). Also, soon we should release a discount feature, so if a shopper added more than one product from the same look, he would get an automatic discount.
Feel free to check PickyStory app - https://apps.shopify.com/pickystory-shop-the-look
Or contact us through hello@pickystory.com and we’d be happy to help you 
You can cross-sell and use button Add all to cart
The app Gifter: Auto Add to Cart could be used for your purposes. I would define a rule that adds the products you want to the customer’s cart when a certain other product is added (which can just have the title of your collection or whatever you choose). That way, you’ll get all those products into the customer’s cart on one button click.
I have done a post in the Past for this. The term for this Is “Pre-filled cart” or “Permalinks”
The Documentation can be found here: https://help.shopify.com/en/themes/development/getting-started/using-ajax-api#shopify-ajax-api-reference
Example of its use can be seen on my hastily whipped together Demo page here where I built it into Sections: https://demo.ecomdev.ca/
Hi, I just used this for my shop (adding multiple products with one link) to sell our combos.
if a customer returns to my shop page and ads another size or another combo, the link doesn’t add another product, if the product is already placed in the cart. Guess it is because it just updates the cart with the numbers provided.
Would it be possible to use this kind of link to add another of the same product?
But, from time to time a customer wants to buy 2 or 3 of my main product. If they go back to the shop page, and ad another main product, it will just overwrite the already added item. How can I avoid this? Is there a “add (another) one” instead of “update cart number to one”
@madeofsteel This would get a little more complicated. Add.js only adds whats there, to change or update you would need to use change.js, which if im not mistaken can not add any products at all, only change whats already there.
So you would need a developer to dig into it more, Adding an IF Statement to check if the product is already in the cart. If it is, then use Change.js, otherwise use add.js.
add.js should work fine if they are adding different sizes, since it uses variant ID.
You can use in Liquid file for form build.
// Liquid
{% for variant in product.variants %} {% endfor %}// Your javascript
$(‘.product-form__bundle .addtocart’).on(‘click’, function(){
var form = $(this).parent(‘form’);
console.log($(form).serialize());
$.ajax({
type: “POST”,
url: “/cart/add.js”,
data: $(form).serialize(),
success: () => {
},
error: function(xhr, status, error) {
console.log(xhr);
},
dataType: “json”,
});
});
What step do I need to take to input those codes?
Hi,
You can use MultiVariants ‑ Bulk Order to allows your customers to order multiple variants and quantities of the same product in just one click.
Here is the demo, you can take a look.
Hi @Vi-WizzCommerce . I’m trying to have a look at your solution but the link is not working?
@Bashir1 ah so sorry, we are moving to the new system, then it should take about 2-3 days.
In the meaning time, you can review our example code here: https://codepen.io/vincehappypoints/pen/xxGxRZX
Hope this helps.
Thanks,
Hi @ave ,
I’m curious why would you want to do that? If you want to consider various pieces of advice, here is mine. How about using Upsell and Cross-sell app? With Upsell and Cross-sell tool, customers can add many products at once. Moreover, you can get sales advantages from this app. Let me know what you think. Cheers!
Thanks @Vi-WizzCommerce , this helps a lot. Another question though, is there a way to only display the button (no image, title or quantity)?
@Bashir1 I think yes, you can take a look at all the options here: https://shopify.github.io/buy-button-js/customization/, but my lib was out of date so I’m not so sure 100%. Just try it and see.
We had a developer do some custom.js to accomplish this. Our goal was to have a free bonus toy add to cart when a specific variant is added. (Adding both together)
always looking for more innovative and less complicated code to do this bundle type add to cart button. If you’re curious, you can take a look at our site DuraPaw Dog Subscription Box. We added this functionality to our main quiz!
hope you found (or find) a good solution for yourself!
MultiATC-Buy Button Anywhere is an app that you might want to look at. It may be placed on blog pages, landing pages, and other websites and allows you to add one or more things to the basket with a single button. Quite adaptable and not in need of discount bundle.