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

1

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:

image
image414×1444 47.1 KB

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