Conditionals

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

Conditionals let you show, hide, and change content based on rules you set. 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 control element settings and component props — like visibility, variants, and text — using rules you set up. You can also define what happens when the rule isn’t met using a fallback value.

For example, you can use conditionals to:

• Hide an optional image in a component when an asset isn’t provided (e.g., if the image prop isn’t set)

• Change the variant of a component in a Collection list based on a CMS field (e.g., use the ‘Featured’ variant when the ‘Featured’ switch is on)

• Show content that only applies to certain locales (e.g., show an additional section for specific countries)

Conditionals can be used on the following settings and props:

• Visibility

• Switch

• Component variants

• Text

• Attributes

• Images

• Video

Conditional rules can reference:

• Component properties — inside a main component

• CMS fields — inside a Collection List or Page

• Current locale data — on a site with at least one secondary locale

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 settings or component props when they can reference a supported data source, i.e., in components, in Collection lists or on Collection pages, or on sites with at least one secondary locale.

Create a conditional

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

On an element setting

1. Select the element

2. Go to Element settings

3. Click the “purple dot”

4. Click Create conditional

On a component prop

1. Select the component instance

2. Go to the Properties panel

3. Click the “purple dot”

4. Click Create conditional

Add condition(s)

In the 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 New condition to add another condition or 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.

In a main component, you can also connect output and fallback values to any compatible prop.

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

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

Note that group order matters — the first group whose conditions are met determines the output value.

Delete a conditional

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

On an element setting

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

2. Go to Element settings

3. Click the conditional

4. Click the “delete conditional” icon

5. Click Delete to confirm

On a component prop

1. Select the component instance

2. Go to the Properties panel

3. Click the conditional

4. Click the “delete conditional” icon

5. Click Delete to confirm

Use cases for conditionals

In components

You can use conditionals in components to show, hide, or change content 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)

• Set the variant on a nested component based on the parent component (e.g., ‘Light/Dark’ on the child based on ‘Light/Dark’ on the parent)

• Hide an optional slot with no content (e.g., if the slot's empty)

In Collection lists and on Collection pages

You can use conditionals to show, hide, or change content 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”)

• Set a component variant based on a CMS option or reference field (e.g., set a card component to the “Team member” variant when the “Category” option field is set to “Team”)

With Localization

On localized sites, you can use conditionals to show, hide, or change content 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)

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