Webflow conditional visibility hides or shows elements based on CMS field values — and crucially, hidden elements are completely removed from the HTML, not just visually invisible. Set conditions in Element Settings (D) → Conditional visibility. All conditions use AND logic; for OR scenarios you must duplicate elements with separate conditions.
Webflow Conditional Visibility: Display Logic Driven by CMS Fields
Conditional visibility is a display logic system that controls whether individual elements render at all based on the values of CMS fields. Unlike hiding elements with CSS (which keeps them in the DOM), conditional visibility removes the element from the HTML entirely when the condition is not met. This makes it useful for 'Featured' badges, 'Sale' labels, empty-field fallbacks, and per-item layout variations — all without creating multiple template designs. This tutorial focuses specifically on setting up conditions, understanding AND logic limitations, and implementing OR-logic workarounds.
Prerequisites
- A Webflow site on CMS plan or above with at least one Collection
- A Collection List or dynamic template page already set up (see webflow-cms-dynamic-content)
- One or more CMS fields that will drive the visibility logic (Switch, Option, or text fields work best)
Step-by-step guide
Understand where conditional visibility works
Understand where conditional visibility works
Conditional visibility is only available in two contexts: inside a Collection List (on any static page) and on a dynamic Collection template page. It is not available on static elements outside a Collection List. Inside a Collection Item, you can add conditions to any child element — the condition evaluates fresh for each item in the list. On a template page, conditions evaluate for the single item being viewed. Confirm your element's context via the Navigator panel (Z key) before proceeding.
Expected result: You can identify whether your element is inside a Collection Item or on a template page, and you understand that conditional visibility will not appear as an option for elements on static pages outside a CMS context.
Add a conditional visibility condition to an element
Add a conditional visibility condition to an element
Select the element you want to conditionally show or hide (e.g., a 'Featured' badge div inside a Collection Item). Open Element Settings (D key, right toolbar). Scroll down to find the 'Conditional visibility' section — it appears below the element's standard settings. Click 'Add condition'. A condition row appears with three dropdowns: choose a CMS field, an operator, and a value. For a Switch field: Field = 'Featured', Operator = 'is', Value = 'On'. Click outside to apply.
Expected result: In the Designer, items where the Featured switch is off will show a faint overlay indicating the element is hidden for those items. Items with Featured = On will display the badge normally.
Use Switch fields for binary show/hide logic
Use Switch fields for binary show/hide logic
Switch fields (boolean) are the cleanest option for conditional visibility. Add a Switch field to your Collection (CMS panel > Collection > Edit Fields > Add field > Switch). Common use cases: 'Featured' (show a star badge), 'Sale' (show a price sticker), 'Hide Description' (suppress text on compact views), 'New' (show a 'New' label). In Element Settings > Conditional visibility, set: Field = your Switch field, Operator = 'is', Value = 'On'. The element shows only when the switch is toggled on in the CMS Editor.
Expected result: Badges or labels on your Collection List items are driven by the Switch field value. Toggling the switch on/off in the CMS Editor (or Dashboard) immediately changes which items display the element.
Use Option fields for multi-state display logic
Use Option fields for multi-state display logic
Option fields (dropdown values) let you show different elements based on a category or status. Example: a Collection with a 'Status' Option field containing values 'Draft', 'Published', 'Archived'. You can show a yellow 'Draft' badge only when Status = Draft, a green 'Live' badge only when Status = Published. Create each badge as a separate element inside the Collection Item, then apply a separate condition to each one. Element Settings (D) → Conditional visibility → Field = 'Status', Operator = 'is', Value = 'Draft'.
Expected result: Different badge elements appear for different Option values. The correct badge shows for each item based on its Status field value.
Handle empty field fallbacks with 'is not set'
Handle empty field fallbacks with 'is not set'
When a CMS item has an optional field that may be blank (e.g., a Subtitle or an Author photo), leaving that element visible for items without data creates broken layouts — empty text blocks, broken image placeholders, or misaligned grids. Fix this by adding a condition: Field = 'Subtitle', Operator = 'is set'. The element renders only when the field contains data. For the reverse — a fallback element that shows when the field IS empty — use Operator = 'is not set'.
Expected result: Items without an optional field show a clean layout without gaps or empty placeholders. Items with the field populated display it normally.
Implement OR logic using duplicate elements
Implement OR logic using duplicate elements
Webflow's conditional visibility uses AND logic exclusively — there is no OR operator in the UI. For scenarios where you need 'show this element if condition A OR condition B is true', the workaround is to duplicate the element twice and assign a separate condition to each copy. Example: show a 'Promoted' label when either 'Featured' is On OR 'Partner' is On. Step 1: Create the label element, apply condition 'Featured is On'. Step 2: Duplicate it, apply condition 'Partner is On'. Both will independently render when their respective condition is true, producing the OR effect. Place both in the same position using Absolute positioning or overlap them in a Flex container.
Expected result: The label appears for items matching either condition, even though each copy only evaluates one condition. The visual output is as if an OR condition exists.
Exclude the current item in nested or related lists
Exclude the current item in nested or related lists
On dynamic template pages, you often have a 'Related Items' Collection List that should not include the item currently being viewed. In Element Settings (D) for the nested Collection List → Filter → Add filter → select the special 'Current' option under Item-based filters → set to 'Is not the current item'. This is a built-in Webflow filter that compares Collection Item identity rather than field values, so it works reliably regardless of slug changes.
Expected result: The related items list shows all items from the Collection except the one currently being viewed. No custom code is required.
Debug missing or unexpected element visibility
Debug missing or unexpected element visibility
If an element is not appearing as expected: first, select the Collection List > Element Settings (D) and verify the filter conditions at the list level are not unintentionally excluding items. Second, select the specific element that should be visible > Element Settings (D) > check the Conditional visibility section for any conditions that may be misconfigured (e.g., wrong field, wrong operator). Third, use the Navigator panel (Z) to confirm the element is inside the Collection Item and not accidentally moved outside it. Finally, check the CMS Dashboard to confirm the field value for the test item matches the condition.
Expected result: You can systematically identify whether the issue is a list-level filter, an element-level condition, a structural nesting problem, or an incorrect CMS field value.
Complete working example
1WEBFLOW CONDITIONAL VISIBILITY — VISUAL STEPS SUMMARY231. CONFIRM ELEMENT IS IN CMS CONTEXT4 Navigator (Z) → confirm element is inside 'Collection Item' or on a template page5 Conditional visibility does NOT appear outside CMS contexts672. ADD A CONDITION8 Select element → Element Settings (D) → scroll to 'Conditional visibility'9 Click 'Add condition'10 Set: Field | Operator | Value11123. FIELD TYPE → BEST OPERATORS13 Switch field: 'is' On / Off14 Option field: 'is' [value] / 'is not' [value]15 Text field: 'is set' / 'is not set' / 'contains' [text]16 Number field: 'greater than' / 'less than' / 'is' [number]17 Date field: 'is before' / 'is after' [date]18 Reference field: 'is' [item] / 'is not' [item]19204. AND LOGIC (stack multiple conditions on one element)21 Add condition → Add condition → all must be TRUE for element to show22235. OR LOGIC WORKAROUND24 Duplicate element → assign Condition A to copy 1 → assign Condition B to copy 225 Both copies are independent — one will render when its condition is true26276. EMPTY FIELD FALLBACK28 Condition: Field 'is not set' → show fallback element29 Condition: Field 'is set' → show real content element30317. EXCLUDE CURRENT ITEM (related lists on template pages)32 Collection List → Element Settings (D) → Filter33 Add filter → Item-based → 'Is not the current item'Common mistakes
Why it's a problem: Expecting conditional visibility to work on elements outside a Collection List or template page
How to avoid: Conditional visibility is a CMS-only feature. If you need similar logic on a static page, use Webflow Interactions (click trigger with show/hide action) or custom JavaScript to toggle CSS classes.
Why it's a problem: Stacking two conditions expecting OR behavior but getting AND instead
How to avoid: Multiple conditions on one element always evaluate as AND — all must be true for the element to show. For OR behavior, duplicate the element and assign one condition per copy. See Step 6 of this tutorial.
Why it's a problem: Applying 'Display: None' via Style Panel to hide an element instead of using conditional visibility, then wondering why it never shows
How to avoid: Display: None in the Style Panel hides the element on ALL items unconditionally. Remove the Display: None style (Style Panel > Layout > Display > set back to Block or Flex) and use conditional visibility in Element Settings instead.
Why it's a problem: Using a text field with conditional visibility and setting 'is' [exact text], then items with different capitalization not matching
How to avoid: Text field 'is' conditions are case-sensitive. Switch to an Option field with predefined values to eliminate capitalization inconsistencies, or use 'contains' as the operator and lowercase the comparison value.
Best practices
- Use Switch fields as the primary driver for conditional visibility — they are the simplest and least error-prone field type for binary show/hide logic
- Always add an 'is set' condition to optional image and text fields to prevent empty element layout bugs
- Name conditional elements descriptively in the Navigator panel (e.g., 'badge-featured', 'badge-sale') so collaborators know their purpose
- Avoid applying conditional visibility at the Collection Item level — control visibility on child elements inside the item instead
- Test conditional visibility by temporarily setting a CMS item's field values to trigger each condition, then reverting
- For OR logic with more than two conditions, consider restructuring your CMS schema to use a single field that captures the combined state
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm using Webflow CMS with a Collection called [Collection Name]. I want to show a '[label]' badge on Collection List items only when the [field name] field equals [value]. I also need a fallback element that shows when the [optional field] is empty. Walk me through setting up conditional visibility in Webflow's Element Settings panel, including how to handle OR logic if I need it.
In my Webflow Collection List for [Collection Name], I have a badge element that should only show when: [condition A] OR [condition B]. Since Webflow only supports AND logic in conditional visibility, what is the correct workaround? Walk me through the exact steps using Webflow's Designer interface.
Frequently asked questions
Does conditional visibility affect SEO — is the hidden content still indexed?
No. When a conditional visibility condition is false, Webflow removes the element entirely from the rendered HTML. Search engine crawlers will not see or index that element's content for items where the condition is false. This is different from CSS display:none, which hides elements visually but leaves them in the DOM for crawlers.
Can I use conditional visibility on a static page without a CMS Collection?
No. Conditional visibility in Webflow is exclusively a CMS feature — it requires a CMS data context to evaluate field values. For static pages, use Webflow Interactions (Interactions panel, H key) with a Mouse Click or Page Load trigger to show and hide elements based on user action, or use custom JavaScript for programmatic visibility control.
Why does my conditionally visible element still show a gap in the layout when it's hidden?
When conditional visibility hides an element, it is removed from the DOM entirely and takes up no space. If you still see a gap, another element nearby has margin or padding creating the space. Check the elements adjacent to the hidden one in the Navigator panel (Z) and reduce their spacing in Style Panel > Spacing.
Can I trigger conditional visibility based on the current user's login status?
Not directly via the native conditional visibility feature, which only evaluates CMS field values. Webflow's User Accounts/Memberships feature was sunset in January 2026. For user-based visibility logic, you would need a third-party membership solution (such as Memberstack or Outseta) with custom JavaScript that adds/removes CSS classes based on auth state.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation