Shopify has recently introduced an exciting new feature that enhances the customization experience for theme developers and store owners alike. In this article, we’ll explore this update in detail, discuss its benefits, and walk you through a practical example of how to use it effectively in your Shopify store.
What Is the New Update?
When building a custom section in Shopify, developers use a schema to define the settings and fields that appear in the theme editor. The latest update introduces a new schema property called visible_if. This property allows you to apply conditional logic to control when specific settings or fields should be shown or hidden based on other settings’ values.
Why Is This Important?
The visible_if property significantly improves the flexibility and user experience within Shopify’s theme editor. Here are some of the key benefits:
- Streamlined Interface: You can now hide unnecessary settings and only display what’s relevant to the user’s selection. This keeps your sections clean and focused.
- Improved Usability: When clients or store owners see fewer, more relevant options, they’re less likely to be overwhelmed or confused by a large number of fields.
- Dynamic Behavior: The settings dynamically respond to user choices, making sections feel smarter and more intuitive.
Real-World Example: How to Use visible_if
Let’s walk through a practical implementation. In this example, we’ve created a custom section called grt-feature.
Step 1: Create the Section
- Go to the Shopify theme editor.
- Click on the three-dot menu and choose “Edit Code.”
- Inside the “Sections” folder, click “Add new section” and name it something like
grt-feature.
Step 2: Add Schema Fields
Inside this section, the schema starts with a basic text field for the section title. Then, we add a dropdown field named source_type with two options: Collection and Product.
{
"type": "select",
"id": "source_type",
"label": "Select Source Type",
"options": [
{ "value": "collection", "label": "Collection" },
{ "value": "product", "label": "Product" }
]
}
Next, we use the visible_if property to conditionally display other fields:
- If the user selects Collection, the collection picker appears.
- If Product is selected, the product picker appears instead.
{
"type": "collection",
"id": "selected_collection",
"label": "Choose Collection",
"visible_if": "source_type == collection"
},
{
"type": "product",
"id": "selected_product",
"label": "Choose Product",
"visible_if": "source_type == product"
}
Step 3: Test It in the Theme Editor
Once you add this section to your store (e.g., as "grt-feature-collection"), you’ll notice how the settings respond dynamically:
- Selecting "Collection" shows only the collection picker.
- Switching to "Product" hides the collection picker and shows the product picker.
When should I use visible_if?
1. You Have Conditional Logic Between Fields
If one field should only be visible when another has a specific value.
2. You Want to Simplify the User Interface
Avoid overwhelming clients or merchants with unnecessary settings. Show only the relevant options based on prior selections.
3. You're Creating Reusable or Complex Sections
When you're building a section with multiple configuration paths (e.g., displaying either a product, a collection, or a custom image), visible_if helps keep the interface tidy.
4. You Need to Minimize Human Error
By hiding irrelevant fields, you prevent users from filling out fields that don’t apply to the current configuration, reducing the chance of misconfiguration.
5. You Want Dynamic Customization
If your section behavior should change depending on user choices, visible_if allows you to reflect that dynamically in the settings interface.
