Overview

As of May 2025, query parameters in Framer can only be used for tracking purposes—they can’t directly change what’s shown on the page. But sometimes you might want to change a component’s variant based on the query string—for example, to filter resources, switch pricing plans, and so on. In these cases, the only current solution is to use a code override.

In this short article, I’ll share a ready-to-use code override that does exactly that. I’ll also explain how it works, how to adapt it to your project, and provide a sample project you can explore and remix.

Let’s dive in!

Code override & sample project

Here’s the code override you can copy and paste into your project:

import { ComponentType, forwardRef, useEffect, useState } from "react"

export function changeVariant(Component): ComponentType {
    return forwardRef((props, ref) => {
        const [variant, setVariant] = useState("desktop-annual")

        useEffect(() => {
            const params = new URLSearchParams(window.location.search)
            const urlType = params.get("type")

            //recognised values for type
            const allowedVariants = [
                "desktop-annual",
                "desktop-monthly",
                "mobile-annual",
                "mobile-monthly",
            ]

            if (allowedVariants.includes(urlType)) {
                setVariant(urlType)
            } else {
                const isMobile = window.innerWidth < 810
                setVariant(isMobile ? "mobile-annual" : "desktop-annual")
            }
        }, [])

        return <Component ref={ref} {...props} variant={variant} />
    })
}

And here’s a live project you can use as a reference:

Live Example [try changing the last part of the URL from "annual" to "monthly"] | Remix link

How it works

Don’t skip this part—understanding how the override works is key to making it fit your needs.

The override looks at the page URL, searches for a parameter called type (you can change this to variant or anything else), and uses that value to change the variant of the component it’s applied to.

In the sample project—which you can remix [here]—I’ve applied this override to a pricing card component to switch between "annual" and "monthly" plans for both desktop and mobile.

To use it, just send visitors to your page with ?type={variant-name} added to the URL, replacing {variant-name} with the actual name of your variant. For example:

https://change-variant-with-url.framer.website/?type=desktop-annual 
https://change-variant-with-url.framer.website/?type=desktop-monthly
https://change-variant-with-url.framer.website/?type=mobile-annual 
https://change-variant-with-url.framer.website/?type=mobile-monthly 

The override reads the value after ?type= and switches the component to that variant.

How to edit the code

Now that you have a general understanding of how the override works, let's see how you can edit it.

Editing the variants name

Your component will likely have different variants compared to mine. After setting them up, list their names in the allowedVariants array in the middle of the code.

You’ll also want to update two other places:

• Line 5: Change the value inside useState() to the default variant you want to show.
  
  

• Line 23: Update the mobile and desktop default variant names.

Handling breakpoints

If your design shows different variants on mobile and desktop, you’ll need breakpoint logic in the override. I’ve included a simple check on line 23 that sets the variant based on the screen width.

By default, it checks if the screen is smaller than 810px, which is the mobile breakpoint I used. Feel free to adjust this to match your own breakpoints.

Changing parameter name

As mentioned earlier, the sample code looks for a query parameter called type, but you can change this to anything you like. Just update the value at line 9 with your preferred parameter name.

Limitations

While this override is simple and easy to use, it does have a couple of limitations:

1. Slight load delay
   
   Since the URL parameter is read using JavaScript, there might be a slight delay before the correct variant is applied. This means that if the component is visible above the fold, you might briefly see the default variant before it switches to the one specified in the URL.
   
   

2. Absolute links required
   
   Framer doesn’t currently support adding query parameters to relative links. So when linking to a page using this override, you’ll need to use the full URL (absolute link), like https://yourwebsite.com/page?type=variant, instead of /page?type=variant.