🎯 Auto-Select Product Using URL Parameter (Super Simple Guide)

Technical
, ,
1

Imagine you send someone a link like this:

https://yourwebsite.com/?product-id=3789810

:backhand_index_pointing_right: When they open the page, the correct product is automatically selected.

No clicking needed. Magic! :sparkles:

2026-03-27_06-40-04

:rocket: Why is this useful?

Here are some real-life use cases:

:white_check_mark: 1. Marketing Campaigns

You can send different links for different products:

  • Product A → ?product-id=111

  • Product B → ?product-id=222

:backhand_index_pointing_right: Each link opens with the correct product selected.

:white_check_mark: 2. Upsells / Funnels

If a user clicks “Buy Now” from another page:

:backhand_index_pointing_right: You can send them directly to the checkout with the product already selected.

:white_check_mark: 3. A/B Testing

Test different products easily by changing the URL.

:white_check_mark: 4. Customer Support

Instead of telling users “select this product…”

:backhand_index_pointing_right: Just send them a link and it’s already selected.

:gear: How does it work?

We read the product ID from the URL
Then we find the matching radio button
Then we select it automatically :white_check_mark:

:puzzle_piece: Copy-Paste Code

Just add this script to your page (Footer is perfect :backhand_index_pointing_down:)

window.addEventListener("load", function () {
  const params = new URLSearchParams(window.location.search);
  const productId = params.get("product-id");

  if (!productId) return;

  const interval = setInterval(() => {
    const radio = document.querySelector(
      `input[type="radio"][name="product-id_mainproduct"][value="${productId}"]`
    );

    if (radio) {
      radio.checked = true;

      // Tell the system something changed
      radio.dispatchEvent(new Event("change", { bubbles: true }));

      clearInterval(interval);
    }
  }, 300);
});

:test_tube: Example (Easy to Understand)

Your HTML:

<input type="radio" name="product-id_mainproduct" value="111"> Product A
<input type="radio" name="product-id_mainproduct" value="222"> Product B
<input type="radio" name="product-id_mainproduct" value="333"> Product C

Your URL:

https://yourwebsite.com/?product-id=222

:backhand_index_pointing_right: Result:
:white_check_mark: Product B will be selected automatically

:beverage_box: Simple Explanation

Think of your website like a vending machine :cup_with_straw:

  • Each product has a number (like 111, 222, 333)

  • The URL is like pressing a button before you even arrive

So when you visit:

?product-id=222

:backhand_index_pointing_right: It’s like telling the machine:
“Hey! I want number 222!”

And it selects it for you :tada:

:warning: Important Notes

  • Make sure your radio input has:

    • type="radio"

    • correct name

    • correct value

  • Example:

<input type="radio" name="product-id_mainproduct" value="3789810">

:light_bulb: Pro Tips

  • You can combine this with:

    • WhatsApp links

    • Email campaigns

    • Ads (Facebook, Google)

  • Works great with Funnelish dynamic checkouts

:tada: That’s it!

Now your links are smarter, faster, and better :rocket: