The Conditional Visibility feature in Instant allows you to control the visibility of elements on your page based on specific criteria. This is particularly useful for dynamically changing layouts by showing or hiding elements based on product or variant properties.
Overview
Conditional visibility enables you to create dynamic, context-aware layouts that respond to product data. Elements can automatically appear or disappear based on conditions you define, without requiring custom code.
Common Use Cases
Use Case | Description |
Sale Badges | Show a "Save X%" badge only when a product is on sale |
Stock Indicators | Display availability messages based on stock status |
Subscription Info | Show additional details when a selling plan is selected |
Variant-Specific Content | Display content based on selected product options |
Metafield Content | Show elements only when specific metafield values exist |
Adding Conditions
Step 1: Select an Element
Click any element on the canvas that you want to conditionally show or hide.
Step 2: Open Settings
Navigate to the Settings tab in the right sidebar.
Step 3: Add a Condition
Click + Add Condition. The available condition options will appear based on the selected element.
Setting Up Criteria
After adding a condition, you'll see options to define the criteria for showing or hiding the selected element.
Available Criteria
Criteria | Description |
Available for Sale | Show/hide based on whether the product or variant is in stock |
On Sale | Show/hide based on whether the product has a compare-at price |
Product Option | Show/hide based on selected variant options (size, color, etc.) |
Selling Plan | Show/hide based on whether a subscription plan is selected |
Metafield Values | Show/hide based on custom metafield data from Shopify |
Example Use Cases
Sale Badge
Show a "Save X%" badge only when a product is on sale.
Setup:
Create a badge element with your sale messaging
Select the badge element
Navigate to Settings → Add Condition
Set criteria to On Sale → Is True
The badge will only appear when the product has a compare-at price higher than the current price.
Subscription Information
Show additional information when a selling plan is selected.
Setup:
Create a text or container element with subscription details
Select the element
Navigate to Settings → Add Condition
Set criteria to Selling Plan → Is Selected
The subscription information will only appear when the customer selects a subscription option.
Quick Reference
Task | Action |
Add condition | Select element → Settings tab → + Add Condition |
Set visibility criteria | Choose criteria type → Define condition |
Show when on sale | Condition → On Sale → Is True |
Show when in stock | Condition → Available for Sale → Is True |
Show for specific option | Condition → Product Option → Select option value |
Show for subscription | Condition → Selling Plan → Is Selected |
Show based on metafield | Condition → Metafield Values → Define value |
Criteria Options
Criteria | Condition Options |
Available for Sale | Is True, Is False |
On Sale | Is True, Is False |
Product Option | Equals specific option value |
Selling Plan | Is Selected, Is Not Selected |
Metafield Values | Equals, Contains, Exists |