add multiple product to cart with one button?

ave
Tourist
16 0 6

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.

Replies 16 (16)

DIW
Shopify Partner
9 0 2

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.

alexgreen
Shopify Partner
75 1 9

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 🙂

Alex Green | PickyStory
Make irresistible offers with PickyStory.

Anthony_Jackson
Shopify Partner
245 2 11

You can cross-sell and use button Add all to cart

banned

adam_bn
Shopify Partner
79 4 16

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.

 

https://apps.shopify.com/gifter-cart-auto-include

Reincarnated
Pathfinder
103 8 36

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-refer...

 

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/

 

 

 

madeofsteel
Visitor
1 0 0

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"

Reincarnated
Pathfinder
103 8 36

@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.

blakura
Visitor
1 0 1

You can use <input type="hidden" name="items[{{ forloop.index0 }}][id]" value="{{ variant.option2 }}" /> in Liquid file for form build.

 

// Liquid

<form id="product-form__bundle-{{ product.id }}" class="product-form__bundle text-center">
{% for variant in product.variants %}
<input type="hidden" name="items[{{ forloop.index0 }}][id]" value="{{ variant.option2 }}" />
{% endfor %}
<button type="button" class="addtocart"></button>
</form>

 

// 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",
});
});

Borah
Visitor
1 0 0

What step do I need to take to input those codes?

Jahangir
Shopify Partner
96 2 16

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.

Jahangir | EFOLI
- Was my reply helpful? Please Like and Accept Solution!
- Selling Personalized Products? Try Inkybay | For bulk variant order, check MultiVariants

Bashir1
Visitor
2 0 0

Hi @VinceNg. I'm trying to have a look at your solution but the link is not working? 

VinceNg
Shopify Partner
125 4 19

@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,

Vince Nguyen | Ecommerce Consultant at HappyPoints.io
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Email me at: vince@happypoints.io
Skype: vince@happypoints.io
Bashir1
Visitor
2 0 0

Thanks @VinceNg, this helps a lot. Another question though, is there a way to only display the button (no image, title or quantity)?

VinceNg
Shopify Partner
125 4 19

@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.

Vince Nguyen | Ecommerce Consultant at HappyPoints.io
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Email me at: vince@happypoints.io
Skype: vince@happypoints.io

George_Brown19
Shopify Partner
47 0 7

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!

 

DuraPaw
Shopify Partner
14 0 10

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!