Accounts

Conditional Visibility

Accounts / Conditional Visibility

Show/hide elements only for logged-in users.

You can show/hide elements only for logged-in users.

Warning

Is just a CSS solution, do not use it to “hide” sensitive data.

User is logged in

To show up an element only to logged in users, you just have to use the following custom attribute:

Name
customer-condition
Value
logged-in

User is not logged in

To show up an element only to users that are not logged in, you just have to use the following custom attribute:

Name
customer-condition
Value
not-logged-in

User is subscribed to mailing list

To show up an element only to subscribed users, you just have to use the following custom attribute:

Name
customer-condition
Value
email-subscribed

User is not subscribed to mailing list

To show up an element only to not subscribed users, you just have to use the following

Name
customer-condition
Value
email-not-subscribed

Customer is tagged by

Apply the following custom attribute on the element that you want to appear only and exclusively when the Logged in Customer Has a specific Tag/Tags

Name
customer-tagged
Value
Tag

In the case you wish to check different tags, just divide them by comma

Name
customer-tagged
Value
Tag 1,Tag 2

By default the match is done by checking ALL the tags you indicated inside the attribute. You can modify this behaviour by adding the optional attribute

Name
any
Value
true

Customer is not tagged by

Apply the following custom attribute on the element that you want to appear only and exclusively when the Logged in Customer Doesn't have a specific Tag/Tags

Name
customer-not-tagged
Value
Tag

In the case you wish to check different tags, just divide them by comma

Name
customer-not-tagged
Value
Tag 1,Tag 2

By default the match is done by checking ALL the tags you indicated inside the attribute. You can modify this behaviour by adding the optional attribute

Name
any
Value
true

Redirect User

You can use custom javascript in order to redirect or prevent access to specific pages of your Webflow site. Smootify dispatches several JS events that allows a very cool dev extensibility.

For example, to prevent a page to be accessed from not logged in users you have just to copy and paste this script in the Webflow custom code Head section of that page.

Consider that pages inside the Account folder by default are already accessible only from logged in users.

<script>
document.addEventListener('smootify:user_auth_change', e => {
    const user = e.detail;
    if (!user) {
        // Redirect
         window.location = "/"; // Change "/" according to your own needs
    }
});
</script>

Previous

Components & Attributes

Next

Metafields

On this page