🧭 How to Add Section Schema for Theme Editor Customization

The section schema is the backbone of every customizable Shopify section. It powers the Theme Editor controls like text inputs, color pickers, image uploads, product selectors, and more.

In this tutorial, you'll learn exactly how to add schema to any section so merchants can customize it visually inside the Shopify Theme Editor — no coding required from their side.

---

✨ What You’ll Learn

• How schema works in Shopify 2.0
• How to add settings (text, color, images, ranges, selects)
• How to add blocks for repeatable content
• How to output section settings into HTML
• Advanced schema tips

---

🧱 Step 1 — Create a New Section File

Go to:

Online Store → Themes → Edit Code

Then create:

sections/custom-schema-section.liquid

Add a simple wrapper div to test:

<div class="custom-schema-section">
  <h2>{{ section.settings.heading }}</h2>
  <p>{{ section.settings.text }}</p>
</div>

---

🧱 Step 2 — Add Basic Schema Settings

Below your HTML, add the schema tag:

<!-- Section Schema -->
{% schema %}
{
  "name": "Custom Schema Section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Your Section Heading"
    },
    {
      "type": "textarea",
      "id": "text",
      "label": "Section Text",
      "default": "This is an example of section description text."
    }
  ]
}
{% endschema %}

This gives you two editable fields in the Theme Editor.

---

🧱 Step 3 — Add More Setting Types

You can add many useful inputs:

{
  "type": "color",
  "id": "bg_color",
  "label": "Background Color",
  "default": "#f4f4f4"
},
{
  "type": "image_picker",
  "id": "image",
  "label": "Featured Image"
},
{
  "type": "range",
  "id": "padding",
  "min": 20,
  "max": 120,
  "label": "Section Padding",
  "default": 50
},
{
  "type": "select",
  "id": "text_align",
  "label": "Text Alignment",
  "default": "center",
  "options": [
    { "value": "left", "label": "Left" },
    { "value": "center", "label": "Center" },
    { "value": "right", "label": "Right" }
  ]
}

Add these inside the "settings" array.

---

🧱 Step 4 — Output the Settings in Your HTML

Use Liquid to apply the values:

<div
  class="custom-schema-section"
  style="
    background: {{ section.settings.bg_color }};
    padding: {{ section.settings.padding }}px;
    text-align: {{ section.settings.text_align }};
  "
>

  {% if section.settings.image %}
    <img src="{{ section.settings.image | image_url }}" alt="Section Image" style="max-width:100%; margin-bottom:20px;">
  {% endif %}

  <h2>{{ section.settings.heading }}</h2>
  <p>{{ section.settings.text }}</p>

</div>

Now the section updates live as settings change in the theme editor!

---

🧱 Step 5 — Add Blocks (Optional but Powerful)

Blocks allow repeatable content like features, steps, FAQs, testimonials, etc.

Add this inside your schema:

"blocks": [
  {
    "type": "feature",
    "name": "Feature Item",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Title"
      },
      {
        "type": "textarea",
        "id": "description",
        "label": "Description"
      }
    ]
  }
],
"max_blocks": 6

Output block content like this:

{% for block in section.blocks %}
  <div class="feature-block">
    <h3>{{ block.settings.title }}</h3>
    <p>{{ block.settings.description }}</p>
  </div>
{% endfor %}

---

💡 Advanced Tips

• Use "info" setting type to show notes inside the editor
• Use "header" to group settings visually
• Use "checkbox" for toggles (show/hide sections)
• Use CSS variables to let merchants customize colors, spacing, or fonts dynamically

---

🚀 Final Result

After finishing this tutorial, you now know how to:

• Add a full schema to any Shopify section
• Create fully customizable Theme Editor settings
• Add blocks for flexible repeatable content
• Connect settings to your frontend using Liquid

This is the foundation for all Shopify 2.0 theme development — mastering schema unlocks everything else!

---