Add the variants as a check box

[JerrySedra]

Hello Dears,

I need to add the variants\options\extras to a product as a check box so the customer can choose more than one extra item for the product, instead of the drop-down list which restricts choosing more than one item.

Thanks in advance.

[Iris]

Hi @JerrySedra ,

Thanks for reaching out. That is an excellent question.

Depending on the nature of your product and the extras you’d like to include, it might be possible to edit a product template code with the help of Shopify Experts. You can get in touch with them and see what feedback and quotes you get.

However, using an app would be a better option in this case. Plenty of free and affordable apps in our App Store allow you to achieve a professional-looking product page with a few clicks. I want to share with you a few of my favorite apps for this feature.

Advanced Product Options allows you just the suitable types for your options from image & color swatches, dropdowns, radio buttons, checkboxes, text boxes, and more.

Product & Variants Options helps you customize your product based on your brand. Styling your brand helps boost the customer experience. This app also has a free plan available.

Infinite Product Options has a free plan and allows you to add customization, such as a text field and image or swatch selector.

Product Personalizer is a little more unique and allows you to add your own custom fonts so your customer can preview the text they want to be engraved. Check it out here.

If you may need something a little different or with some added functionality, you can browse the whole list of product customizing apps here.

Also, I am curious if you have anything planned for BFCM this year, but now is the time to make some preparations. BFCM is one of the biggest sales weekends of the year and sees the start of the holiday season as well. Every year my go-to is this BFCM Checklist. It allows me to make sure that I am making the best use of my time and resources and it really helps take the pressure off by starting early. It is well worth the read should you be interested!

Let me know what you think! Don’t hesitate to reach out with any questions.

[Bobsteven]

If you’ve already created a product, you can add options to it to generate new variants. After you save variants, you can add prices to them.

Steps:1. From your Shopify admin, go to Products.

1. Click the name of the product.

2. In the Options section, click Add another option.

3. Enter the option information in the fields.

4. Click Save.

[ExpertRookie]

Hi @JerrySedra ,

I understood you want to change the select-box-type variant to radio-box type variant. I’m right, then can you give me your URL store to check. Take a look at this screenshot to understand what I mean

[Himanipanchal07]

Hi @JerrySedra ,

It’s li’l bit hard to understand for you if you don’t have knowledge about theme customization in Shopify, But I have a solution for your issue.
In product detail page template you need to fetch variants with variant ID.

{% for variant in product.variants %}
        
         - {{ variant.price | money }}
{% endfor %}

Use above code snippet to fetch variants

Now you need to add to cart them,
Step-1: Need to remove default theme addtocart form, comment out that code
Step-2: Add above variant selection & add button with id ‘add_to_cart’ to add to cart them
Step-3: To add these selected variants on cart, we need to use Cart AJAX API,
So create a .js file & include it on you product template
Create click event of our ADD_TO_CART button and add below code in your .js file

$(document).on('click','#add_to_cart',function(){
var checkboxes = document.querySelectorAll('input[type=checkbox].varinats:checked')
for (var i = 0; i < checkboxes.length; i++) {
  // loop through all variants & add them into cart one by one  
      let variantId = checkboxes[i].value;
          // Add ajax API
          $.ajax({
              method:'POST',
              url:'/cart/add.js',
              data: {'quantity':1,'id':variantId},
              dataType: 'json',
              success:function(data){
                  document.dispatchEvent(new CustomEvent('ajaxProduct:added', {
                      detail: {
                        product: data         
                      }
                  }));
                  document.querySelector('.js-drawer-open-cart .cart-link').dispatchEvent(new Event('click'));
              }
      });    
  } 
});

It’s a working solution for many site I developed, so let me know if you have any questions.
Hope it will help you.

Have a good day..!!

[JerrySedra]

Seems that it is the proper solution, but honestly I couldn’t apply it
Can you please try to clarify with more steps and screenshots?

[EasifyApps-Zoe]

Hi @JerrySedra ,

Though it’s been some time since you initially brought up your topic, I’d like to offer a practical solution for you to consider, especially if you encounter a similar issue in the future .

Instead of creating Shopify variants, you can manage your product options within the Easify Product Options app (free plan available). With this approach, you gain the ability to showcase your options in 25 styles, such as checkboxes or image swatches, supporting multi-select capabilities. The app is incredibly user-friendly, complete with a live preview feature right within the app itself. No coding expertise is required .