Shopify custom section development

What a custom section is

A section is a self-contained file in the theme that defines its layout and the settings merchants can change, such as headings, images, colours and links. Sections can contain blocks: repeatable items such as rows in a comparison table or questions in an FAQ. Shopify's developer documentation notes that JSON templates can render up to 25 sections, each with up to 50 blocks, and that merchants can add, remove and reorder sections in the theme editor.

For a section to be addable from the theme editor, its schema must define presets. Without presets, it can exist in the theme but merchants cannot add it themselves.

Typical custom sections

Custom section or app

Designing settings your team can use

Keeping custom sections through theme updates

Because a custom section lives in its own file, it is less likely to conflict with a theme update than edits to the theme's existing files. Shopify's guidance on updating themes says code edits are included in the updated theme if they do not conflict, and otherwise need to be copied across, and it recommends saving a copy of customised code before updating. Keeping custom sections in clearly named separate files, listed in a customisation log, makes that check straightforward.

Signs of a well-built section

• Works on every template it is offered on

  Tested on the product, collection or page templates where it can be added.

• Uses the theme's styles

  Inherits fonts, colours and spacing so it looks native, not bolted on.

• Accessible markup

  Real headings, table markup for tables and keyboard-usable controls.

• Light

  No heavy scripts for features that only need layout.

Sections and product data together

Some custom sections show the same content everywhere, such as a delivery panel. Others need different content for each product, such as ingredients or measurements. For the second kind, the section can read from product metafields, so each product shows its own data while the layout stays consistent. Planning which approach each section uses avoids sections that must be edited product by product.