Conditionals

Use conditionals to control element visibility based on CMS fields, component props, and current locale data.

Conditionals let you show or hide elements based on rules you set, so your layouts can adapt automatically. You can use them in components, in Collection lists, and on Collection pages — and on static pages when Localization is enabled.

What are conditionals?

Conditionals let you set rules that determine whether an element is visible or hidden, or whether a component switch prop is toggled on or off. You can also define what happens when the rule isn’t met using an fallback value.

For example, you can use conditionals to show or hide elements:

• in a Collection list based on Collection fields (e.g., show a label only when a switch field is on, or hide an element when a field is empty)

• in components based on component props (e.g., show a label only when a text prop contains a specific word)

• across your site based on the current locale, if Localization is enabled (e.g., show region-specific messaging only for a specific language or country)

Available rules depend on the type of data you’re using. For example:

• Text values support rules such as Contains, Starts with, and Ends with

• Switch values (like a CMS switch field) support Is > On/Off, or Is not > On/Off

• Reference fields let you base a conditional on fields from the referenced Collection — the available rules depend on the field type you choose (for example, text, switch, image, etc.)

• Multi-reference fields support Contains any, Does not contain any, Is set, and Is not set

How to set and delete conditionals

Conditionals can be set on an element’s visibility setting if the element's connected to a supported data source, i.e., it’s inside a component or Collection list, on a Collection page, or part of a site with at least one secondary locale. Conditionals can also be set on a component switch prop.

Create a conditional

Depending on whether you’re creating a conditional on an element’s visibility setting or a component switch prop, follow the relevant steps below.

On an element’s visibility setting

1. If the element’s inside a component, double-click the component to edit it

2. Select the element you want to show or hide

3. Go to Element settings > Visibility

4. Click the “plus” icon

5. Click Create conditional

On a component switch prop

1. Select the component instance

2. Click the “plus” icon next to the switch prop in the right panel

3. Click Create conditional

Add condition(s)

In the Visibility / Switch conditions modal:

1. Choose a data source from the Select field dropdown

2. Choose a rule from the next dropdown

3. Enter or choose a value, if required

4. (Optional) Click the “match case” icon for text values if case-matching is required

5. (Optional) Click New condition to add another condition and create a group

Set the output and fallback values

Once you’ve added a condition, you can set the output and fallback values, i.e., what happens when a condition is or isn’t met. For example — you may choose to make an image element Visible when a condition is met and Hidden when it’s not. 
Depending on whether you’re creating a conditional on an element’s visibility setting or a component switch prop, you can set the following output / fallback values:

• Visible or Hidden

• On or Off

You can also connect output / fallback values to a switch prop for visibility conditionals on an element inside a component.

Create condition groups

You can add multiple conditions to a group, and even create multiple condition groups for more complex logic. Each group can have it’s own output value, and you can choose whether any or all conditions in the group must be met for the output to be true.

Adding and removing groups

To add a group to a conditional:

1. Click New Group

2. Add at least one condition

3. Choose the output value (e.g., Visible / Hidden or On / Off)

To remove a group from a conditional:

1. Hover over the condition group

2. Click the “trash” icon

Reordering groups

To reorder a group:

1. Hover over the condition group

2. Click and hold the “drag” handle on the left of the group

3. Drag the group up or down and release to reorder

Delete a conditional

Depending on whether you’re deleting a conditional on an element’s visibility setting or a component switch prop, follow the relevant steps below.

On an element’s visibility setting

1. If the element’s inside a component, double-click the component to edit it

2. Select the element with the conditional you want to delete

3. Go to Element settings > Visibility

4. Click the conditional to open the Visibility conditions modal

5. Click the “delete conditional” icon

6. Click Delete to confirm

On a component switch prop

1. Select the component instance

2. Click the conditional under the switch prop in the right panel

3. Click the “delete conditional” icon

4. Click Delete to confirm

Use cases for conditionals

In components

