Advanced

How to Auto-Select a Product Using a URL Parameter in Funnelish

Q: How do I auto-select a product variant using a URL parameter in Funnelish?

Add a Custom Code element to your product page with a JavaScript snippet that reads the URL parameter using URLSearchParams, finds the variant in the product selector, and programmatically triggers its selection. Then set variant-specific URLs in your ad destination fields.

Q: Why should I use URL parameters to pre-select variants from ads?

Pre-selecting variants eliminates a manual selection step, creates a personalized experience matching the ad creative, and typically improves conversion rate.

Q: What URL parameter format should I use for variant auto-selection?

Use a clean readable format like ?variant=chocolate or ?size=large. Keep values lowercase and use hyphens for multi-word values. Avoid special characters that might get URL-encoded in ad platforms.

Q: How do I set different destination URLs for each variant in Facebook Ads?

Create separate ad sets for each variant in Facebook Ads Manager. In each ad's Website URL field, set the variant-specific URL so each ad sends traffic to the page with the correct variant pre-selected.

Q: Do UTM parameters still work when I add variant parameters to URLs?

Yes. You can combine variant and UTM parameters in the same URL. The JavaScript reads just the variant parameter while analytics tools read UTM parameters independently. Both work simultaneously without conflict.

Q: What happens if the URL parameter doesn't match any available variant?

If no matching variant is found, the script should fall back to the default product state. Add error handling in your script to identify and fix mismatches during testing before going live.

Umor Faruk

May 14, 2026

3 min read

How to Auto-Select a Product Using a URL Parameter in Funnelish

Why Auto-Selecting Products From URL Parameters Is Powerful

Imagine running separate Facebook ad sets for each flavor of your supplement — Chocolate, Vanilla, and Strawberry. Instead of sending all traffic to the same product page where customers have to manually select their flavor, you could send each ad's traffic to a URL that automatically pre-selects the correct flavor. The customer lands on the page with their variant already chosen — reducing friction and increasing conversion rate.

How URL Parameters Work

A URL parameter is a key-value pair added to the end of a URL after a question mark. When your page loads, JavaScript can read this parameter and use it to automatically select the correct variant.

Setting Up Auto-Select With Custom JavaScript in Funnelish

Step 1: Add a Custom Code Block

In the Funnelish page editor, add a Custom Code element to your product page. This is where you'll add the JavaScript that reads the URL parameter and selects the correct variant.

Step 2: Write the Auto-Select Script

Add a JavaScript snippet that reads the URL parameter on page load using URLSearchParams, finds the corresponding variant option in the product selector using document.querySelector, and programmatically triggers the selection of that variant.

Step 3: Set Up Your Ad URLs

In your ad platform, set different destination URLs for different variant-specific ad sets. For example: Chocolate ad to yourfunnel.com/product?variant=chocolate, Vanilla ad to yourfunnel.com/product?variant=vanilla, Strawberry ad to yourfunnel.com/product?variant=strawberry.

Step 4: Test Each Variant URL

Visit each URL manually and verify that the correct variant is pre-selected on page load. Also do a test purchase for each variant to confirm the right product syncs to Shopify.

Use Cases for Auto-Select URL Parameters

Flavor-specific supplement ads — Each ad creative features a specific flavor; landing page pre-selects it
Size-specific apparel ads — Show size-specific creative, pre-select the size on landing
Pack size ads — Run separate ads for 1-pack, 3-pack, and 5-pack, each pre-selecting the right bundle
Color variant ads — Showcase a specific color in your ad creative and pre-select it on landing

Build Advanced Funnels With the Right Foundation

Advanced techniques like URL parameter auto-selection work best when your funnel is already well-designed and converting. Browse our Funnelish funnel templates for a professional product page foundation you can enhance with custom code.

Frequently Asked Questions

How do I auto-select a product variant using a URL parameter in Funnelish?

Add a Custom Code element to your Funnelish product page and insert a JavaScript snippet that reads the URL parameter on page load using URLSearchParams, finds the corresponding variant option in the product selector using document.querySelector, and programmatically triggers the selection of that variant. Then set variant-specific URLs in your ad destination fields.

Why should I use URL parameters to pre-select variants from ads?

Pre-selecting variants from ad URLs reduces customer friction by eliminating a manual selection step, creates a personalized landing experience that matches the ad creative, and typically improves conversion rate. A chocolate supplement ad sending traffic to a page with chocolate already selected converts better than a page where the customer has to find and choose their flavor.

What URL parameter format should I use for variant auto-selection?

Use a clean, readable format like ?variant=chocolate or ?size=large or ?pack=3. The parameter name should match what your JavaScript looks for on page load. Keep values lowercase and use hyphens instead of spaces for multi-word values (e.g. ?variant=mint-chocolate). Avoid special characters that might get URL-encoded in ad platforms.

How do I set different destination URLs for each variant in Facebook Ads?

In Facebook Ads Manager, create separate ad sets for each variant. In each ad's creative settings, set the Website URL to the variant-specific URL (e.g. yourfunnel.com/product?variant=chocolate). Each ad set will send traffic to the pre-selected variant page for its specific creative, matching the product shown in the ad to what the customer sees on landing.

Do UTM parameters still work when I add variant parameters to URLs?

Yes — you can combine variant parameters and UTM parameters in the same URL. For example: yourfunnel.com/product?variant=chocolate&utm_source=facebook&utm_campaign=choc_summer. The JavaScript reads just the variant parameter, while your analytics tools read the UTM parameters independently. Both work simultaneously without conflict.

What happens if the URL parameter doesn't match any available variant?

If your JavaScript doesn't find a matching variant for the URL parameter value, it should gracefully fall back to the default product state — typically showing the first available variant or no selection. Add error handling in your script so you can identify and fix mismatches during testing before going live.