How To Add Dynamic Variants Drop Downs to Select Size Or Color?

For this example, we will do the size variant and for 4 products.

1 - Adding your dropdowns:

In your page builder, you need to add a Form Element of type Select and set it up like the following:


You will then duplicate the same Form Element 4 times (because we will do 4 products in this example), the only thing you need to change is the Data Name (change the others to “pair2_size”, “pair3_size”, “pair4_size”).

2 - Adding the Custom JS code:

Go to Custom Codes > Custom JS(Body), and paste the following code:

<script>
   let DefaultProduct = 1;
   function modifyVariants(variant) {
       var variant1_color = document.querySelector('select[data-name="pair1_color"]');
       var variant2_color = document.querySelector('select[data-name="pair2_color"]');
       var variant3_color = document.querySelector('select[data-name="pair3_color"]');
       var variant4_color = document.querySelector('select[data-name="pair4_color"]');


       if (variant == 1) {
               variant1_color.parentNode.parentNode.style.display = 'block';
               variant2_color.parentNode.parentNode.style.display = 'none';
               variant3_color.parentNode.parentNode.style.display = 'none';
               variant4_color.parentNode.parentNode.style.display = 'none';
       } else if (variant == 2) {
               variant1_color.parentNode.parentNode.style.display = 'block';
               variant2_color.parentNode.parentNode.style.display = 'block';
               variant3_color.parentNode.parentNode.style.display = 'none';
               variant4_color.parentNode.parentNode.style.display = 'none';
       } 
       else if (variant == 3) {
               variant1_color.parentNode.parentNode.style.display = 'block';
               variant2_color.parentNode.parentNode.style.display = 'block';
               variant3_color.parentNode.parentNode.style.display = 'block';
               variant4_color.parentNode.parentNode.style.display = 'none';
       } else {
               variant1_color.parentNode.parentNode.style.display = 'block';
               variant2_color.parentNode.parentNode.style.display = 'block';
               variant3_color.parentNode.parentNode.style.display = 'block';
               variant4_color.parentNode.parentNode.style.display = 'block';

       }
   }

   //init
   modifyVariants(DefaultProduct);
   // Event handler
   document.querySelectorAll('.pl-radio').forEach((r, i) => {
       console.log(r);
       r.addEventListener("change", () => {
           modifyVariants(i+1);
       });
   });
</script>

PS: DefaultProduct is the index of the selected product by default.

Want to learn how to set up your dynamic variants and link them to Shopify Please see this documentation because that’s a different topic: https://docs.funnelish.com/integrations/shopify/set-up-dynamic-variants.

1 Like

what about 5 variant?

Hi @nominomi,

Please make sure you add all of your dynamic variants and give them the right data Names.

Then use the following Custom Code instead of the one above.

<script>
    let DefaultProduct = 1;
    function modifyVariants(variant) {
        var variant1_color = document.querySelector('select[data-name="pair1_color"]');
        var variant2_color = document.querySelector('select[data-name="pair2_color"]');
        var variant3_color = document.querySelector('select[data-name="pair3_color"]');
        var variant4_color = document.querySelector('select[data-name="pair4_color"]');
 
 
        if (variant == 1) {
                variant1_color.parentNode.parentNode.style.display = 'block';
                variant2_color.parentNode.parentNode.style.display = 'none';
                variant3_color.parentNode.parentNode.style.display = 'none';
                variant4_color.parentNode.parentNode.style.display = 'none';
                variant5_color.parentNode.parentNode.style.display = 'none';
        } else if (variant == 2) {
                variant1_color.parentNode.parentNode.style.display = 'block';
                variant2_color.parentNode.parentNode.style.display = 'block';
                variant3_color.parentNode.parentNode.style.display = 'none';
                variant4_color.parentNode.parentNode.style.display = 'none';
                variant5_color.parentNode.parentNode.style.display = 'none';
        } 
        else if (variant == 3) {
                variant1_color.parentNode.parentNode.style.display = 'block';
                variant2_color.parentNode.parentNode.style.display = 'block';
                variant3_color.parentNode.parentNode.style.display = 'block';
                variant4_color.parentNode.parentNode.style.display = 'none';
                variant5_color.parentNode.parentNode.style.display = 'none';
        } else if (variant == 4) {
                variant1_color.parentNode.parentNode.style.display = 'block';
                variant2_color.parentNode.parentNode.style.display = 'block';
                variant3_color.parentNode.parentNode.style.display = 'block';
                variant4_color.parentNode.parentNode.style.display = 'block';
                variant5_color.parentNode.parentNode.style.display = 'none';
        } else  {
                variant1_color.parentNode.parentNode.style.display = 'block';
                variant2_color.parentNode.parentNode.style.display = 'block';
                variant3_color.parentNode.parentNode.style.display = 'block';
                variant4_color.parentNode.parentNode.style.display = 'block';
                variant5_color.parentNode.parentNode.style.display = 'block';
        }
    }
 
    //init
    modifyVariants(DefaultProduct);
    // Event handler
    document.querySelectorAll('.pl-radio').forEach((r, i) => {
        console.log(r);
        r.addEventListener("change", () => {
            modifyVariants(i+1);
        });
    });
 </script>

Let us know how it goes.

Best,
Fey @Funnelish.