Build a Custom Shopify Section: No App Needed (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.

Understanding this structure lets you build anything.

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.

For more detail, see our guide on add a new section type in shopify from scratch.

<!-- 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

Common schema setting types

Type	Use for
`text`	Short text inputs
`textarea`	Longer text
`richtext`	Formatted text with bold/italic
`image_picker`	Let merchants pick an image
`url`	Links and button destinations
`color`	Color picker
`range`	Number slider (e.g., padding, font size)
`select`	Dropdown with predefined options
`checkbox`	Boolean toggle
`html`	Custom HTML input
`header`	Group label (not a real setting, just visual)

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.

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

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

Build a custom Shopify section by describing it to Fudge.

Try Fudge for Free

For a related approach, see 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 removes that barrier:

“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. No schema hunting, no Liquid syntax errors.

FAQ

What's the difference between a section and a snippet in Shopify?

A section is a self-contained block of content with its own schema, settings, and content - it appears in the Theme Editor as something the merchant can add and configure. A snippet is reusable Liquid code rendered via {% render 'snippet-name' %} - it has no schema and isn't merchant-editable. Use sections for merchant-configurable layouts; snippets for code reuse inside sections.

Why doesn't my new section appear in the Add section menu?

The schema is missing a presets array. A section is technically valid without presets but Shopify won't list it in the "Add section" dropdown. Add at least one entry: "presets": [{"name": "My Section"}] and it'll appear. (If you'd rather skip writing schema by hand, Fudge generates the section file — schema, presets, blocks, and Liquid — from a plain English description.)

Can I make a section that only works on certain page types?

Yes - in the schema add "enabled_on": { "templates": ["product"] } to allow only on product templates, or "disabled_on": { "templates": ["index"] } to hide it from the homepage. Useful for product-specific sections that don't make sense elsewhere.

Will my custom section break when I update the theme?

If you've kept your custom section in a separate file (not modified an existing theme file), it'll typically survive a theme update unchanged. The standard way to update Shopify themes preserves files in sections/ that aren't part of the official theme. Always test in a duplicate theme first regardless.

Can I use external libraries inside a section?

Yes - load them via <script src="..."> in the section HTML or in theme.liquid. The {% javascript %} block in a section can't import external scripts directly, only inline JS. For libraries used by multiple sections, loading once in theme.liquid is more efficient than loading per section.