Adding multiple variants in one click

Highlighted
New Member
7 0 0

Hello

 

I sell four flavours of granola on my shop. People love to buy all four flavours in one go so i added a 4-pack SKU.

 

However, what i really want to do is offer the customer the option to choose which four variants go into their cart in a really simple way. I don't want them to have to choose flavour 1 from the drop-down > add to cart > go back > add flavour 2 from drop-down > add to card > go back > add flavour 3 etc etc. 

 

I'd love there to be 4 separate drop-down boxes on the product page so the customer can choose four flavours and add to card in one click. Does this exist?

 

Thanks! 

0 Likes
Highlighted
Shopify Partner
395 27 56

Hi @jamievickery ,

 

Since you've already created a SKU for the 4-pack why not now add the 4-pack SKU as a product variant?

 

Regards,

 

Sam

Custom Apps and Theme Support | Email us: hello@achieveapplabs.com | Follow us on Twitter @achieveapplabs | Hosted solutions | Lifetime support
0 Likes
Highlighted
New Member
7 0 0

Hi Sam

 

I want the customer to choose the different flavours they want as opposed to giving them one option of a 4-pack with 4 different flavours specified by us)

 

I tried to add the flavours as variants but of course this doesn't work as it still only puts one SKU into the cart.

 

Thanks

Jamie

0 Likes
Highlighted
Shopify Partner
395 27 56

Hi @jamievickery,

 

AJAX API can be used to add multiple variants to the shoppers cart. The default product form only submits one product, by default.

 

I think what could be easiest for you is to have a quick add button that will make a call like so adding all variants to the cart:

 

    $.post('/cart/add.js', {
    
    items: [
      {
        quantity: 1,
        id: 33576038727818
      },
      {
        quantity: 1,
        id: 33576038760586
      },
      {
        quantity: 1,
        id: 33576038793354
      }
    ]      
    }).then(function(res){
       //do something when complete
    });

This is just an example, but any solution will consist of modifying product.liquid and using AJAX API.

 

Regards,

 

Sam

Custom Apps and Theme Support | Email us: hello@achieveapplabs.com | Follow us on Twitter @achieveapplabs | Hosted solutions | Lifetime support
0 Likes
Highlighted
Shopify Expert
1 0 0

Did you solve it?

0 Likes
Highlighted
Shopify Partner
395 27 56

We've setup a demo of the "quick add" button here: https://achievecustom.myshopify.com/products/granola-bar

 

To get this basic functionality just add a file called custom_add.js to your Assets folder then include it in theme.liquid:

 

<script src="{{ 'custom_add.js' | asset_url }}" defer="defer"></script>

Content for custom_add.js

 

$("#addAllBtn").click(function(e){

  e.preventDefault();

    $.post('/cart/add.js', {

      items: [
        {
          quantity: 1,
          id: 33664072941612
        },
        {
          quantity: 1,
          id: 33664072974380
        },
        {
          quantity: 1,
          id: 33664073007148
        },
        {
          quantity: 1,
          id: 33664073039916
        }
      ]
    },
    
    function(){
       //do something when success
      
       alert("All 4 Flavors were added to your cart.");
      
    }, "json"
        
          
  );
});


The last step is the modify Sections/product-template.liquid, you can add this button pretty much anywhere on the product page:

 

              <button type='submit' id="addAllBtn" class='btn'>Add All Flavors</button>

Regards,

 

Sam

Custom Apps and Theme Support | Email us: hello@achieveapplabs.com | Follow us on Twitter @achieveapplabs | Hosted solutions | Lifetime support
0 Likes
Highlighted

Hi @jamievickery,

Did you find any solution yet? If not, you can check our recently lunched app (MultiVariants - Bulk Order) to order multiple varinats in a single click.

What does it do? One-click bulk add to cart for product variants. Let your customers order multiple variants and quantities of the same product in just one click.

It’s a FREE app. Feel free to check it with your Shopify store. Will appreciate any of your feedback.
App store link: https://apps.shopify.com/multivariants

Here is the Live demo

0 Likes
Highlighted
Tourist
9 0 1

Is there any way for variants to be taken off the stock once added on a product?

 

For example - Meal X - customer adds wine - can the wine be taken off stock?

 

Many thanks,

 

 

0 Likes
Highlighted

Hello @mungofinlayson ,

Sorry, unfortunately I am not fully clear about your requirements.

Can you please provide more details, screenshots or any sample URL?

0 Likes