Conditional visibility

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:

1. Set conditional visibility
2. Understand condition rules
3. Understand conditions vs. filters
4. Support your ecommerce project with conditional visibility

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.

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

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.

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:

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

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.

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:

1. Select the element you’d like to be visible when a certain condition is met
2. In the Settings panel, add a Condition
3. Select one of the product fields (e.g., compare-at-price) in the dropdown menu
4. Set a condition (e.g., exists or equals a specific value) 
5. 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. 

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:

1. Select the element you’d like to be visible when a certain condition is met
2. Add a Condition
3. Select one of the shipping fields (e.g., Subtotal) in the dropdown menu
4. Set a condition (e.g., exists or equals a specific value) 
5. 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

‍

Try it!

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