How to Build a Custom Section in Shopify (2026)

Key takeaways

• Shopify sections are Liquid files in the sections/ folder with a {% schema %} block defining their settings.
• Settings defined in the schema automatically appear in the Theme Editor right panel.
• Add a presets key to the schema to make the section available in “Add section” without manual template editing.
• Fudge generates complete custom sections from a plain English description — including HTML, CSS, JavaScript, and schema.

Every section in the Theme Editor is a Liquid file with a schema. The schema is what makes it editable without code — it defines which settings appear in the right-hand panel, what type of input each setting is, and what the default values are.

How to create a custom section in Shopify

Step 1 - Duplicate your active theme. Online Store → Themes → three-dot menu → Duplicate.

Step 2 - Open the code editor on the duplicate theme.

Step 3 - Navigate to the sections/ folder.

Step 4 - Click the ”+” or “Add a new section” button. Name your section (e.g., custom-promo-banner). Shopify creates sections/custom-promo-banner.liquid.

Step 5 - Write your section content and schema.

The anatomy of a Shopify section

A section file has two main parts: HTML/Liquid content and a {% schema %} block.

<!-- The visible content -->
<div class="promo-banner" style="background-color: {{ section.settings.background_color }};">
  <div class="page-width">
    <p class="promo-banner__text">{{ section.settings.text }}</p>
    <a href="{{ section.settings.button_link }}" class="button">
      {{ section.settings.button_label }}
    </a>
  </div>
</div>

{% schema %}
{
  "name": "Promo Banner",
  "settings": [
    {
      "type": "text",
      "id": "text",
      "label": "Banner text",
      "default": "Free shipping on orders over $50"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background color",
      "default": "#000000"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button label",
      "default": "Shop Now"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button link"
    }
  ],
  "presets": [
    {
      "name": "Promo Banner"
    }
  ]
}
{% endschema %}

How schema settings work:

• "type" — the input type (text, color, url, image_picker, select, range, etc.)
• "id" — the variable name used in Liquid: {{ section.settings.text }}
• "label" — what appears in the Theme Editor
• "default" — the initial value when first added

For a longer walkthrough, see how to add a new section type in Shopify.

Common schema setting types

Adding blocks — repeating elements

Blocks let merchants add repeating content — testimonials, FAQs, feature items. Each block has its own schema.

{% for block in section.blocks %}
  <div class="testimonial" {{ block.shopify_attributes }}>
    <p>{{ block.settings.quote }}</p>
    <cite>{{ block.settings.author }}</cite>
  </div>
{% endfor %}

In the schema, add a "blocks" key:

"blocks": [
  {
    "type": "testimonial",
    "name": "Testimonial",
    "settings": [
      {
        "type": "textarea",
        "id": "quote",
        "label": "Quote"
      },
      {
        "type": "text",
        "id": "author",
        "label": "Author name"
      }
    ]
  }
],
"max_blocks": 6

{{ block.shopify_attributes }} is required for the Theme Editor to recognize each block and allow editing.

Making your section appear in “Add section”

The "presets" key in the schema is what makes your section appear in the Theme Editor’s “Add section” menu. Without presets, the section only works if manually added to a template JSON file.

A preset can also add starting blocks. For the testimonials section from the blocks example above, this preset adds one testimonial when the section is added:

"presets": [
  {
    "name": "Testimonials",
    "blocks": [
      {
        "type": "testimonial"
      }
    ]
  }
]

The "name" in presets is the label that appears in the “Add section” menu.

For more on blocks, see how to add blocks to a Shopify section.

Adding CSS and JavaScript to a section

Use {% stylesheet %} and {% javascript %} blocks at the bottom of the section file (after the schema):

{% stylesheet %}
  .promo-banner {
    padding: 12px 0;
    text-align: center;
  }

  .promo-banner__text {
    font-size: 14px;
    margin: 0 0 8px;
  }
{% endstylesheet %}

{% javascript %}
  // Section-specific JavaScript here
  // Automatically bundled and deferred by Shopify
{% endjavascript %}

Shopify bundles all section stylesheets and scripts automatically — you don’t need to create separate CSS or JS files for simple sections.

Using Fudge to generate custom sections

Building sections manually requires understanding Liquid, JSON schema syntax, and Shopify’s section architecture. Fudge, the AI operator for Shopify stores, removes that barrier. Describe the section in its store editor:

“Build a testimonials section with a heading, subtitle, and up to 6 testimonial blocks. Each block should have a quote (text area), author name, author title, and star rating (1-5 range). Show them in a 3-column grid on desktop, 1 column on mobile.”

Fudge generates the complete section file — HTML, schema, CSS, and JavaScript — as a draft for review. It reads your theme first, so the section uses your fonts, colors and spacing, and it keeps working if you ever uninstall Fudge.

FAQ