How to Bind Custom Product List Variations

[anwerashif]

One of my favorite features in Funnelish is Data Bindings. It makes it really easy to build custom product layouts while still using the native Product List functionality.

However, I ran into one limitation while building a custom design.

I wanted to use my own Size dropdown inside a product card. The product itself could be bound using Data Bindings, but there wasn’t a way to bind the custom variation selector to the Product List’s native variation selector.

The solution was to let the custom dropdown trigger the corresponding native variation option behind the scenes.

Here’s the setup I used.

Script

<script>
document.addEventListener("DOMContentLoaded", () => {
    // Optional: Uncheck the first product by default
    const checkbox = document.querySelector('input.pl-checkbox[value="4232899"]');

    if (checkbox) {
        checkbox.checked = false;
        checkbox.dispatchEvent(new Event("change", { bubbles: true }));
    }

    // Map custom dropdowns to Product IDs
    const productMap = {
        p1_size: "4232899",
        p2_size: "4232900",
        p3_size: "4232901"
    };

    document.querySelectorAll('select[data-name]').forEach(select => {
        select.addEventListener("change", function () {
            const pid = productMap[this.dataset.name];
            if (!pid) return;

            const radio = document.querySelector(
                `.pl-item[data-pid="${pid}"] .pl-variant-options input[data-variant="Size"][value="${this.value}"]`
            );

            // Trigger the native variation selection
            radio?.click();
        });
    });
});
</script>

How it works

• productMap connects each custom dropdown to its corresponding Product List item.
• When a visitor selects a size from the custom dropdown, the script finds the matching native variation radio button.
• It then triggers a .click() on that option, so Funnelish handles the variation exactly as if the customer selected it from the native Product List.

Pros

• Keeps your custom design while using the native Product List.

• No need to recreate Funnelish’s variation logic.

• Works with multiple products on the same page.

• The native Product List stays in sync with your custom UI.

Cons

• Product IDs are hardcoded, so you’ll need to update them if you replace or recreate products.

• You’ll need to update the productMap whenever you add or remove products.

• The example is written for the Size variation. If your products use other variation names (such as Color or Material), you’ll need to adjust the selector accordingly.

Final thoughts

This approach has worked well for my use case and lets me build a much more flexible product layout without losing the native Product List functionality.

If Funnelish eventually allows binding custom variation selectors directly through Data Bindings, this workaround won’t be necessary. Until then, this has been a reliable solution for me.

I hope it helps! If you’ve found another way to solve this, I’d love to see your approach.