MDFoysalahmed
November 26, 2024
212 views
0 votes
2 Answers

I’m developing a custom Shopify theme and need to give merchants control over padding and margin values for sections, but I want to balance flexibility and ease of use.

Global Padding/Margin: The basic requirement is to allow merchants to set a global padding or margin value for the whole section.
Individual Padding/Margin: For more advanced control, I want merchants to be able to adjust padding and margin for individual sides (top, bottom, left, right).
My current problem is that I want the "Individual Padding/Margin" options to be shown conditionally based on whether the merchant has enabled this option. When they enable it, individual controls for each side should appear.

I’ve set up the following schema to control global padding and an "Enable Individual Padding" checkbox. However, I’m facing difficulty hiding the individual padding controls based on whether this checkbox is checked.

Here is the code I have so far:

{
  "type": "number",
  "id": "global_padding",
  "label": "Global Padding (Top, Bottom, Left, Right)",
  "min": 0,
  "max": 100,
  "step": 5,
  "default": 20
},
{
  "type": "checkbox",
  "id": "enable_individual_padding",
  "label": "Enable Individual Padding (Top, Bottom, Left, Right)",
  "default": false
},
{
  "type": "number",
  "id": "top_padding",
  "label": "Top Padding",
  "default": 20,
  "hidden": "{{ section.settings.enable_individual_padding == false }}"
},
{
  "type": "number",
  "id": "bottom_padding",
  "label": "Bottom Padding",
  "default": 20,
  "hidden": "{{ section.settings.enable_individual_padding == false }}"
},
{
  "type": "number",
  "id": "left_padding",
  "label": "Left Padding",
  "default": 20,
  "hidden": "{{ section.settings.enable_individual_padding == false }}"
},
{
  "type": "number",
  "id": "right_padding",
  "label": "Right Padding",
  "default": 20,
  "hidden": "{{ section.settings.enable_individual_padding == false }}"
}

Issue:
The hidden property doesn’t seem to work as expected in the Shopify section schema.
The "Enable Individual Padding" checkbox doesn’t conditionally show or hide the individual padding inputs.
What I’m Looking For:
A correct approach to conditionally show or hide input fields (for individual padding controls) based on another setting (the checkbox).
If Shopify’s schema doesn’t support the "hidden" property as expected, how can I achieve this functionality?
Any references or resources that explain how to manage conditional visibility of settings in Shopify sections would be appreciated.

Any Help or Suggestions?

Tags: shopify

Answers

you can achieve the desired functionality through a combination of schema organization and custom JavaScript.

Group Settings in Shopify Schema

{
      "name": "Padding and Margin Settings",
      "settings": [
        {
          "type": "number",
          "id": "global_padding",
          "label": "Global Padding (All Sides)",
          "min": 0,
          "max": 100,
          "step": 5,
          "default": 20
        },
        {
          "type": "checkbox",
          "id": "enable_individual_padding",
          "label": "Enable Individual Padding (Top, Bottom, Left, Right)",
          "default": false
        },
        {
          "type": "header",
          "content": "Individual Padding Settings"
        },
        {
          "type": "number",
          "id": "top_padding",
          "label": "Top Padding",
          "default": 20
        },
        {
          "type": "number",
          "id": "bottom_padding",
          "label": "Bottom Padding",
          "default": 20
        },
        {
          "type": "number",
          "id": "left_padding",
          "label": "Left Padding",
          "default": 20
        },
        {
          "type": "number",
          "id": "right_padding",
          "label": "Right Padding",
          "default": 20
        }
      ]
    }

Use JavaScript in Theme Editor

 document.addEventListener('DOMContentLoaded', () => {
      // Watch for changes to the enable_individual_padding checkbox
      const toggleIndividualPadding = () => {
        const isChecked = document.querySelector('[id*="enable_individual_padding"]').checked;
        const individualPaddingFields = [
          'top_padding',
          'bottom_padding',
          'left_padding',
          'right_padding'
        ];
        
        individualPaddingFields.forEach(id => {
          const field = document.querySelector([id*="${id}"]);
          if (field) {
            field.closest('.shopify-editor__row').style.display = isChecked ? 'block' : 'none';
          }
        });
      };
    
      // Initialize the visibility state
      toggleIndividualPadding();
    
      // Add event listener to the checkbox
      const checkbox = document.querySelector('[id*="enable_individual_padding"]');
      if (checkbox) {
        checkbox.addEventListener('change', toggleIndividualPadding);
      }
    });

You just need to use the CSS & the schema settings value.
Please check the below sample schema & CSS. I used the .section-{{ section.id }}-padding as the selector, so please add the class at the top for the div element.

{
  "type": "header",
  "content": "Desktop Padding Top/Bottom"
},
{
  "type": "range",
  "id": "padding_top",
  "min": 0,
  "max": 100,
  "step": 4,
  "unit": "px",
  "label": "Padding Top",
  "default": 40
},
{
  "type": "range",
  "id": "padding_bottom",
  "min": 0,
  "max": 100,
  "step": 4,
  "unit": "px",
  "label": "Padding Bottom",
  "default": 52
},
{
  "type": "header",
  "content": "Mobile Padding"
},
{
  "type": "range",
  "id": "mobile_padding_top",
  "min": 0,
  "max": 100,
  "step": 4,
  "unit": "px",
  "label": "Padding Top",
  "default": 36
},
{
  "type": "range",
  "id": "mobile_padding_bottom",
  "min": 0,
  "max": 100,
  "step": 4,
  "unit": "px",
  "label": "Padding Bottom",
  "default": 36
}

CSS:

.section-{{section.id }}-padding {padding-top: {{section.settings.mobile_padding_top }}px;padding-bottom: {{section.settings.mobile_padding_bottom }}px;}@media screen and (min-width: 750px) and (max-width: 1199px) {.section-{{section.id }}-padding {padding-top: {{section.settings.tab_padding_top }}px;padding-bottom: {{section.settings.tab_padding_bottom }}px;}}@media screen and (min-width: 1200px) {.section-{{section.id }}-padding {padding-top: {{section.settings.padding_top }}px;padding-bottom: {{section.settings.padding_bottom }}px;}}

Please signup or login to give your own answer.

Click here to cancel reply.

How to Implement Dynamic Padding/Margin Control in Shopify Section Settings?

Any Help or Suggestions?

Answers