Ever feel limited by how many variants you can set up in Shopify? That’s where dynamic variants come in.
Instead of creating every possible combination (like size + color + style), dynamic variants let you collect those choices directly in your funnel
They’re especially useful when you only have one type of option, but need to offer more than three choices.
For example, if you’re selling bundles with more than 3 units of candles with different scents, with dynamic variants, you can do so without running into those limits.
They’re also great for products like custom t-shirts or shoes, where customers choose size and color (and even add their own text).
In all of these cases, dynamic variants make it easier to offer more flexibility to your customers, without overcomplicating your setup.
Also they’re super helpful for cases when you’re offering up to a bundle of 3 but have tons of colors for the customers to choose from, making it more aesthetic.
In this post we’ll show you how to create them in your funnel and how to display them accordingly based on the bundle chosen.
How can I create my dynamic variants?
1. Add 1 SELECT form element below your product list element for each variant group.
If you have for example a bundle of candles:
- 1x Scented Candle
- 2x Scented Candle
- 3x Scented Candle
- 4x Scented Candle
Add 4 SELECT form elements below the product list.
2. Now set up each variant group box.
To see how to do this, click on this video here: Intro Dynamic Variants - How to create them | Loom
You can also check out this doc: Set Up Dynamic Variants | Funnelish Docs
- Once you’ve done this you will have your variant groups set up.
How can I make it show the right amount of options based on the bundle chosen?
1. Copy the code below and paste it in CUSTOM CODES > BODY HTML
2. Edit the code with the “Data Name” that you wrote for each group.
See this loom with the step by step: How to use the custom code for dynamic variants | Loom
<script>
let DefaultProduct = 1;
function modifyVariants(variant) {
// =========================
// 🔹 VARIABLES SECTION
// =========================
var variant1 = document.querySelector('select[data-name="REPLACE_WITH_YOUR_DATA_NAME_1"]');
var variant2 = document.querySelector('select[data-name="REPLACE_WITH_YOUR_DATA_NAME_2"]');
var variant3 = document.querySelector('select[data-name="REPLACE_WITH_YOUR_DATA_NAME_3"]');
var variant4 = document.querySelector('select[data-name="REPLACE_WITH_YOUR_DATA_NAME_4"]');
// 👉 ➕ ADD MORE PRODUCTS HERE
// COPY THIS LINE ↓
// var variant4 = document.querySelector('select[data-name="pair4_color"]');
// CHANGE 4 → 5 → 6 → etc
// PASTE BELOW
// =========================
// 🔹 LOGIC SECTION
// =========================
if (variant == 1) {
variant1.parentNode.parentNode.style.display = 'block';
variant2.parentNode.parentNode.style.display = 'none';
variant3.parentNode.parentNode.style.display = 'none';
variant4.parentNode.parentNode.style.display = 'none';
// 👉 ➕ ADD NEW PRODUCT HERE
// variant5.parentNode.parentNode.style.display = 'none';
} else if (variant == 2) {
variant1.parentNode.parentNode.style.display = 'block';
variant2.parentNode.parentNode.style.display = 'block';
variant3.parentNode.parentNode.style.display = 'none';
variant4.parentNode.parentNode.style.display = 'none';
// 👉 ➕ ADD NEW PRODUCT HERE
// variant5.parentNode.parentNode.style.display = 'none';
} else if (variant == 3) {
variant1.parentNode.parentNode.style.display = 'block';
variant2.parentNode.parentNode.style.display = 'block';
variant3.parentNode.parentNode.style.display = 'block';
variant4.parentNode.parentNode.style.display = 'none';
// 👉 ➕ ADD NEW PRODUCT HERE
// variant5.parentNode.parentNode.style.display = 'none';
}
// 👉 ➕ COPY THIS BLOCK TO ADD NEW STEP
else if (variant == 4) {
variant1.parentNode.parentNode.style.display = 'block';
variant2.parentNode.parentNode.style.display = 'block';
variant3.parentNode.parentNode.style.display = 'block';
variant4.parentNode.parentNode.style.display = 'block';
// 👉 ➕ ADD NEW PRODUCT HERE
// variant5.parentNode.parentNode.style.display = 'none';
}
else {
variant1.parentNode.parentNode.style.display = 'block';
variant2.parentNode.parentNode.style.display = 'block';
variant3.parentNode.parentNode.style.display = 'block';
variant4.parentNode.parentNode.style.display = 'block';
// 👉 ➕ FINAL STEP (SHOW IT HERE)
// variant5.parentNode.parentNode.style.display = 'block';
}
}
modifyVariants(DefaultProduct);
document.querySelectorAll('.pl-radio').forEach((r, i) => {
r.addEventListener("change", () => {
modifyVariants(i + 1);
});
});
</script>
This code can be adjusted removing/adding as many variants as you want as long as it’s 1 variant option per unit (so only color, only size, only scent etc).
Want to download the sharelink with the template from the video and custom code already added? Click here: Funnelish
__________
Code Template if I’m selling bundle products with 2 variant options per product
For cases like selling shoes and want customers to choose size and color for each pair, you can use this code instead and adjust it accordingly with your data name:
<script>
let DefaultProduct = 1;
function modifyVariants(variant) {
// =========================
// 🔹 VARIABLES SECTION
// =========================
var variant1_color = document.querySelector('select[data-name="REPLACE_WITH_YOUR_DATA_NAME_OPTION_A_PRODUCT_1"]');
var variant1_size = document.querySelector('select[data-name="REPLACE_WITH_YOUR_DATA_NAME_OPTION_B_PRODUCT_1"]');
var variant2_color = document.querySelector('select[data-name="REPLACE_WITH_YOUR_DATA_NAME_OPTION_A_PRODUCT_2"]');
var variant2_size = document.querySelector('select[data-name="REPLACE_WITH_YOUR_DATA_NAME_OPTION_B_PRODUCT_2"]');
var variant3_color = document.querySelector('select[data-name="REPLACE_WITH_YOUR_DATA_NAME_OPTION_A_PRODUCT_3"]');
var variant3_size = document.querySelector('select[data-name="REPLACE_WITH_YOUR_DATA_NAME_OPTION_B_PRODUCT_1"]');
// 👉 ➕ ADD MORE PRODUCTS HERE
// COPY THESE 2 LINES ↓
// var variant3_color = document.querySelector('select[data-name="pair3_color3"]');
// var variant3_size = document.querySelector('select[data-name="pair3_size3"]');
// CHANGE 3 → 4 → 5 → etc
// PASTE BELOW
// =========================
// 🔹 LOGIC SECTION
// =========================
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';
// 👉 ➕ ADD NEW PRODUCT HERE (2 lines)
// variant4_color.parentNode.parentNode.style.display = 'none';
// variant4_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';
// 👉 ➕ ADD NEW PRODUCT HERE (2 lines)
// variant4_color.parentNode.parentNode.style.display = 'none';
// variant4_size.parentNode.parentNode.style.display = 'none';
}
// 👉 ➕ COPY THIS BLOCK TO ADD NEW STEP
else if (variant == 3) {
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';
// 👉 ➕ ADD NEW PRODUCT HERE (2 lines)
// variant4_color.parentNode.parentNode.style.display = 'none';
// variant4_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';
// 👉 ➕ FINAL STEP (SHOW BOTH HERE)
// variant4_color.parentNode.parentNode.style.display = 'block';
// variant4_size.parentNode.parentNode.style.display = 'block';
}
}
modifyVariants(DefaultProduct);
document.querySelectorAll('.pl-radio').forEach((r, i) => {
r.addEventListener("change", () => {
modifyVariants(i + 1);
});
});
</script>
Pre- Built Codes
For pre-made codes, check the scenarios below.
_____
A few things to keep in mind:
- Each variant group in your chekcout needs to have the exact same data name as added in the code for it to work properly.
- You must have your custom domain assigned in order for the code to load
- The code has to be added in Custom Codes > Body HTML
SCENARIO 4 bundles - 2 variants: size and color variants update based on the selected quantity (1–4 items). The bundle of 2 is pre-selected in the product list.
<script>
let DefaultProduct = 2;
function modifyVariants(variant) {
var variant1_color = document.querySelector('select[data-name="pair1_color1"]');
var variant1_size = document.querySelector('select[data-name="pair1_size1"]');
var variant2_color = document.querySelector('select[data-name="pair2_color2"]');
var variant2_size = document.querySelector('select[data-name="pair2_size2"]');
var variant3_color = document.querySelector('select[data-name="pair3_color3"]');
var variant3_size = document.querySelector('select[data-name="pair3_size3"]');
var variant4_color = document.querySelector('select[data-name="pair4_color4"]');
var variant4_size = document.querySelector('select[data-name="pair4_size4"]');
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';
variant4_color.parentNode.parentNode.style.display = 'none';
variant4_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';
variant4_color.parentNode.parentNode.style.display = 'none';
variant4_size.parentNode.parentNode.style.display = 'none';
} else if (variant == 3) {
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';
variant4_color.parentNode.parentNode.style.display = 'none';
variant4_size.parentNode.parentNode.style.display = 'none';
} else if (variant == 4) {
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';
variant4_color.parentNode.parentNode.style.display = 'block';
variant4_size.parentNode.parentNode.style.display = 'block';
}
}
//init
modifyVariants(DefaultProduct);
// Event handler
document.querySelectorAll('.pl-radio').forEach((r, i) => {
console.log(r); // Log the radio element
r.addEventListener("change", () => {
modifyVariants(i + 1);
});
});
</script>
SCENARIO 2 Bundles 2 variants: size and color variants update based on the selected quantity (1–2 items). The 1x product is pre-selected in the product list.
<script>
let DefaultProduct = 1;
function modifyVariants(variant) {
var variant1_color = document.querySelector('select[data-name="pair1_color1"]');
var variant1_size = document.querySelector('select[data-name="pair1_size1"]');
var variant2_color = document.querySelector('select[data-name="pair2_color2"]');
var variant2_size = document.querySelector('select[data-name="pair2_size2"]');
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';
} 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';
} else if (variant == 3) {
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';
}
}
//init
modifyVariants(DefaultProduct);
// Event handler
document.querySelectorAll('.pl-radio').forEach((r, i) => {
r.addEventListener("change", () => {
modifyVariants(i+1);
});
});
</script>
SCENARIO 3 bundles - 2 variants: size and color variants update based on the selected quantity (1–3 items). The 1x product is pre-selected in the product list.
<script>
let DefaultProduct = 1;
function modifyVariants(variant) {
var variant1_color = document.querySelector('select[data-name="pair1_color1"]');
var variant1_size = document.querySelector('select[data-name="pair1_size1"]');
var variant2_color = document.querySelector('select[data-name="pair2_color2"]');
var variant2_size = document.querySelector('select[data-name="pair2_size2"]');
var variant3_color = document.querySelector('select[data-name="pair3_size3"]');
var variant3_size = document.querySelector('select[data-name="pair3_size3"]');
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 if (variant == 3) {
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) => {
r.addEventListener("change", () => {
modifyVariants(i+1);
});
});
</script>
Hope it helps! 
Belén@Funnelish