What is Shopify Schema? A Beginner's Guide with Examples

🧠 What is Shopify Schema?

In a Shopify theme, a schema is a block of JSON (inside Liquid files) that defines settings, blocks, presets, and how they appear in the theme editor. It allows store admins to customize content without editing code.

You write the schema inside {% schema %} ... {% endschema %} tags in .liquid files (like inside sections/).

---

🧩 Example: A Basic Section Schema

{% schema %}
{
  "name": "Banner",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading Text",
      "default": "Welcome to our store"
    },
    {
      "type": "image_picker",
      "id": "banner_image",
      "label": "Banner Image"
    }
  ],
  "presets": [
    {
      "name": "Default Banner",
      "category": "Custom"
    }
  ]
}
{% endschema %}

🔍 Let’s break this down:

Part	Meaning
"name"	The label shown in the theme editor sidebar.
"settings"	An array of inputs (text, image, checkbox, etc.) users can fill in.
id	The key you reference inside .liquid file, like section.settings.heading
"presets"	Default configuration when the section is added from theme editor.

---

🛠 Common type values inside settings

Type	Purpose
"text"	Single-line input
"textarea"	Multi-line input
"checkbox"	Toggle true/false
"image_picker"	Upload/select an image
"color"	Color picker
"url"	URL link input
"select"	Dropdown list

---

🧱 Blocks inside Schema (For Repeating Content)

You can add blocks if you want multiple repeated items (like features, FAQs, testimonials):

{% schema %}
{
  "name": "FAQs",
  "settings": [],
  "blocks": [
    {
      "type": "faq",
      "name": "FAQ item",
      "settings": [
        {
          "type": "text",
          "id": "question",
          "label": "Question"
        },
        {
          "type": "textarea",
          "id": "answer",
          "label": "Answer"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "FAQ Section"
    }
  ]
}
{% endschema %}

🧾 Usage in Liquid:

{% for block in section.blocks %}
  <h3>{{ block.settings.question }}</h3>
  <p>{{ block.settings.answer }}</p>
{% endfor %}

---

🛎 Where do you use schema?

• Inside sections/ (like hero.liquid, testimonial.liquid)
• Sometimes inside templates/ like product.json, index.json (for layout structure)

---

🧠 Summary

Concept	Description
settings	Custom fields for the section
blocks	Repeatable sets of fields
presets	Default setup shown in theme editor
Used in...	.liquid files in /sections/ or /templates/