Introduction to Drop-In Components

At this point in the onboarding path, you should already have a locally running boilerplate storefront. This page explains the drop-in system you’ll be working with — what every drop-in is made of, which drop-ins are available, and what you can customize. The next page, Using drop-ins, shows the code pattern you write in each block.

What is a drop-in component?

A drop-in component is a ready-made npm package that provides the complete user interface and Commerce logic for one shopper job — cart, checkout, product detail, user sign-in, and so on. The boilerplate ships with all B2C drop-ins pre-installed. You wire them up; you do not build them from scratch.

Anatomy of a drop-in

Every drop-in has three parts. Understanding these three parts is the key to reading and writing Commerce block code.

Part	What it is	Where you find it
npm package	The published code for that drop-in	node_modules/@dropins/storefront-* and package.json
Initializer	A JavaScript file that configures the drop-in once — sets the GraphQL endpoint, loads placeholder text, and registers the drop-in	scripts/initializers/<dropin>.js
Containers	The individual UI panels that the drop-in exposes for you to place on a page	Imported from @dropins/storefront-*/containers/

When you open a Commerce block file in the boilerplate, you will see all three of these parts: an import of the initializer, an import of a container, and a call that renders the container into a div on the page. Using drop-ins shows exactly how those three lines fit together.

The boilerplate already has this wired

If you are working from the Commerce boilerplate, the initializer files already exist in scripts/initializers/ and the npm packages are already installed. You can open any Commerce block to see a real example before you write your own.

Available drop-ins

The tables below list every available drop-in. Click a drop-in name to open its reference page, which includes its containers, props, slots, and events.

B2C drop-ins

Drop-in	Description
Cart	Summary of items in the cart; view and manage cart contents, update quantities, and proceed to checkout.
Checkout	Streamlined process for completing a purchase: shipping and payment information, order review, and confirmation.
Order	Tools and containers to manage and display order-related data across pages; supports customer accounts and guest workflows.
Payment Services	Renders the credit card form and Apple Pay button for payment details; supports credit/debit cards and Apple Pay.
Personalization	Displays content conditionally based on Adobe Commerce customer groups, segments, and cart price rules.
Product Details	Detailed product information: SKUs, pricing, descriptions, options; supports internationalization and accessibility.
Product Discovery	Search results, category listings, and faceted navigation so customers can find and explore products.
Recommendations	Suggests products from browsing patterns (e.g. “Customers who viewed this also viewed”); manageable from Adobe Commerce Admin.
User Account	Personalized experience: order history, account settings, and other account-related features.
User Authentication	Sign up, sign in, and log out; supports account confirmation, password reset, and optional ReCAPTCHA.
Wishlist	Lets guests and registered customers save products to purchase later.

B2B drop-ins

Business-to-business (B2B) drop-ins cover workflows such as company administration, negotiable quotes, and purchase orders. You wire them up with the same three parts as in Anatomy of a drop-in: npm package, initializer, and containers. Enable B2B features on your Commerce instance so the APIs and company data these packages expect are available.

Drop-in	Description
Company Management	Company profile management, role-based permissions, legal address and contact information.
Company Switcher	Switch between multiple companies a user is associated with; company context and GraphQL header management.
Purchase Order	Purchase order workflows, approval rules, and purchase order history for B2B transactions.
Quote Management	Negotiable quotes: request, negotiation, approval, and tracking for B2B customers.
Quick Order	Bulk ordering by SKU, search, and CSV upload; Grid Ordering for configurable products on PDP.
Requisition List	Create and manage requisition lists for repeat and bulk ordering; multiple lists per account.

What you can customize

Each drop-in exposes several layers of customization. Most projects need only the first two. The rest exist for cases where configuration alone is not enough.

The table below shows every approach with links to the details.

Approach	Description
Design tokens	Override Adobe Commerce design tokens (colors, typography, spacing, shapes) for quick, global brand changes.
CSS classes	Override or add CSS classes to restyle specific areas of a drop-in beyond what tokens provide.
Slots	Use built-in extension points to add or replace UI and behavior in drop-in components.
Content enrichment	Add content above or below commerce blocks by product SKU, category, and the physical position on the page.
Localization	Use the placeholder system to override default drop-in text and support multiple languages.
Dictionaries	Customize drop-in dictionaries (deep-merge) for localization, branding, and multi-language support.
Extending	Add new features and Commerce API integrations to existing drop-ins (for example, gift messages in checkout).
Layouts	Configure where drop-in containers appear on the page via HTML fragments and block layout.
Localizing links	Manage localized internal links in the boilerplate so users stay within their chosen locale.
Extend, substitute, or create?	Decide when to extend an existing drop-in, substitute with a third-party solution, or create a new one.

What’s next

You now know what every drop-in is made of, and which ones are available. The next step is writing the code. Using drop-ins shows the three-line pattern — import the initializer, import a container, render it with a complete working example.