Show a locked variant to users without a specific tag
Tags allow you to seamlessly create access control to the content on your Framer website. Let's learn how to enable only users who have certain tags to access our on-page content.
Lock content before purchase
TUTORIAL
By utilizing the tag interface component with any of the tag overrides, we can easily set content in our design to be locked to visitors without the specified tags.
1
Turn your CMS item into a component
2
Create a 'locked' variant and stylize it however you'd like
3
Paste the Tag Interface component into your first variant
Set position to absolute. This component is invisible.
4
Create variables for 'Tags' and 'Required'
5
Create a link variable for your first variant called 'Unlocked'
6
Create a link variable for your locked variant called 'Locked'
7
Add the override 'ToggleVariantIfWithTag' to the instance in the CMS list
8
In the CMS, add a plain text field named 'Tags'
This is where you will specify which tags the user must have to access this locked CMS item.
9
In the CMS, add a toggle field named 'Locked'
10
Set the CMS item component to 'convert' the variant on the locked field
11
Set the variant to convert to the 'locked' variant when the toggle is set to 'yes'
To use this functionality without connecting to a CMS field, simply set the variant to be the locked variant by default.
12
For each CMS entry, specify which tags can access this content
Specify the tags with a comma separating them. By default, if the user has any of the tags they will see the unlocked variant. If you'd like for the user to have all specified tags, then update the 'Require' field from step 4 to all.
Finished!
You can now conditionally display content to only users who have specific tags. For any user who does not have the specified tag, they will see your locked variant.