Shopify custom sections: a no-code guide

You want a product story, a care guide, or a different layout below your homepage banner. Shopify custom sections can help, but “custom” might mean adjusting a section you already have, building one in an app, or commissioning new theme code. Start by deciding which of those jobs you actually need.

Short answer: Check your theme’s Add section menu first. If its layouts cannot express your design, consider a visual section builder. Code may still be needed when the theme’s structure or the behavior you want falls outside those tools.

What is the difference between a section, block, and template?

A section is a part of a page layout, such as a banner. A block is a smaller piece inside a section, such as a heading or button. Available blocks depend on the section and theme version; you cannot assume that a block offered in one section works in another. Shopify’s sections and blocks guide explains these relationships.

A template arranges sections for a type of page. Several products can use the same product template. Changing that template changes the layout for all of them, even though their product titles and images differ. Shopify’s template guide covers this shared behavior.

For example, suppose you want a care guide only on your linen shirts. Decide whether those products need a separate template before adding the guide to your default product layout. The first question is where the content belongs, not which editor looks easiest.

Should you use your theme, an app, or custom code?

Choose by the gap you need to fill: missing content, a missing layout, or missing behavior.

Approach	Choose it when	Check before you commit
Existing theme section	Its controls already cover your layout	Does it work on the intended template?
App-provided section or visual builder	You need another layout and want visual editing	How is it added to the theme, and what can you publish on your plan?
Custom theme development	You need behavior or controls the other options do not provide	Who will build, test, and maintain it?

Try the existing section with your real copy and images before installing anything. A layout that looks ordinary with placeholder content might be enough once it contains your product story. Write down the exact limitation if it is not: “I need the image above the text on mobile” is a more useful requirement than “make it more custom.”

App integrations differ. Shopify supports app blocks, app embeds, and apps that add theme code. An app block places app content in a compatible section or template; an app embed can provide an overlay or background functionality. A section app does not necessarily use the Apps tab. Follow the installation method documented for the app you choose. Shopify’s app integration guide explains the options.

How do you add a section without an app?

1. Open Online Store → Themes → Edit theme for the copy.
2. Use the top page selector to choose the intended template.
3. Click Add section and select an available layout.
4. Add your content, adjust its settings, and add supported blocks if needed.
5. Drag the section into position and click Save.

These are Shopify’s documented section-editing steps. Review the result with your actual content before deciding that you need another tool.

If this layout is for only one product or page, create an alternate template in a compatible theme and assign it to that item. Previewing an item with a template does not assign it. Also, the assignment menu in Shopify admin lists templates from the current live theme, so a template created only in your draft theme will not appear there yet. See creating and applying templates.

Why is your Shopify custom section not showing up?

First identify where it disappears: the section picker, the editor preview, or the storefront. Those symptoms point to different checks.

It is missing from Add section

• Check the integration type. For an app block, look in Apps within a compatible block or section picker. Some app blocks support only certain page types. Shopify documents these compatibility limits.
• Check the template and limits. JSON templates support up to 25 sections. A section can also be restricted to certain templates. Ask the developer whether either restriction applies; see Shopify’s JSON template reference.
• For a developer-built section, check its setup. A section file needs a schema preset to be offered through the editor. Its schema can also restrict placement with enabled_on or disabled_on. Send the developer the section schema reference rather than changing those rules at random.

It appears in the editor but not on the intended page

Confirm that you saved the layout and that the section is not hidden. Then check the page’s assigned template and the theme you are viewing. A preview of a duplicate theme is different from your published storefront. Compare the same page and template before troubleshooting the section’s design.

If the panel appears on several products unexpectedly, check whether they share the template you edited. That can be normal template behavior, rather than an app fault.

When will you still need code?

The flexible add-and-reorder workflow relies on the template supporting it. Shopify’s JSON templates let merchants manage sections in the editor. Older or customized Liquid templates may instead contain statically rendered sections, which merchants cannot remove or reorder in the same way. Shopify explains that distinction in its sections reference.

Ask a developer for help when the section needs behavior or editable controls that your chosen tools do not offer, or when the template itself needs restructuring. A visual builder’s compatibility claim does not remove Shopify’s placement rules.

Start with the smallest section that answers your shopper’s question. If your theme falls short, explore XO Builder with that specific layout in mind.