Conditional visibility

Use conditional visibility to show or hide elements in a dynamic design and create unique designs for Collection items based on different criteria.

This video features an old UI. Updated version coming soon!

Clone this project

Despite the nine-syllable mouthful, conditional visibility is really straightforward, and it's a great way to show or hide entire elements (and their children), based upon an item’s content inside a collection.

Now, we all know that wasn't nine syllables. It was 47. We meant conditional visibility.

Here's a collection page. And here's a section element with content inside. And we love this section. But we only want this section to show up on certain pages.

Let's go on over and create a condition. The element (and its children) is only visible when...

And from the dropdown, we can make the selection.

We're only showing this section when the Work Category is Portraits. We don't want this section showing up to advertise portrait photography if the page is about shooting Landscape Architecture, Residential Interiors, Commercial Exteriors, or Dr. Who Cosplay. But we do want it showing up if someone's reading about portraits.

So by doing this — by setting up this condition — we've made it so the section only appears on pages that have the Portraits category set. We can see that the section won't show up if the category isn't set to Portraits. When we hit another page that has its category set to Portraits? The section displays perfectly.

This doesn't just apply to pages. Here in this collection list containing team members, we want to add an email link. That's fine. Let's go over and drag in a text link.

Let's double click to rename this "Email Me" so we can link this to each team member's email.

Of course, we can get our URL from the Email field in our collection. But we actually have a problem: some team members don't have emails listed.

Wouldn't it be great if we could only show this element on team members who have emails set?

We'll keep this text link selected and go over to do just that. Add a condition, stating that the element is visible when...an email...is set. We only want to show this element if we set an email on that team member.

And just like that, all the work was done for us. We didn't have to go manually hunting through every last team member.

Now Joan's the team leader here and she doesn't want people emailing her directly because she's putting out fires all day and email is a distraction. And Dan still uses AOL so we're not even listing that. So what can we do here?

Well, we can drag in a static text link. This time we can double-click to edit, and even change the text to "Contact our team" — and then go over to set the link to send an email. This way people can still click "Contact our team" instead of seeing blank space where the email should be.

The reason we're demoing this is to show that we can create a condition here on this static element — it's just a text link pointing to an email.

Let's go over and add a condition. This time, we'll make sure to show this text link when an email is not set.

And that's it! We've used conditional visibility to control the visibility of these elements (or in the case of that section, an element and its children) based on the conditions we specified.

Conditional visibility is the most versatile way to show or hide elements in a dynamic design and 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:

Example use cases:

Show or hide an element in a Collection list
Show or hide a label
Highlight the current item
Show or hide a section on a Collection page
Add a “pick up in store” badge if the product isn’t shippable (ecommerce)
Show or hide a sales badge depending on whether compare-at-price is set (ecommerce)
Show or hide a “Free shipping” badge depending on an order subtotal (ecommerce)
Show or hide specific messaging when shipping to certain countries (ecommerce)

Set conditional visibility

Conditional visibility specifies when an element is visible. The condition is based on the value of a field or item in the Collection list or Collection page you’re on.

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

The conditional visibility panel includes a plus icon to add a condition. If no conditions are currently added, a None message is displayed under the conditions section.

To set a condition:

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
Press D to open the settings panel
In the conditional visibility section, add a condition by clicking the plus (+) button
In the first dropdown, select the field you want the visibility to be based on
Choose the condition in the second dropdown
Specify a value if needed
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 icon next to the condition.

Understand 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.

Understand conditions vs. filters

Collection list filters allow you to show or hide Collection items in a Collection list based on a rule.

The add filter drop down menu includes date written, post body, post summary, main image, thumbnail image, featured? and Blog Post.

While conditional visibility uses the same rules to show or hide elements within Collection lists or on Collection pages.

On the left, a featured text block tag is selected. On the right, the text block settings has a condition "Featured? is on" under the Conditional Visibility panel.

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.

On the left, two featured blog posts are displayed within a Collection List wrapper. On the right, the collection list settings use a source called Blog posts and has a filter for "Featured? is on".

Examples

Following are some of the ways you can apply conditions and filters.

Show or hide an element in a Collection list

Let’s say you have a Collection list containing team members and some have an email address, but others don’t. In your Collection list, you have a text link that pulls the URL from the email field.

Let’s look at how to hide the text link for team members who don't have an email addresses listed:

Select the text link
Add a Condition stating that the element is visible when an email address field is set
Save

The Add condition panel includes two dropdown menus for Element is visible when. The condition settings include Email (Author), Is set. A save button is at the bottom of the panel. — 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.”

Create a “Featured” label in your blog posts Collection list
Select the label
Add a Condition stating that the element is visible when Featured? (switch) is on
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.

A collection list wrapper includes eight blog post cards. Two are coming soon and six are posted with read more buttons to enter the post.

Now, you will have 2 representations for each blog post in each Collection item in your Collection list.

In the navigator a collection item includes a Post item wrapper and a Blog post list item.

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

Add a condition to hide the first design: “Post item wrapper” in this example, for the current item
Add a condition to show the new design: “Current post item wrapper” in this example, only for the current item

On the left, a post item wrapper is selected. On the right, the edit condition panel includes the settings Blog Post is not for "Element is visible when".

On the left, a blog post list item is selected. On the right, the edit condition panel includes the settings Blog Post is for "Element is visible when".

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.”

Select the section
Add a Condition
Select the Category field in the first dropdown
Choose equals in the second dropdown
Specify Christmas as value
Save

You can see more examples and use cases in the various collection field guides.

Support your ecommerce project with conditional visibility

Create unique designs in your ecommerce store. Use conditional visibility to display or hide elements based on product or order data — highlight product attributes or provide additional information at checkout.

Show or hide elements based on product and product variant fields

Tie specific designs to unique product variants by setting conditional visibility on variant fields like the main image, compare-at-price, length, width, SKU, etc.

To show or hide elements for unique product variants:

Select the element you’d like to be visible when a certain condition is met
In the Settings panel, add a Condition
Select one of the product fields (e.g., compare-at-price) in the dropdown menu
Set a condition (e.g., exists or equals a specific value)
Save

The same banner or callout concept can be applied to product variants using the SKU conditional visibility option. Create the callout element you have in mind and set it to display only if the product variant is selected.

Example use cases:

Add a “pick up in store” badge if the product isn’t shippable
Show or hide a sales badge depending on whether compare-at-price is set

Example with sale badge added to products with a compare-at-price field set.

The add condition panel is highlighted on the bottom right of the Designer.

Example one on the left, a condition is set as "Element is visible when Name equals a value". Second example on the right, a condition is set as "Element is visible when Compare-at price Is Set".

‍

Example of sale badge updating live when navigating through products.

‍

Show or hide elements in the checkout flow based on product order data

You can add banners or callouts that depend on checkout information. For example, a banner can be shown depending on the cart total, subtotal, or shipping information.

To set conditional visibility on checkout pages:

Select the element you’d like to be visible when a certain condition is met
Add a Condition
Select one of the shipping fields (e.g., Subtotal) in the dropdown menu
Set a condition (e.g., exists or equals a specific value)
Save

Example use cases

Show or hide a “Free shipping” badge depending on an order subtotal
Show or hide specific messaging when shipping to certain countries

Important to know: ‍When setting conditional visibility based on the country or billing address, the country must be entered as a 2-letter abbreviation. For example, the United States needs to be entered as US.

Important to know: When adding a condition based on a price, the amounts should be formatted as 1000.00 — using a point separator as the decimal — regardless of the price formatting settings for your store. For example, 100,50 € should be entered as 100.50