How to add a custom section to a Shopify theme

Adding a custom section to a Shopify theme means creating one new file in the theme’s sections folder, giving it a schema so the theme editor can show it, and then dropping it onto a page like any built-in block. That is the whole shape of it, and once you have done it once the mystery goes away, because a section is just a template file with a small block of settings attached. This walks through it the way we actually do it on client stores, including the part most tutorials skip, the schema choices that decide whether a non-developer can ever touch the thing again.

Why bother when apps exist, the same reason from our app-replacement work, a section you own loads faster and costs nothing monthly, where the app that does the same display job rents you the feature and slows every page to do it. A custom section is the native alternative, and it is a smaller job than it sounds.

Where the file goes

Open the theme’s code, the Edit Code screen under the theme menu, and look for the sections folder. Everything Shopify renders as a movable block lives there, one .liquid file per section. To add your own you create a new file in that folder, name it something clear like trust-badges.liquid, and Shopify immediately treats it as a section it can place. The name you choose is the name you will see later, so a vague section-1.liquid is a gift to your future confusion, and a plain descriptive name is worth the two seconds.

Inside the file are two parts. The top is ordinary Liquid and HTML, the markup that renders on the page, the same language the rest of the theme is written in. The bottom is the schema, a small block of settings wrapped in a {% schema %} tag, and that block is what turns a chunk of code into something a merchant can edit from the theme editor without ever seeing the code again.

The schema is the whole trick

The markup is the easy half. The schema is where a section becomes usable or useless, because it defines every knob the editor shows and every default the section ships with. A minimal one looks like this.

{% schema %}
{
  "name": "Trust Badges",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading",
      "default": "Why shop with us" }
  ],
  "presets": [ { "name": "Trust Badges" } ]
}
{% endschema %}

Three things in there matter more than they look. The presets block is what makes the section appear in the add-section menu at all, and leaving it out is the commonest reason a new section never shows up. The default on each setting is what stops the section installing empty and looking broken before anyone types anything. And the setting types, text, image, color, and the rest, are what decide whether a merchant gets a proper color picker or a confusing raw field. Get those right and the section is genuinely editable, get them wrong and you have built another thing only a developer can change, which was the problem you were trying to solve.

The way to check it works

There is one habit that catches almost every mistake, and it costs five minutes. Save the file, open the theme editor, add the section to a page, and click through every setting you defined. If the section shows up in the menu, installs looking complete, and every knob does what its label promises, it works. If it does not appear, the presets are missing. If it looks broken on arrival, a default is absent. Doing this on a duplicate of the theme rather than the live one means a shopper never sees a half-built section, and the custom-section economics only work if the thing is solid before it goes live.

When to let an agent write it

Writing the Liquid and the schema by hand is a real skill, and in 2026 it is also a job a coding agent does well, which our section-with-Claude-Code guide covers in full. Hand the agent an existing section from your theme as the example to match, describe the section you want and its editable fields, and it produces the file. The catch is the same schema list above, an agent will miss a preset or a default too, so the click-through review is exactly as necessary, and Shopify’s own move toward agent-legible themes is making this smoother by the month. The skill shifts from typing the code to knowing what a good section owes the person who edits it later.

FAQ

Where do Shopify sections live?

In the theme’s sections folder, reached through Edit Code under the theme menu. Each movable block is one .liquid file there. To add your own, create a new file in that folder with a clear name, and Shopify treats it as a section right away.

What makes a section editable?

The schema, a {% schema %} block at the foot of the file. It defines the settings the editor shows, their types, and their defaults. Without a proper schema the code renders but nobody can edit it without opening the file.

Why does my new section not appear?

Almost always a missing presets block in the schema. That block is what puts a section in the add-section menu. Add it, save, and the section shows up ready to place on any page.

Do I need an app to add a section?

No, a section is native theme code with no app or fee. Apps that only display something are the ones a section replaces, loading faster and costing nothing monthly rather than renting the feature.

Can AI write a Shopify section?

Yes, well, when given a real section from your theme as the example to match. It still misses the odd preset or default, so the theme-editor click-through review stays necessary. The judgment moves from typing to reviewing.

Want a custom section built and installed clean, schema and review included? Send me the store and I will scope the first one. Free look, no obligation, usually a reply within the hour.