Conditional visibility

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!

Conditional visibility is the most versatile way to show or hide elements in a dynamic design, allowing you to create unique designs for different Collection items based on different criteria. Unlike filters, which specify which Collection items are visible in a Collection List, conditions specify when any element (static or dynamic) is visible in a Collection List or a Collection Page.

In this lesson
  1. Show or hide an element in a Collection list
  2. Show or hide a label
  3. Highlight the current item
  4. Show or hide a section on a Collection page

Setting conditional visibility

By setting conditional visibility, you’re specifying when an element is visible. The condition is based on what value a field, or an item, has in the Collection list item or Collection page you’re on. 

Each Collection field type has different conditions you can choose from.

Follow these steps to set a condition:

  1. Select an element, static or dynamic, inside a Collection list or on a Collection page that you want to only show when a specific condition is met
  2. Press D to open the settings panel
  3. In the conditional visibility section, add a condition by clicking the plus (+) button
  4. In the first dropdown, select the field you want the visibility to be based on
  5. Choose the condition in the second dropdown
  6. Specify a value if needed
  7. Click Save

You can add as many conditions as you want. When multiple conditions are applied, it means all conditions must be met for it to be visible.

You can delete conditions by clicking the trash can icon next to the condition.

Condition rules

Condition rules, like filter rules, are either field-based or item-based.

Field-based conditions

Field-based conditions take effect when a given field:

  • Is set or is not set
  • Equals or doesn’t equal a certain value
  • Contains or doesn’t contain a certain value
  • Is greater than, less than, or is a number between two numeric values
  • Is ON or OFF
  • Belongs to a certain date range

Item-based conditions

Item based conditions apply when a collection item is or is not the current item.

Conditions vs filters

While Collection list filters allow you to show or hide Collection items in a Collection list based on a rule, conditional visibility uses the same rules to show or hide elements within Collection lists or on Collection pages.

For example, you can use the rule “Featured (switch) is on” to show a “Featured” text label for featured blog posts and hide this label for elements that have the featured switch set to off. On the other hand, if you wish to only show featured posts in a list, you can set this same rule as a filter on the Collection list.


Show or hide an element in a Collection list

Let’s say you have a Collection list containing team members. Some of them have an email address, but others don’t. And in your Collection list, you have a text link that gets the URL from the email field. But, as we mentioned above, some team members don't have email addresses listed. So, we need to hide the text link for those who don’t have an email link. To do that:

  1. Select the text link
  2. Add a Condition stating that the element is visible when an email address field is set
  3. Save
This condition is set on the text link that is connected to the email field.

Show or hide a label

Say you have a Collection list of blog posts, and you want to show a “Featured” label for featured items. Since any element added in a Collection List appears in all Collection items, you can use conditional visibility to hide this element for items that do not meet the condition: “Featured is on.”

  1. Create a “Featured” label in your blog posts Collection list
  2. Select the label
  3. Add a Condition stating that the element is visible when Featured? (switch) is on
  4. Click Save

Highlight the current item

Let’s say you have a list of blog posts on a blog post Collection page. This list also includes the blog post item for the current blog post, the page you are currently on. You can hide this current blog post using filters, or, you can highlight it by creating a second design for the Collection items. Now, you will have 2 representations for each blog post in each Collection item in your Collection List.

Since you want to show the unique design only for the current blog post, you need to do 2 things:

  1. Add a condition to hide the first design — “Post item wrapper” in this example — for the current item
  2. Add a condition to show the new design — “Current post item wrapper” in this example — only for the current item

Show or hide a section on a Collection page

You may have a section that you only want to show on certain Collection pages. You can create a condition that this section and all its children are only visible, for example, when the category is “Christmas.”

  1. Select the section
  2. Add a Condition
  3. Select the Category field in the first dropdown
  4. Choose equals in the second dropdown
  5. Specify Christmas as value
  6. Save
You can see more examples and use cases in the various collection field guides.
Try it!

Have fun learning how to use conditional visibility in this activity project.