Hey All!
So while the changelog has no formal entry for visible_if
, the feature has documentation and works on production stores. You can find the documentation here: Settings
I have played around with a few different configurations, but once I entered the realm of inputs utilizing dynamic data sources, the system seemed to fall apart. The docs do not specifically say dynamic data sources are not supported.
My example schema:
{% schema %}
{
"name": "Visible If Demo",
"settings": [
{
"type": "header",
"content": "Visible If Example: Text Input"
},
{
"type": "text",
"id": "visible_if_example_1",
"label": "Text Input"
},
{
"type": "header",
"content": "Give Me A Color!",
"info": "The value of visible_if_example_1 is empty!",
"visible_if": "{{ section.settings.visible_if_example_1 == blank or section.settings.visible_if_example_1 == 'rgba(0,0,0,0)' }}"
},
{
"type": "header",
"content": "Thank You For The Color!",
"info": "The value of visible_if_example_1 is not empty!",
"visible_if": "{{ section.settings.visible_if_example_1 != blank and section.settings.visible_if_example_1 != 'rgba(0,0,0,0)' }}"
},
{
"type": "header",
"content": "It's Blue!",
"info": "The value of visible_if_example_1 is Blue",
"visible_if": "{{ section.settings.visible_if_example_1 == 'Blue' }}"
},
{
"type": "header",
"content": "It's Blue Enough!",
"info": "The value of visible_if_example_1 is not exactly Blue, but close enough.",
"visible_if": "{{ section.settings.visible_if_example_1 != 'Blue' and section.settings.visible_if_example_1 contains 'Blue' }}"
},
{
"type": "header",
"content": "Visible If Example: Product Input"
},
{
"type": "product",
"id": "visible_if_example_2",
"label": "Product Input"
},
{
"type": "header",
"content": "Give Me A Product!",
"info": "The value of visible_if_example_2 is empty!",
"visible_if": "{{ section.settings.visible_if_example_2 == blank }}"
},
{
"type": "header",
"content": "Thank You For The Product!",
"info": "The value of visible_if_example_2 is not empty!",
"visible_if": "{{ section.settings.visible_if_example_2 != blank }}"
},
{
"type": "header",
"content": "It's A Specific Product!",
"info": "The value of visible_if_example_2 is a specific product!",
"visible_if": "{{ section.settings.visible_if_example_2== 'cool-shirt' }}"
},
{
"type": "header",
"content": "It's Not The Specific Product!",
"info": "The value of visible_if_example_2 is not the specific product!",
"visible_if": "{{ section.settings.visible_if_example_2 != blank and section.settings.visible_if_example_2 != 'cool-shirt' }}"
}
],
"presets": [
{
"name": "Visible If Demo"
}
]
}
{% endschema %}
Attached are some screenshots of my progress with the Text input demo.
First let’s observe the empty state:
Now, let me enter in any value:
Moving on, let’s do Blue
:
Adding some flair, I want Bluey
:
Finally, I have a single_line_text_field
metafield with a value of Blue
to be used later:
When I set my text input to use a dynamic data source of the above metafield, visible_if
for detecting at least ANY value seems to run fine. However, my metafield value is Blue
so I also expect the special messaging I had for Blue
:
In addition to the above, I noticed collection
and product
special input types are not in the supported list, however those do work as well if you use a manually set value and perform simple checks. Like the above, once you utilize a dynamic data source, things fall apart.
It seems to be some kind of accident that dynamic data sources are not working correctly with this feature. I intend to use visible_if
mostly for hiding and showing inputs based on actual values. However, I also wanted to leverage this feature for “warning” messages such as given settings having potentially conflicting values, or warning about a lack of value and what that means. I try to leverage dynamic data sources often, and I can the potential for mishap here.
Edited To Add:
It would be nice if we could access some deeper data. if I have a color
input I can check for a specific hex or if the value isn’t blank. It would be nice to be able to access color channel information like .red
.blue
.green
etc and create messaging from that data such as warning about color contract and ADA needs.