如何在Shopify Liquid的Schema中分类主题设置并添加子标题

Hey there! Organizing your Shopify theme's settings schema into logical groups is key to keeping things clean and user-friendly—no more scrolling through a jumbled list of options. Let me walk you through exactly how to add those clean subheadings like "Logo Settings" and "Top Block Settings" using Shopify's native schema structure.

The Core Concept: Using groups in settings_schema.json #

Shopify's theme settings system lets you group related settings under custom subheadings via the groups property inside your schema sections. Each group gets a name (your subheading) and a settings array where you'll add all the related configuration options.

Full Example Code #

Here's a complete, working example that adds both "Logo Settings" and "Top Block Settings" under a main "Header Settings" tab:

[
  {
    "name": "Header Settings",
    "tab": "header",
    "groups": [
      {
        "name": "Logo Settings",
        "settings": [
          {
            "type": "image_picker",
            "id": "header_logo",
            "label": "Upload Logo",
            "info": "Recommended size: 200x80px for best display"
          },
          {
            "type": "text_field",
            "id": "logo_alt_text",
            "label": "Logo Alt Text",
            "default": "Store Logo"
          },
          {
            "type": "range",
            "id": "logo_max_width",
            "label": "Logo Max Width",
            "min": 100,
            "max": 300,
            "unit": "px",
            "default": 200
          }
        ]
      },
      {
        "name": "Top Block Settings",
        "settings": [
          {
            "type": "checkbox",
            "id": "show_top_block",
            "label": "Show Top Notification Block",
            "default": true
          },
          {
            "type": "color",
            "id": "top_block_background",
            "label": "Background Color",
            "default": "#f8f9fa"
          },
          {
            "type": "text_field",
            "id": "top_block_text",
            "label": "Block Text",
            "default": "Free shipping on orders over $50!"
          },
          {
            "type": "url",
            "id": "top_block_link",
            "label": "Link to Collection/Page",
            "default": "/collections/all"
          }
        ]
      }
    ]
  }
]

Breakdown of Key Components #

• tab: This assigns the entire section to a main tab in the theme editor (e.g., "header" will show up under the Header tab).
• groups: An array of your custom subheading groups. Each group has:
  • name: The visible subheading text (like "Logo Settings") that organizes the settings below it.
  • settings: An array of individual configuration options relevant to the group. Each setting uses standard Shopify schema types (e.g., image_picker, color, text_field) with required fields like id, label, and optional extras like default or info.

Pro Tips for Clean Organization #

• Group settings by functionality (e.g., all logo-related options go under "Logo Settings") to make it intuitive for users.
• Use the info field to add helpful hints (like recommended image sizes) for each setting.
• If you need more high-level organization, split settings into different tab sections (e.g., "Footer", "Product Pages") and add groups within each tab.

内容的提问来源于stack exchange，提问作者Matt