Storefronts

Work with Sections, Droplets, and Templates

2 min readUpdated 2026-07-25

Work with Sections, Droplets, and Templates

Every page of your storefront is assembled from building blocks. Understanding the three types — sections, droplets, and templates — helps you customize pages confidently in the editor. This article explains what each one is and how they work together.

Droplets: Universal Building Blocks

A droplet is a reusable component you can drop onto any page, in any theme. Droplets are grouped into categories:

  • Commerce — product grids, add-to-cart, and shopping features.
  • Content — text, images, and rich media blocks.
  • Layout — spacers, columns, and containers.
  • Navigation — menus and links.
  • Marketing — promos and calls to action.
  • Social — social links and feeds.
  • Because droplets are shared across all themes, they look consistent no matter which theme you use.

    Sections: Theme-Specific Blocks

    A section belongs to a specific theme and uses that theme's colors and fonts. Sections are the hero banners, product showcases, and footers that give a theme its signature look. Unlike droplets, sections inherit your theme settings automatically, so changing a theme color updates them everywhere.

    Templates: What Appears on Each Page

    A template defines the layout of a page type — for example, your homepage, a product page, or a collection page. It lists every section and droplet on that page along with where each one sits.

  • Each page type (homepage, product, collection, and more) has its own template.
  • The template controls the order and position of every block.
  • Editing a template changes the layout for all pages of that type.
  • Build a Page in the Editor

  • Open your storefront's editor.
  • Choose the page you want to work on.
  • Add sections or droplets from the sidebar and arrange them on the canvas.
  • Click any block to open its settings and adjust its content, colors, and options.
  • Save to publish your layout changes.
  • Universal Pages

    Some pages — cart, checkout, account, login, register, and order confirmation — use built-in universal components that work identically across every theme. These are locked so their behavior stays reliable, ensuring shopping and checkout always work correctly.

    Next Steps

    To arrange these blocks visually, see Edit Your Storefront in the Editor.

    Was this article helpful?

    Let us know so we can improve our docs