Conditional visibility

Conditional visibility lets you show or hide elements and create unique designs 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) will be visible. 

In this lesson, you’ll learn:

1. What is conditional visibility? 
2. How to set conditional visibility
3. Condition rules
4. Conditions vs. filters
5. Use cases for conditional visibility

What is conditional visibility?

Conditional visibility specifies when an element is visible on your site depending on certain conditions. 

For example, you can use conditional visibility to:

• Show or hide an element in a Collection list based on a Collection item field or value (e.g., show an element depending on the value of a Collection field, or hide an element bound to a Collection field when that Collection field is empty) 
• Show or hide a label or highlight an item based on a Collection item field or value (e.g., add a “featured” label to a featured blog post)
• Show or hide a section on a Collection page
• Highlight the current Collection item
• Show or hide an element if a user isn’t logged in on your site

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

How to set conditional visibility

To create a condition that shows or hides an element based on a user’s login state: 

1. Select an element on the canvas
2. Go to Element settings panel > Visibility & user access
3. Click the “plus” icon 
4. Choose the field you want to determine visibility from the dropdown (e.g., User state)
5. Choose a value from the next dropdown (e.g., is Logged In)
6. Click Save

You can follow the same steps to add field- and item-based conditions in Element settings panel > Conditional visibility.

You can add as many conditions as you want. When multiple conditions are applied, all conditions must be met for the element to be visible (or hidden). To delete a condition, click the “trash” icon next to the condition.

Condition rules

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

Field-based conditions take effect when a given field: 

• Is set or is not set
• Equals or doesn’t equal 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 apply when a Collection item is or is not the current item. 

Conditions vs. filters

Collection list filters allow you to show or hide Collection items in a Collection list based on a rule, while conditional visibility uses the same rules to show or hide elements within Collection lists, on Collection pages, or on static 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 toggled off.

Alternatively, if you wish to only show featured posts in a list, you can set this same rule as a filter on the Collection list. 

Use cases for conditional visibility

In Collection lists and on Collection pages

You can apply conditions and filters to highlight or show or hide specific content within your Collection lists or on Collection pages. Let’s say you have a Collection list of blog posts, and you want to show a “Featured” label on featured posts. You can use conditional visibility based on a switch field to hide the label for items that have the “Featured” switch off. 

To create the following condition, you’ll need to add a switch field to your Collection and design an element to serve as the “Featured” label. Then: 

1. Select the “Featured” label on the canvas
2. Go to Element settings panel > Conditional visibility
3. Click the “plus” icon 
4. Choose the email field from the dropdown
5. Choose Is set from the next dropdown
6. Click Save

On Ecommerce sites

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 

Important: When you create a condition based on price, the amounts should be formatted using a period as the decimal (e.g., 1000.00) regardless of the price formatting settings for your store. For example, 100,50 € should be entered as 100.50. 

Note: When setting conditional visibility based on country or billing address, the country must be entered as a 2-letter abbreviation. For example, the United States should be entered as “US”.

On User Accounts sites

You can set conditional visibility on any element (e.g., buttons, sections, etc.) on a User Accounts-enabled site to customize experiences for your users based on whether they’re logged in. Learn more about setting element visibility based on site visitors’ logged-in status.