Commerce blocks and drop-ins

Related documentation

• Commerce Blocks Configuration - Learn how to configure Commerce blocks using Document Authoring
• Drop-in components - Overview of all available drop-in components

The Adobe Commerce boilerplate includes 29 Commerce blocks that wrap drop-in components to provide ready-to-use e-commerce functionality. These blocks integrate drop-ins with Edge Delivery Services, making it easy to add commerce features to your storefront without writing custom code.

Drop-ins used in Commerce blocks

The following table shows which drop-in components are used by each Commerce block:

Drop-in	Commerce blocks
storefront-account	Account Sidebar, Addresses, Customer Information, Orders List
storefront-auth	Confirm Account, Create Account, Create Password, Forgot Password, Login, Search Order, Wishlist
storefront-cart	Cart, Gift Options, Mini Cart, Order Product List
storefront-checkout	Checkout
storefront-order	Create Return, Customer Details, Order Cost Summary, Order Product List, Order Returns, Order Status, Returns List, Search Order, Shipping Status
storefront-payment-services	Checkout
storefront-pdp	Product Details
storefront-product-discovery	Product List Page
storefront-recommendations	Product Recommendations
storefront-wishlist	Cart, Wishlist, Product Details, Product List Page, Product Recommendations

Note

The @dropins/tools package is a utility library required by all drop-in components, providing shared functionality like fetch-graphql, event-bus, and initializer utilities. It is not a drop-in component itself, but rather a dependency used by Commerce blocks that integrate drop-ins.