How to Display Conditional Content in Webflow CMS

In this tutorial, Sandro, co-founder of the Gemeos Webflow agency, shows you how to display conditional content in your Webflow CMS collections based on field values.

1. Use Webflow’s native conditions

In your Collection List Template, select the element you want to show conditionally. In the Settings panel > Conditional Visibility, set the condition based on a CMS field. Examples: show a badge if the "is_new" field is enabled, hide a section if the "description" field is empty.

2. Conditions for Switch fields (booleans)

Switch fields are the simplest option for conditional content. Create a Switch field in your CMS (for example: "Featured", "Premium", "New"). In the Designer, apply Conditional Visibility to the element: "Show when [field] is On".

3. Conditions for text fields

To show an element only if a text field is filled in, use the "is not empty" condition. This is useful for optional fields like a quote, a video, or a short description.

4. Conditions for Option fields (enum)

Option fields let you create more granular conditions. Example: show a red badge if the value is "Urgent", orange if it's "Normal". Create several elements with different conditions on the same Option field.

Conclusion

Conditional content keeps you from building multiple templates for small variations. Use cases:

• "New" or "Popular" badge on product cards
• Author section shown only when filled in
• Strikethrough price shown only when a promo is active