Creating Conditional Spacing Controls in Shopify Theme Section Configuration

[scarlettturner]

I’m working on a Shopify theme and trying to set up spacing controls that can switch between simple and advanced modes.

What I want to achieve:

• Basic mode: One setting that controls spacing for all sides of a section
• Advanced mode: Separate controls for each side (top, right, bottom, left)
• The advanced controls should only show up when the user enables them

My current setup:

{
  "type": "number",
  "id": "section_spacing",
  "label": "Section Spacing (All Sides)",
  "min": 0,
  "max": 80,
  "step": 4,
  "default": 16
},
{
  "type": "checkbox",
  "id": "use_custom_spacing",
  "label": "Use Custom Spacing Per Side",
  "default": false
},
{
  "type": "number",
  "id": "spacing_top",
  "label": "Top Spacing",
  "default": 16,
  "hidden": "{{ section.settings.use_custom_spacing == false }}"
},
{
  "type": "number",
  "id": "spacing_right",
  "label": "Right Spacing",
  "default": 16,
  "hidden": "{{ section.settings.use_custom_spacing == false }}"
},
{
  "type": "number",
  "id": "spacing_bottom",
  "label": "Bottom Spacing",
  "default": 16,
  "hidden": "{{ section.settings.use_custom_spacing == false }}"
},
{
  "type": "number",
  "id": "spacing_left",
  "label": "Left Spacing",
  "default": 16,
  "hidden": "{{ section.settings.use_custom_spacing == false }}"
}

The problem: The individual spacing controls aren’t hiding when the checkbox is unchecked. It seems like the hidden property isn’t working the way I expected.

Has anyone figured out how to make section settings appear and disappear based on other settings? Is there a different way to handle this in Shopify themes?

[Neo_Stars]

I hit this same problem a few months ago building a custom theme. Shopify’s hidden property doesn’t support conditional logic based on other settings - what you’re trying with {{ section.settings.use_custom_spacing == false }} won’t work in the schema. I handled it in the liquid template instead of hiding settings in the admin. Keep all spacing controls visible in the theme editor, but use conditional logic in your section template to decide which values to actually use. Something like {% if section.settings.use_custom_spacing %}{{ section.settings.spacing_top }}{% else %}{{ section.settings.section_spacing }}{% endif %} for each side. Not as clean UX-wise since merchants see all controls, but I added clear labels explaining when each setting gets used. Shopify’s section settings just aren’t built for dynamic field visibility.