Introduction to Drop-In Components

Drop-in components (with Commerce services) make up the entire storefront experience. They are equivalent to small apps you can mix and match. You can customize and combine B2C and B2B drop-ins to fit your business needs.

What are drop-in components?

Drop-in components are full-featured shopping components (not primitives like Carousels or Galleries) that define the storefront experience. The tables below list available B2C and B2B drop-ins with links to their details.

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

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.
Requisition List	Create and manage requisition lists for repeat and bulk ordering; multiple lists per account.

How can I customize drop-in components?

Drop-in components support many customization approaches. The table below lists each approach with links to 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.