Guide · 6 steps · about 5 minutes
How to add a custom section to Shopify
A custom section is a single .liquid file in your theme. You do not need an app to add one: create the file in the code editor, paste the code, and it appears in the theme editor next to your theme's own sections. Here is the whole process, then the fixes for the three things that usually go wrong.
What you need
- A Shopify store and permission to edit its theme (store owner, or staff with Themes access).
- The section's code — one .liquid file ending in a {% schema %} tag. Write it yourself, generate it with Klorr, or take one from the marketplace.
- An Online Store 2.0 theme, if you want the section on pages other than the home page.
Step by step
Duplicate your theme first
In your Shopify admin, go to Online Store → Themes. Next to your current theme, open the … menu and choose Duplicate. Work on the copy, so your live store is untouched until you are happy.
Open the code editor
On the copy, open the … menu again and choose Edit code. The theme's folders — layout, sections, snippets, assets and the rest — are listed on the left.
Create the section file
In the sections folder, choose Add a new section (in the newer editor, the + next to the folder, then New file). Name it after what it does, such as countdown-banner. Shopify creates sections/countdown-banner.liquid with some sample code in it.
Paste your code and save
Select everything in the new file, replace it with your section's code — including the {% schema %} block at the end — and click Save. If Shopify shows an error, the fixes are below.
Add it in the theme editor
Go back to Themes and click Customize on the copy. Open the page you want — home, a product, a collection — and click Add section in the left sidebar. Your section is listed by the name in its schema.
Set it up and publish
Fill in the section's settings — text, images, colours — drag it into place and click Save. When the preview looks right, publish the copy from the Themes page.
A complete section to try
Paste this into a new section file to see the whole process work. It is a heading, a line of text and a button, each editable in the theme editor.
<div class="promo-{{ section.id }}">
<h2>{{ section.settings.heading | escape }}</h2>
<p>{{ section.settings.text | escape }}</p>
{% if section.settings.button_label != blank %}
<a href="{{ section.settings.button_link }}">{{ section.settings.button_label | escape }}</a>
{% endif %}
</div>
{% style %}
.promo-{{ section.id }} {
padding: 48px 20px;
text-align: center;
background: {{ section.settings.background }};
}
{% endstyle %}
{% schema %}
{
"name": "Promo banner",
"tag": "section",
"settings": [
{ "type": "text", "id": "heading", "label": "Heading", "default": "Free shipping this week" },
{ "type": "text", "id": "text", "label": "Text", "default": "On every order over $50." },
{ "type": "text", "id": "button_label", "label": "Button label", "default": "Shop now" },
{ "type": "url", "id": "button_link", "label": "Button link" },
{ "type": "color", "id": "background", "label": "Background", "default": "#f1ecfb" }
],
"presets": [{ "name": "Promo banner" }]
}
{% endschema %}When it doesn't work
The section isn't listed under Add section
The schema has no presets. Add "presets": [{ "name": "Countdown banner" }] to the schema. Also check for enabled_on or disabled_on, which limit where a section can go — and on a vintage theme, sections can only be added to the home page.
Shopify won't save the file
The error names the problem. "Invalid JSON in tag 'schema'" is a trailing comma, a single quote or a missing bracket. "Setting IDs must be unique" means two settings share an ID. Our free schema generator checks for both before you paste.
Changes don't show on the store
You are probably looking at the published theme while editing the copy. Preview the copy from the Themes page, or publish it once it is ready.
Why add a section without an app
- No monthly fee — the section is part of your theme, not a subscription.
- Nothing extra loads — an app's script can run on every page; a section's code only runs where the section is.
- It stays when apps go — uninstalling an app can leave gaps in the pages it built. A section file stays until you delete it.
Questions, answered
Can I add a custom section to Shopify without an app?
Yes. A section is a .liquid file in your theme's sections folder. Create it in Online Store → Themes → Edit code, paste the code, and add it from the theme editor. No app is involved.
Will my custom section survive a theme update?
Updating a theme to a new version brings over what you set in the theme editor, but not files you added in the code editor. Keep a copy of your section file and add it to the updated theme again.
Can I use the same section on several pages?
Yes, on an Online Store 2.0 theme you can add it to any template — each copy has its own settings — unless its schema limits where it can go.
How do I know if my theme is Online Store 2.0?
Open the theme editor and go to a product page. If you can click Add section there, the theme is 2.0. If sections can only be added to the home page, it is a vintage theme.
Where can I get the code for a custom section?
Write it yourself, pick a ready-made one on the Klorr marketplace, or describe what you want and let Klorr write it — Liquid, CSS, JavaScript and schema in one file.
Related
Liquid code generator
Describe a section in plain English and get Shopify Liquid code, a full schema and theme-editor settings. Works in any Online Store 2.0 theme. No app needed.
Section schema generator
Build the {% schema %} for a Shopify section — settings, blocks, presets — checked against the theme editor's rules. Copy valid JSON or a starter .liquid file.