Use conditional visibility to show or hide elements in a dynamic design and create unique designs for Collection items based on different criteria.
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.
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:
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.
Condition rules, like filter rules, are either field-based or item-based.
Field-based conditions take effect when a given field:
Item-based conditions apply when a collection item is or is not the current item.
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 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.
Following are some of the ways you can apply conditions and filters.
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:
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.”
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:
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.”
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.
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:
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:
Example with sale badge added to products with a compare-at-price field set.
Example of sale badge updating live when navigating through products.
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:
Example use cases
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
Have fun learning how to use conditional visibility in this activity project.