In this tutorial, I'll demonstrate how to dynamically display selected content to users on your Framer website who have purchased select product variants through Lemon Squeezy. This will allow you to display certain content only to users who have purchased the variant you specify.

1. Add the code snippet to the bottom of your FramerAuth override file

export function withPlanStandard(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()
        // Enter your LemonSqueezy Product Variant Id
        const licenseVariantId = "152795" // Standard
        if (
            !store.user ||
            !store.user.licenses.some(
                (l) => l.variant_id === licenseVariantId
            )
        )
            return null
        return <Component {...props} />
    }
}

2. Retrieve your Lemon Squeezy product ID

1. Go to Products in your Lemon Squeezy dashboard

2. Select the product that is connected to your FramerAuth account

3. Click on the variant you wish to use

   

4. Copy the string of numbers at the end of the URL - this is your variant ID

   

3. Add product details to override file

1. Rename the override to help identify which plan it correlates to

   

2. Paste variant ID from step 2 where it says Enter your Lemon Squeezy Product Variant Id

   

4. Repeat steps for all plans

For all of your product's plans repeat these steps.

5. Apply overrides to desired content in Framer

Once you've created the different overrides for your various plans in Lemon Squeezy, you can then apply the overrides to the frames / content that you would like to be displayed only to users who have purchased that tier.