Hey, I’m looking to create 3 product options on Checkout that have different amount of my product in each. And based on the products they get, I need them to be able to pick variants for each: color and sizes. Like this:
I know you need to make Dynamic Variants through something like this:
But the support said I need JS code to make it work.
my friend, let me know how you did it?.
i am also struggling with creating a bundle like you showed
thanks
For this example, we will do the size variant and for 3 products.
In your page builder, you need to add a Form Element of type Select and set it up like the following:
Finally, add three more form Elements for the Color variants (the data name should be something like this pair2_color).
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 variant1_size = document.querySelector('select[data-name="pair1_size"]');
var variant2_size = document.querySelector('select[data-name="pair2_size"]');
var variant3_size = document.querySelector('select[data-name="pair3_size"]');
if (variant == 1) {
variant1_color.parentNode.parentNode.style.display = 'block';
variant1_size.parentNode.parentNode.style.display = 'block';
variant2_color.parentNode.parentNode.style.display = 'none';
variant2_size.parentNode.parentNode.style.display = 'none';
variant3_color.parentNode.parentNode.style.display = 'none';
variant3_size.parentNode.parentNode.style.display = 'none';
} else if (variant == 2) {
variant1_color.parentNode.parentNode.style.display = 'block';
variant1_size.parentNode.parentNode.style.display = 'block';
variant2_color.parentNode.parentNode.style.display = 'block';
variant2_size.parentNode.parentNode.style.display = 'block';
variant3_color.parentNode.parentNode.style.display = 'none';
variant3_size.parentNode.parentNode.style.display = 'none';
}
else {
variant1_color.parentNode.parentNode.style.display = 'block';
variant1_size.parentNode.parentNode.style.display = 'block';
variant2_color.parentNode.parentNode.style.display = 'block';
variant2_size.parentNode.parentNode.style.display = 'block';
variant3_color.parentNode.parentNode.style.display = 'block';
variant3_size.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.
So the “pair” refers to product number right. So pair1_size and pair1_color go together to refer to first product option. pair2_size and pair2_color refer to 2nd product option and so on correct?
yeah indeed,
the code was made for a pair of shoes and I made modifications that will make it fit you specifications.
Hi, i embedded the code below and it only shows the first dropdown field when i select the different radio buttons in my product list. It seems like the code is not connected to the product list variants. Any idea on how to fix it?
To clarify: I have one product and 3 different bundle options in my product list (1x, 2x and 3x) and the product comes in sizes XS,S,M,L and XL. The data name for the “select” form element are set to “pair1_size”, “pair2_size” and “pair3_size”.
<script>
let DefaultProduct = 1;
function modifyVariants(variant) {
var variant1_size = document.querySelector('select[data-name="pair1_size"]');
var variant2_size = document.querySelector('select[data-name="pair2_size"]');
var variant3_size = document.querySelector('select[data-name="pair3_size"]');
if (variant == 1) {
variant1_size.parentNode.parentNode.style.display = 'block';
variant2_size.parentNode.parentNode.style.display = 'none';
variant3_size.parentNode.parentNode.style.display = 'none';
} else if (variant == 2) {
variant1_size.parentNode.parentNode.style.display = 'block';
variant2_size.parentNode.parentNode.style.display = 'block';
variant3_size.parentNode.parentNode.style.display = 'none';
}
else {
variant1_size.parentNode.parentNode.style.display = 'block';
variant2_size.parentNode.parentNode.style.display = 'block';
variant3_size.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>Hello Guys, it works for me but I don’t know how to connect the varation from the code with shopify variation? anyone has an idea ? Thanks
@fathx @Bartosz when trying to connect it to shopify variants. I can’t see my variants of funnelish custom code. Do you have any idea or tutorial to make it works ?
How to connect the variants from the code with shopify variants? anyone has an idea ?
Thanks
Quick update for anyone finding this post and want to know how to set up dynamic variants based on the bundle chosen, check out this post: Dynamic Variant Dropdowns: A Quick Setup Guide
If you’re using dynamic variants instead of the standard product variants, they can’t be directly matched to your Shopify variants. To ensure the correct variant appears in Shopify orders, you’ll need to manually update each product automation to enable dynamic variants so the selected option is passed through and synced correctly, as shown in the example below.
Helpful Resources
If you want to read more about this, please check the articles below:
