Are there more advanced visible_if conditional logic techniques we can use within the section/block schema?

Online Store and Theme Development
,
1

Short description of issue

The new “visible_if” properties we can use within Block and Section schema is great but I am running into a lot of limitations and can’t seem to get around them. First, it doesn’t appear to be supported by all schema inputs (eg. Collection, Product, Blog select and URL fields). Second, we appear to be limited to straight up IF statements with very little flexibility.

Reproduction steps

  1. In your theme section or block schema, create a new input field
  2. add a “visible_if” attribute
  3. add your conditional logic like “{{ block.settings.some_other_field == ‘testing’ }}”

Additional info

Example use cases:

  1. Create a select input called “type” allowing you to choose Product, Collection, or Blog Post. Then create Product, Collection, and Blog selection inputs with something like “visible_if”: {{ block.settings.type == “Product” }} to show the correct one where needed. This doesn’t work since these inputs do not support the visible_if attribute for some reason. Works for other inputs though.
  2. Create a single URL field and then show fields with something like “visible_if”: {{ block.settings.url contains “/products/” }}. This works but cannot be combined with AND/OR and cannot be used to check false. Like you cannot do {{ ( this AND this ) OR this }} and cannot do {{ this contains “this” == false }}

I’m open to input on other ways I can do this. If not, this feels like a feature request.

What type of topic is this

Feature request
General discussion

2

Hello @Jeff_Nelon,

You can have more context here.

Shopify does not seem very receptive to changes regarding visible_if for now.

3

Quick update. I have found a hacky solution that accomplishes what I was going for. I am using the URL field and checking that for strings within that. Found out that any URL selected from the Product, Collection, Page, etc dropdown in that field is prefixed with “shopify://“ so you can use that to avoid false positives with plain urls that contain things like “collections“ for example. So, when I need to show collection related things I can do something like “{{ block.settings.url contains ‘shopify://collections/’ }}“ for when a collection is selected or “{{ block.settings.url == ‘shopify://collections’ }}“ when the all collections is collected.

This doesn’t work great for Blog vs Blog post since both URL strings contain “/blogs/“ so I’m still working on a work around for that.

As far as the AND/OR logic, I am kind of able to get the UI where I want to go using duplicate inputs where it shows on when condition 1 is true and the other where condition 2 is true. Then when rendering, I have to different inputs I need to reconcile but it does work. Just crazy to me that this level of hacking is needed for what should be a very basic feature.