If you're building a Framer site with members-only content, premium downloads, or exclusive pages, you might want to show a "locked" version of an element until certain conditions are met—like a user being logged in or owning a specific product. In this quick guide, we’ll show you how to conditionally display a locked variant using Framer's built-in tools and logic, so you can create a seamless user experience while protecting your content.

1. Add toggle field in CMS

2. Name it 'locked'

3. Turn CMS item into a component and name it as you'd like

4. Duplicate so you have two variants

5. Name the first variant 'Unlocked' and the second one 'Locked'. Stylize the locked one however you'd like.

6. Name the link on the first variant to 'unlocked'

7. Create a new link variable for the locked variant and rename it to 'locked'

8. Add a convert option to the variant for when 'locked.' If you are not using the CMS, simply set to 'locked' as the default.

9. Set the convert so when locked is 'yes' it sets the locked variant, when 'no' set the unlocked variant

10. Set the redirects.

For the locked variant, set where it should redirect — the upgrade or sign up page for example. For the unlocked version, set to direct to the content.

11. Set the appropriate override.

Apply one of these overrides to the component depending on your intended setup:

• withVariant to show the unlocked version to any member that is logged in.

• withVariantActiveLicense to display the unlocked version to any logged in member that has an active license to your Lemon Squeezy product.

You can also display a locked variant until the member purchases a specific product variant — read more.

Thanks for following along!

Locked variants aren’t just about hiding content—they help you create personalized experiences, encourage conversions, and maintain control over who sees what on your site.

If you have any questions or need assistance, please find us on the Support page.