Conditional visibility shows or hides an element based on live data — without building separate layouts for every scenario. It's a distinct feature from the Opacity control on the Style tab. Configure it on the Settings tab of the Design panel.
Where to find it
Select an element and open Settings. The Conditional visibility section is where you add a rule; a dot on the Settings tab label indicates a rule is active.
Click Add condition to create a rule. Under Show when:, pick a type, an operator, and a value. Remove the rule with the minus control on the section header.
Condition types
Choose a Type for the rule:
Product — whether the connected product is Available for sale or On sale
Product option — match a variant option such as Size or Color
Selling plan — match a subscription selling plan
Quantity available — react to inventory levels
Metafield — compare a metafield value on the current Shopify resource
Cart count, Cart subtotal, Cart total, Cart discount — react to the cart
Cart reward — react to cart-reward progress (in cart-reward elements)
Most types use Is / Is Not. Numeric types like Quantity available and the cart amount types use Less than / Greater than. Use the Preview button to toggle the condition on and off in the builder.
A product context is required
Many conditions need a product context. If the selected element isn't inside connected Shopify product content, the panel shows: Connect a product in order to add conditional visibility. Add Shopify content to a parent container first, then add conditions on child elements.
Collections
Conditional visibility is not available for collections — the panel says so when the element sits directly in a collection context rather than a repeated product.
Common use cases
Show a "Sale" badge when a metafield marks the product as on promotion
Hide the add-to-cart area when Quantity available is 0
Show subscription messaging only for a specific Selling plan
Reveal a free-shipping banner when Cart total crosses a threshold
Conditional visibility vs. Opacity
The Opacity control on the Style tab can visually hide an element, but the element still exists on the page. Conditional visibility decides whether the element renders at all based on your data, which is the better choice when content shouldn't appear under certain conditions.
Testing conditions
Connect Shopify and preview with real product or cart data. Switch variants, change cart contents, and toggle selling plans in preview — conditions evaluate against the same data your live storefront uses after publishing.