Part of our guide to Shopify Custom Sections: The Complete Guide.
The homepage is usually the first template a store owner wants to customize, and on an Online Store 2.0 theme it is one of the most flexible pages you have. This guide adds a custom section to the homepage from the theme editor, positions it around the sections your theme already ships (hero, featured collection, and so on), and covers what to do if the section you want does not appear in the menu.
The homepage template is templates/index.json. Anything you add here shows on your
storefront's front page and nowhere else — homepage placements do not spill onto
product or collection pages.
Step 1 — Open the homepage in the editor
Go to Online Store → Themes → Customize. The theme editor opens on the homepage by default, so you are already on the right template. The left sidebar lists the sections the theme placed there — commonly an image banner, a featured collection, and a rich-text block.
If you want a safety net, duplicate the theme first (Themes → ⋯ → Duplicate) and customize the copy, then publish it when the homepage looks right.
Step 2 — Add your section
Click Add section in the sidebar. The menu lists every section available on the
homepage: the theme's built-ins and any custom section whose {% schema %} includes
a presets block. Choose yours and it appears on the page.
If your custom section is missing from the list, check its schema. To show up in the "Add section" menu it needs a preset, and it must not be restricted away from the index template. A minimal, correct preset looks like this:
{% schema %}
{
"name": "Promo banner",
"tag": "section",
"settings": [
{ "type": "text", "id": "heading", "label": "Heading" }
],
"presets": [
{ "name": "Promo banner" }
]
}
{% endschema %}
The full build — markup, settings, and styles — is covered in How to create a custom section in Shopify.
Step 3 — Position it around the hero
Homepage order is largely about where the section sits relative to your hero. Drag the section in the sidebar to move it up or down; the preview updates live. A few patterns that work well:
- A trust or promo bar directly below the hero, so it is seen before the first scroll.
- A feature or benefits block between the featured collection and the footer.
- A newsletter or FAQ block near the bottom, catching visitors who scrolled the whole page.
Click the section to open its settings and fill them in, then Save.
Step 4 — Preview and refine
The homepage is the most-viewed page on most stores, so it is worth previewing on a phone. In the editor's top bar, switch the preview to the mobile view and confirm the section stacks cleanly — headings do not overflow, images are not cropped awkwardly, and buttons remain tappable. If the section needs mobile-specific spacing, see How to add custom CSS to a section.
A note on homepage-only content
Because the homepage is a single page with its own template, it is a natural home
for content that should appear once — a seasonal announcement, a founder's note,
a store-wide value proposition. Unlike a product or collection template (which
repeats across many pages), whatever you put in templates/index.json renders on the
front page alone. That makes the homepage a low-risk place to experiment with a new
section before rolling it out more widely. To place the same section elsewhere later,
see How to add a section to a page.
Keeping the homepage section on a theme update
Your homepage section — the file and the placement in index.json — lives in the
theme. That is the standard setup, with one caveat worth stating plainly: when you
install a new version of the theme or switch themes, Shopify publishes a fresh
copy of the theme's files. A custom section file that is not carried over cannot be
referenced, so the homepage placement, and the settings you configured, can be lost.
Two ways to protect it:
- Keep a documented list of custom files and re-apply them after each update, per Update your theme without losing customizations.
- Render the section from an app through a Theme App Extension, so a theme update or swap never touches it.
If the homepage section is central to your store, SectionGuard renders it from the app rather than your theme files, so it keeps its place on the homepage through every theme update.