Theme sections
Editable storefront blocks a merchant can add, configure, and rearrange without touching the theme code.
See it
What it is
Theme sections are merchant-editable chunks of a storefront page: hero, featured collection, image with text, testimonials. A section owns its settings and may contain smaller repeatable blocks, while the page template stores their order. Shopify's Online Store 2.0 made this section model available across storefront templates, not just the home page.
Reach for sections when a merchant needs to rearrange campaigns, swap copy, or publish a seasonal landing page without asking a developer to edit code. Give each section one clear job and a small set of useful controls. A visual editor becomes harder than code when every margin, font size, and pixel is exposed as a setting.
Gotcha: setting and block IDs become stored content once merchants use them. Rename or remove those IDs in a theme update and existing pages can lose their values. Treat the schema as a public interface, preserve old IDs, provide sensible defaults, and set block limits so one section cannot grow into an unmanageable page.
Ask AI for it
Build a Shopify Online Store 2.0 section named 'Featured collection' in Liquid. Define its `{% schema %}` with stable setting IDs for heading, collection, products_to_show, color_scheme, and show_view_all, plus a `presets` entry so merchants can add it from the theme editor. Render the chosen collection as a responsive product grid, cap products_to_show at 12, and show an editor placeholder when no collection is selected. Apply `block.shopify_attributes` to any repeatable blocks, use Shopify image_url and image_tag filters for responsive images, and keep all copy and layout choices editable through the schema instead of hard-coding campaign content.