You can use conditionals in components to show or hide elements based on component props. This is useful when you want a single component to adapt to different layouts or show different content without needing additional “visibility” props or duplicate elements.

For example, you can use conditionals in components to:

• Show or hide an element when a prop is set or not set (e.g., only show a badge when the “Badge text” prop has content)

• Show or hide elements based on a prop value (e.g., only show a “New” label when the “Title text” prop contains the word “new”)

• Show or hide elements based on variants (e.g., show an image only if the “Image left” variant is selected)

• Show one element and hide another based on a single prop (e.g., show an image and hide a text element when a switch prop is toggled on)

To set a conditional in a component:

1. Edit the main component

2. Select the element you want to show or hide

3. Go to Element settings > Visibility

4. Click the “plus” icon

5. Choose the prop you want to base the conditional on

6. Choose a rule (e.g., Is set / Is not set, Starts with, Contains)

7. Enter or choose a value, if required

8. Set Visibility > Visible or Hidden

9. Set Else > Visibility > Visible or Hidden

10. Click off the modal or press Esc on your keyboard to save the conditional

In Collection lists and on Collection pages

You can use conditionals to show or hide elements based on Collection fields when the selected elements are connected to your CMS (i.e., inside a Collection list or on a Collection page). This is useful when you want certain elements to appear only when a Collection item meets specific criteria.

For example, you can use conditionals with Collection fields to:

• Show or hide a label based on a date field (e.g., show a “Today” badge only when the “Last published” date is today)

• Show or hide elements when a field is empty (e.g., hide an “Author bio” section when a rich text field isn’t set)

• Show or hide sections on a Collection page for specific items (e.g., show an “Ingredients” section only for items where the “Category” option field is set to “Recipe”)

To set a conditional using CMS fields:

1. Select an element inside a Collection list or on a Collection page

2. Go to Element settings > Visibility

3. Click the “plus” icon

4. Choose the CMS field you want to base the conditional on

5. Choose a rule (e.g., Is set / Is not set, Starts with, Contains)

6. Enter or choose a value, if required

7. Set Visibility > Visible or Hidden

8. Set Else > Visibility > Visible or Hidden

9. Click off the modal or press Esc on your keyboard to save the conditional

With Localization

On localized sites, you can use conditionals to show or hide elements based on current locale data. This is useful when you want to tailor content or UI by language or region without maintaining separate pages.

For example, you can use conditionals with Localization to:

• Show a banner only for a specific language (e.g., show a banner only when the current locale’s language is set to French)

• Show region-specific messaging based on country (e.g., show additional shipping details only when the current locale’s country is set to Canada)

To set a conditional using current locale data:

1. Select the element you want to show or hide

2. Go to Element settings > Visibility

3. Click the “plus” icon

4. Choose the locale field you want to base the conditional on (for example, Language or Country)

5. Choose a rule (e.g., Is any / Is not any or Is set / Is not set)

6. Enter or choose a value, if required

7. Set Visibility > Visible or Hidden

8. Set Else > Visibility > Visible or Hidden

9. Click off the modal or press Esc on your keyboard to save the conditional

Conditional visibility in Webflow Ecommerce (legacy)

You can use conditional visibility to tie specific designs to unique product variants by setting conditional visibility on variant fields like the main image, compare-at-price, SKU, etc. Or, you can add banners or callouts depending on checkout information. For example, you can show a “free shipping” badge on the checkout page depending on the cart total, subtotal, or shipping information.

To set conditional visibility on the checkout page:

1. Select the element you want to show when a certain condition is met

2. Go to Element settings panel > Conditional visibility

3. Click the “plus” icon 

4. Choose one of the shipping fields (e.g., Subtotal) from the dropdown

5. Choose the condition (e.g., Equals or Is greater than a specific value) 

6. Enter the value for the condition in the input field 

7. Click Save

Other example use cases: 

• Add a “pick up in store” badge if an Ecommerce product isn’t shippable

• Show or hide a sales badge depending on whether the Compare-at-price field is set 

• Show or hide specific messaging when shipping to certain countries