How do I apply conditional visibility constraints to a collection list in Webflow if the options are not showing up?

Published on
September 22, 2023

To apply conditional visibility constraints to a collection list in Webflow, you need to follow these steps:

  1. Ensure that you have a collection list element on your page: First, make sure that you have added a collection list element to your page. This element is used to display a dynamic list of items from your collection.

  2. Set up your conditional visibility: Once you have the collection list element on your page, select it and go to the Element Settings panel on the right-hand side. Scroll down to the Visibility section.

  3. Add the conditions: Click on the "Add condition" button to start setting up your conditional visibility rules. You can set up multiple conditions by clicking on the "Add another condition" button.

  4. Choose the field and operator: Choose the field that you want to base your conditional visibility on from the dropdown menu. For example, if you have a "Featured" field in your collection that determines whether an item should be displayed or not, select that field.

  5. Define the condition: After choosing the field, you need to specify the operator and the value that your field should match. For example, if your "Featured" field is a checkbox that is true for featured items, you can set the operator to "Equals" and the value to "True".

  6. Determine the visibility action: Next, you need to choose the visibility action that should be applied when the condition is met. You can either hide or show the element when the condition matches.

  7. Repeat for additional conditions: If you have more conditions that you want to apply, click on the "Add another condition" button and repeat steps 4 to 6.

  8. Test your conditions: Once you have set up your conditional visibility constraints, it's important to preview your changes and test if the conditions are working as expected. Make sure to test both scenarios where the condition is met and where it is not met.

If the options for setting up conditional visibility constraints are not showing up in the Element Settings panel, it might be because you are not using a collection list element or you are not inside the scope of the collection list. Ensure that you have properly added a collection list to your page and that you have selected the collection list element before attempting to set up the conditional visibility constraints.

Additional questions:

  1. How can I create a dynamic list of items using collection lists in Webflow?
  2. What other conditional properties can I apply to elements in Webflow?
  3. Can I apply conditional visibility based on multiple criteria in Webflow?