'visible_if' concerns

Online Store and Theme Development
1

Short description of issue

‘visible_if’ concerns

Reproduction steps

N/A

Additional info

I’ve seen many posts here and messages on slack around the new visible_if option with theme/section settings.

Personally, I don’t think this should be available, it’s not clear what it actually works with, it randomly doesn’t seem to work. I just think its a huge mess.

I’m currently trying to use the following which just doesn’t work. Media type’s default selection is image yet none of the image settings show up, if I changed to video, nothing shows. So these conditional settings just aren’t visible whatsoever.

What type of topic is this

General discussion

2

Hey @Luke,

Really weird, it works for me:

image
image596×611 87.6 KB

{
  "type": "header",
  "content": "Media"
},
{
  "type": "select",
  "id": "media_type",
  "label": "Type",
  "options": [
    {
      "value": "image",
      "label": "Image"
    },
    {
      "value": "video",
      "label": "Video"
    }
  ]
},
{
  "type": "image_picker",
  "id": "mobile_image",
  "label": "Mobile",
  "info": "Minimum width recommended: 768px",
  "visible_if": "{{ section.settings.media_type == 'image' }}"
},
{
  "type": "image_picker",
  "id": "desktop_image",
  "label": "Desktop",
  "info": "Minimum width recommended: 1920px",
  "visible_if": "{{ section.settings.media_type == 'image' }}"
},
{
  "type": "video",
  "id": "mobile_video",
  "label": "Mobile",
  "info": "Minimum width recommended: 768px",
  "visible_if": "{{ section.settings.media_type == 'video' }}"
},
{
  "type": "video",
  "id": "desktop_video",
  "label": "Desktop",
  "info": "Minimum width recommended: 1920px",
  "visible_if": "{{ section.settings.media_type == 'video' }}"
},
{
  "type": "header",
  "content": "Video settings",
  "visible_if": "{{ section.settings.media_type == 'video' }}"
},
{
  "type": "checkbox",
  "id": "autoplay",
  "label": "Autoplay",
  "default": false,
  "info": "Videos will be muted by default",
  "visible_if": "{{ section.settings.media_type == 'video' }}"
},
{
  "type": "checkbox",
  "id": "loop",
  "label": "Loop video",
  "default": true,
  "visible_if": "{{ section.settings.media_type == 'video' }}"
},
{
  "type": "checkbox",
  "id": "show_controls",
  "label": "Show controls",
  "default": false,
  "visible_if": "{{ section.settings.media_type == 'video' }}"
},
{
  "type": "checkbox",
  "id": "show_play_pause",
  "label": "Show play/pause button",
  "default": true,
  "visible_if": "{{ section.settings.media_type == 'video' }}"
},