Use conditional visibility to show or hide elements in a dynamic design and create unique designs for Collection items based on different criteria.
Despite the nine-syllable mouthful, conditional visibility is really straightforward, and it's a great way to show or hide entire elements (and their children), based upon an item’s content inside a collection.
Now, we all know that wasn't nine syllables. It was 47. We meant conditional visibility.
Here's a collection page. And here's a section element with content inside. And we love this section. But we only want this section to show up on certain pages.
Let's go on over and create a condition. The element (and its children) is only visible when...
And from the dropdown, we can make the selection.
We're only showing this section when the Work Category is Portraits. We don't want this section showing up to advertise portrait photography if the page is about shooting Landscape Architecture, Residential Interiors, Commercial Exteriors, or Dr. Who Cosplay. But we do want it showing up if someone's reading about portraits.
So by doing this — by setting up this condition — we've made it so the section only appears on pages that have the Portraits category set. We can see that the section won't show up if the category isn't set to Portraits. When we hit another page that has its category set to Portraits? The section displays perfectly.
This doesn't just apply to pages. Here in this collection list containing team members, we want to add an email link. That's fine. Let's go over and drag in a text link.
Let's double click to rename this "Email Me" so we can link this to each team member's email.
Of course, we can get our URL from the Email field in our collection. But we actually have a problem: some team members don't have emails listed.
Wouldn't it be great if we could only show this element on team members who have emails set?
We'll keep this text link selected and go over to do just that. Add a condition, stating that the element is visible when...an email...is set. We only want to show this element if we set an email on that team member.
And just like that, all the work was done for us. We didn't have to go manually hunting through every last team member.
Now Joan's the team leader here and she doesn't want people emailing her directly because she's putting out fires all day and email is a distraction. And Dan still uses AOL so we're not even listing that. So what can we do here?
Well, we can drag in a static text link. This time we can double-click to edit, and even change the text to "Contact our team" — and then go over to set the link to send an email. This way people can still click "Contact our team" instead of seeing blank space where the email should be.
The reason we're demoing this is to show that we can create a condition here on this static element — it's just a text link pointing to an email.
Let's go over and add a condition. This time, we'll make sure to show this text link when an email is not set.
And that's it! We've used conditional visibility to control the visibility of these elements (or in the case of that section, an element and its children) based on the conditions we specified.
Conditional visibility is the most versatile way to show or hide elements in a dynamic design and create unique designs for different Collection items based on different criteria. Unlike filters — which specify which Collection items are visible in a Collection list — conditions specify when any element (static or dynamic) is visible in a Collection list or a Collection page.
Conditional visibility specifies when an element is visible. The condition is based on the value of a field or item in the Collection list or Collection page you’re on.
Each Collection field type has different conditions you can choose from.
To set a condition:
You can add as many conditions as you want. When multiple conditions are applied, it means all conditions must be met for it to be visible. You can delete conditions by clicking the trash icon next to the condition.
Condition rules, like filter rules, are either field-based or item-based.
Field-based conditions take effect when a given field:
Item-based conditions apply when a collection item is or is not the current item.
Collection list filters allow you to show or hide Collection items in a Collection list based on a rule.
While conditional visibility uses the same rules to show or hide elements within Collection lists or on Collection pages.
For example, you can use the rule “Featured (switch) is on” to show a “Featured” text label for featured blog posts and hide this label for elements that have the featured switch set to off.
On the other hand, if you wish to only show featured posts in a list, you can set this same rule as a filter on the Collection list.
Following are some of the ways you can apply conditions and filters.
Let’s say you have a Collection list containing team members and some have an email address, but others don’t. In your Collection list, you have a text link that pulls the URL from the email field.
Let’s look at how to hide the text link for team members who don't have an email addresses listed:
Say you have a Collection list of blog posts, and you want to show a “Featured” label for featured items. Since any element added in a Collection list appears in all Collection items, you can use conditional visibility to hide this element for items that do not meet the condition: “Featured is on.”
Let’s say you have a list of blog posts on a blog post Collection page. This list also includes the blog post item for the current blog post, the page you are currently on. You can hide this current blog post using filters, or, you can highlight it by creating a second design for the Collection items.
Now, you will have 2 representations for each blog post in each Collection item in your Collection list.
Since you want to show the unique design only for the current blog post, you need to do 2 things:
You may have a section that you only want to show on certain Collection pages. You can create a condition that this section and all its children are only visible, for example, when the category is “Christmas.”
Create unique designs in your ecommerce store. Use conditional visibility to display or hide elements based on product or order data — highlight product attributes or provide additional information at checkout.
Tie specific designs to unique product variants by setting conditional visibility on variant fields like the main image, compare-at-price, length, width, SKU, etc.
To show or hide elements for unique product variants:
The same banner or callout concept can be applied to product variants using the SKU conditional visibility option. Create the callout element you have in mind and set it to display only if the product variant is selected.
Example use cases:
Example with sale badge added to products with a compare-at-price field set.
Example of sale badge updating live when navigating through products.
You can add banners or callouts that depend on checkout information. For example, a banner can be shown depending on the cart total, subtotal, or shipping information.
To set conditional visibility on checkout pages:
Example use cases
Important to know: When setting conditional visibility based on the country or billing address, the country must be entered as a 2-letter abbreviation. For example, the United States needs to be entered as US.
Important to know: When adding a condition based on a price, the amounts should be formatted as 1000.00 — using a point separator as the decimal — regardless of the price formatting settings for your store. For example, 100,50 € should be entered as 100.50
Have fun learning how to use conditional visibility in this activity project.
Something went wrong while submitting the form. Please contact support@webflow.com
Got a lesson suggestion? Let us know
Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback