Hi Funnelish Community 
If you’re selling products with multiple variants (Color, Size, etc.), you’ve probably noticed that the Order Summary only shows the bundle name.
For example:
1 Pillow + 1 Cooling Pillowcase
But the customer doesn’t see which Color or Size they selected.
A better experience is showing something like this:
1 Pillow + 1 Cooling Pillowcase
White / Regular
Or for a 2-pillow bundle:
2 Pillow Bundle
White / Regular
Gray / High
Or for a Family Bundle:
Family Bundle
White / Regular
Gray / High
Pink / Regular
Baby Blue / High
It is a small improvement, but it makes the checkout feel much more professional and helps customers confirm their selections before placing the order.
Why is this useful?
Imagine ordering four pillows with different colors.
Without seeing the selected variants in the Order Summary, customers may wonder:
“Did I select the correct size?”
or
“Did I accidentally choose the wrong color?”
Showing the selected variants removes that doubt.
This is a simple UX improvement that can help increase customer confidence during checkout.
What you’ll need
This example assumes your bundle uses custom dropdowns like this:
Bundle 1
-
Color1
-
Size1
Bundle 2
-
Color1
-
Size1
-
Color2
-
Size2
Bundle 3 (Family Bundle)
-
Color1
-
Size1
-
Color2
-
Size2
-
Color3
-
Size3
-
Color4
-
Size4
Important: Make sure each dropdown has a unique Data Name.
Example:
Color1
Size1
Color2
Size2
Color3
Size3
Color4
Size4
Step 1 — Open Custom Codes
Go to
**Page Builder → Custom Codes **
Paste the following code inside Body HTML.
document.addEventListener("DOMContentLoaded", function () {
function updateOrderSummary() {
const selectedBundle = document
.querySelector('input[name="product-id"]:checked')
?.closest(".product-list");
if (!selectedBundle) return;
const variants = [];
for (let i = 1; i <= 4; i++) {
const color = selectedBundle.querySelector(`select[data-name="Color${i}"]`);
const size = selectedBundle.querySelector(`select[data-name="Size${i}"]`);
if (!color || !size) continue;
if (!color.value || !size.value) continue;
variants.push(`${color.value} / ${size.value}`);
}
const osName = document.querySelector(".os-items .os-name");
if (!osName) return;
let variantBox = osName.querySelector(".bundle-variants");
if (!variantBox) {
variantBox = document.createElement("div");
variantBox.className = "bundle-variants";
osName.appendChild(variantBox);
}
variantBox.innerHTML = variants
.map(variant => `<div>${variant}</div>`)
.join("");
}
document.addEventListener("change", function (event) {
if (
event.target.matches('select[data-name^="Color"]') ||
event.target.matches('select[data-name^="Size"]') ||
event.target.matches('input[name="product-id"]')
) {
setTimeout(updateOrderSummary, 50);
}
});
setTimeout(updateOrderSummary, 300);
});
Step 2 — Add a little styling
Paste this into Custom CSS.
.bundle-variants{
margin-top:6px;
font-size:13px;
line-height:1.4;
color:#666;
}
.bundle-variants div{
margin-top:2px;
}
You can change the font size, spacing, or color to match your checkout design.
Step 3 — Test your checkout
Now test each bundle.
Bundle 1
Select
-
White
-
Regular
The Order Summary should display:
White / Regular
Bundle 2
Select different variants for each pillow.
Example:
White / Regular
Gray / High
Both should appear below the product title.
Family Bundle
Try selecting different colors and sizes for all four pillows.
Example:
White / Regular
Gray / High
Pink / Regular
Baby Blue / High
The list updates automatically whenever a customer changes a dropdown.
How it works
The script automatically:
-
Detects the selected bundle.
-
Finds the active Color and Size dropdowns.
-
Matches each Color with its Size.
-
Adds the selected variants below the product name.
-
Updates instantly whenever the customer changes a variant or switches bundles.
No manual updates are required.
Things to check if it doesn’t work
1. Verify the Data Names
Make sure your dropdown names are exactly:
Color1
Size1
Color2
Size2
Color3
Size3
Color4
Size4
Even a small typo will prevent the script from finding the correct dropdown.
2. Check that your bundle uses Product Radio buttons
This example detects the selected bundle using the checked Product ID radio button.
3. Place the code in Footer JavaScript
Don’t paste it inside an HTML element.
Use:
Settings → Custom Codes → Footer JavaScript
Final Thoughts
This is a small customization, but it noticeably improves the checkout experience.
Customers can immediately verify what they’re buying without scrolling back up or second-guessing their selections.
If you’re using product bundles with multiple variants, I think this is a nice improvement to add to your Funnelish checkout.
Hope it helps! 