Adding multiple variants in one click

[jamievickery]

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! 

[achieveapplabs]

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

[jamievickery]

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

[achieveapplabs]

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

[PixelWeb]

Did you solve it?

[achieveapplabs]

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

[jahangir]

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

[mungofinlayson]

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,

[jahangir]

Hello @mungofinlayson ,

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

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

[Dalesha26]

Is it possible to do it only on one item and not every item in your store