Drop-in containers

Drop-ins overview covers the three parts of a drop-in: the npm package, the initializer, and containers. This page covers containers: what they are, how they differ from shared SDK components, and how a block renders one.

What is a container?

A container is a complete, pre-built UI feature that a drop-in package exports, so you can add working UI without building it yourself. CartSummaryList, for example, is a container the Cart drop-in exports from @dropins/storefront-cart/containers/CartSummaryList.js. Unlike a standard UI component, a container manages its own Commerce data and state: it fetches, syncs, and renders markup for its part of the drop-in.

One drop-in package exports several containers, each covering one piece of that drop-in’s feature. Cart, for example, exports containers for cart summary, mini cart, coupons, and shipping. Each drop-in has its own containers reference page, which lists every container it exports, along with the props and slots each one supports. For example, see Cart containers .

Containers compared to SDK components

A container is not the same as a shared SDKThe Drop-in SDK used to build custom drop-ins and related integration logic. component like Button, Image, or PriceRange from @dropins/tools/components.js. Those components are presentation-only: they render UI but hold no Commerce data or state of their own. Internally, a container is typically built from several of them. Use a container for a complete, drop-in-provided feature with less code to write and maintain. Use SDK components directly when you’re composing a custom block. See Build custom features for that pattern.

How containers reach the page

A commerce block mounts a container the same way regardless of which drop-in it comes from:

Loading diagram...

A commerce block imports a container and that drop-in's render provider from the same npm package, then mounts the container into the block's DOM.

The block’s decorate() function imports the container plus the render providerThe render function exported by a drop-in package that mounts containers into a storefront block. from that drop-in’s own render.js, then calls provider.render(Container, props)(block) to mount it. Connect a drop-in walks through that three-line pattern in full, and Blocks and drop-ins shows it in a complete block file.

Each drop-in exports its own render provider

The render provider a container uses comes from that drop-in’s own package (@dropins/storefront-*/render.js), not from @dropins/tools/components.js. If you’re rendering shared SDK components instead of a container, you import provider.render() from @dropins/tools/components.js. See Build custom features.

What you can customize

Every container accepts props to configure its behavior. Check that drop-in’s containers reference page for the specific props each one supports. Most containers also expose slots for adding or replacing pieces of their UI. See Slots for extension points and Styling for restyling with design tokens and CSS classes.

What’s next

Now that you know what a container is, Connect a drop-in shows the three-step pattern — import the initializer, import a container, render it — with a complete working example.