Device Specific Settings

Online Store and Theme Development
1

Short description of issue

Provide a way to implement better device specific settings.

Reproduction steps

On the regular our merchants want device specific settings,
whether they be desktop / mobile or more granular in scope.

As far as I’m aware there is nothing to integrate with the device
toggle in the customizer nor anything in the schema that would
improve the situation.

The only thing I could think of was using the visible_if attribute
in combination with a ‘Device’ selection setting to selectively
show the related settings.

While that cuts down on the visual clutter it also introduces a real
setting that affects the ‘Saved’ state in the customizer & is either
a bit confusing since it’s not in sync with the customizer toggle.

Additional info

While I don’t believe anything will be done about this
anytime soon, I’d hope for one of the following things:

  • A way to check the customizer toggle state in the visible_if property
  • Device specific settings similar to how markets override settings
  • Mark a section setting to be visible / pinned in the block setting.
    ( You could add a select setting for the device in the section and
    use it to hide / show the related settings in the block ( Already possible )
    but without the confusion and annoyance of having to click back
    on the section element to switch between device )

What type of topic is this

Feature request

2

Hey @ShopNative - thanks for laying this out. The disconnect between the preview toggle and a separate “Device” setting can make responsive controls harder for merchants to manage.

You’re correct that theme schema can’t read the editor’s desktop/mobile preview toggle. visible_if only receives theme, section, and block setting values. The preview toggle is editor UI state that isn’t persisted or exposed to the schema. Shopify introduced conditional settings in this changelog entry.

For now, themes can define separate desktop and mobile settings and apply them using CSS media queries. Shopify’s Horizon reference theme uses this pattern in its Spacer block. A Device select or checkbox combined with visible_if can reduce sidebar clutter, but as you noted, it remains a real setting and won’t follow the editor’s preview toggle.

I’ve captured your feedback and I’m submitting it as a feature request covering access to the preview-device state, device-scoped setting overrides, and keeping relevant section controls available while editing a block. I can’t promise whether or when these options might be added, but the examples you provided help show where the current editing experience falls short.

Hope this helps!