Adding multiple variants in one click

jamievickery
New Member
10 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! 

Replies 12 (12)
achieveapplabs
Shopify Partner
512 39 85

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

Use Approovly to create and track order approvals | Looking for more Shopify apps? achieveapplabs.com/#apps
jamievickery
New Member
10 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

achieveapplabs
Shopify Partner
512 39 85

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

Use Approovly to create and track order approvals | Looking for more Shopify apps? achieveapplabs.com/#apps
PixelWeb
Shopify Expert
4 0 0

Did you solve it?

achieveapplabs
Shopify Partner
512 39 85

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

Use Approovly to create and track order approvals | Looking for more Shopify apps? achieveapplabs.com/#apps
Jahangir
Shopify Partner
95 2 14

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

Jahangir | EFOLI
- Was my reply helpful? Please Like and Accept Solution!
- Selling Personalized Products? Try Inkybay | For bulk variant order, check MultiVariants
mungofinlayson
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,

 

 

Jahangir
Shopify Partner
95 2 14

Hello @mungofinlayson ,

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

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

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

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

Jahangir
Shopify Partner
95 2 14

@Dalesha26,

Yes, you can apply the app (MultiVariants - Bulk Order) to products you need with direct product URL, type, tags, or vendors.

Here is the help doc you can take a look at.

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

I am having a similar issue but can not find a resolution.

Jahangir
Shopify Partner
95 2 14

@Allure21,

Did you try the MultiVariants - Bulk Order app. You can use the MultiVariants - Bulk Order app to display all the variants with a quantity box and allow bulk add to cart for all selected variants.

Here is the demo you can take a look at.

MultiVariants bulk order.png

 

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