Product bundle issue

Technical Q&A
, , ,
1

Hi Shopify experts! I’m using Easify for a product bundle with multiple options:

  • Option 1: Select your device (Shopify option)

  • Option 2: Flavors Cores ( Shopify option)→ 3 packs, 6 packs, Complete pack

  • Option 3: Choose your flavors → 12 Easify flavor images

I want to force customers to select exactly the number of flavors that matches their pack (e.g., 3 flavors for 3-pack) and show a warning message below the flavors if they don’t, disabling Add to Cart until selection is correct.

Can anyone share a working script or approach for EasyFi image-based flavor selection?

Thanks in advance!

2

Yes this can be done with js. Also I am sure you are doing this because you might hit the variant limit here or is there a specific reason to use easily app?

Also please always share your store url along with your query. It helps understand the issue/requirement better.

Best

3

Dear @KAREMKHAIRALLA

Please share your website. Then we can give you some suggestions to help you bring your idea to life.

Regards,
Eric from Shopplaza

4

hey @KAREMKHAIRALLA
It looks like the main challenge is making sure customers select the correct number of flavors based on the pack size while using image-based selections.

One approach is to use a small JS validation that checks how many flavor images are selected and compares it with the pack option (3, 6, or complete). If the number doesn’t match, you can show a warning message under the flavor section and turn off the Add to Cart button until the correct number is selected.

Also, share your store URL along with the query. It helps to understand the setup better and suggests a more accurate solution.

5

try using this JS

<script>
document.addEventListener("DOMContentLoaded", function() {
  const packSelect = document.querySelector('[name="options[Flavors Cores]"]');
  const flavorInputs = document.querySelectorAll('.easify-flavor input[type="checkbox"]');
  const addToCartBtn = document.querySelector('[type="submit"]');
  
  const msg = document.createElement('p');
  msg.style.color = 'red';
  addToCartBtn.parentNode.appendChild(msg);
  function validate() {
    const pack = parseInt(packSelect.value); // 3, 6, 12 etc
    const selected = [...flavorInputs].filter(i => i.checked).length;
    if (selected !== pack) {
      msg.textContent = `Please select exactly ${pack} flavors`;
      addToCartBtn.disabled = true;
    } else {
      msg.textContent = '';
      addToCartBtn.disabled = false;
    }
  }
  flavorInputs.forEach(i => i.addEventListener('change', validate));
  packSelect.addEventListener('change', validate);
});
</script>

you can paste this code directly in footer file