A developer wants to conditionally display schema settings fields in Shopify theme customization based on user selection. Specifically, when a radio button toggles between “image” and “icon” options, only the relevant settings should appear while hiding the other.
Solution provided:
Shopify supports conditional visibility through the visible_if attribute in settings schemas. This attribute accepts a Liquid conditional statement that shows/hides settings based on whether the condition evaluates to true or false.
Implementation example:
{
"type": "text",
"id": "feature_text",
"label": "Feature Text",
"visible_if": "settings.enable_feature == true"
}
The setting only appears when the specified condition is met. For the radio button scenario, the developer would apply visible_if conditions to both image and icon settings, checking which option is currently selected.
Reference: Shopify’s official documentation on conditional settings
I want to render only the required settings for customize. I have a radio button which has image and icon. I want when user choose image then only the image setting should appear. The other one should hide automatically.
In the above code i just want to show the icon settings not the image. Help me to understand how to do that.
Hey bro did you find any solution
Key aspects of Shopify settings schema conditional visibility: ( Conditional settings )
visible_if attribute: This attribute is added to a setting within the settings array of a section or block schema. Its value is a Liquid conditional statement that evaluates to true or false. If the condition is true, the setting is visible; otherwise, it is hidden.
...
{
"type": "checkbox",
"id": "enable_feature",
"label": "Enable Feature"
},
{
"type": "text",
"id": "feature_text",
"label": "Feature Text",
"visible_if": "settings.enable_feature == true"
}
...
In this example, feature_text will only be visible if the enable_feature checkbox is checked.