Drop-in components overview
Drop-in components (with Commerce services) make up the entire storefront experience. They are equivalent to small apps that you can mix and match to create a storefront that fits your needs.
What are dropin-in components?
Drop-in components are full-featured shopping components. They are not primitive components like Carousels and Galleries. dropin-in components define the storefront shopping experience. Our dropin-in components include product details, carts, checkout, user authentication, user accounts, with more on the way. This section introduces these dropin-in components and provides links to their details.
Product details
The product details drop-in component renders detailed information about products and services, including SKUs, pricing, descriptions, and customizable options, with built-in support for internationalization and accessibility. This drop-in component is a key component of the e-commerce experience, providing users with essential product information to enable informed purchasing decisions.
Cart
Ready to Implement The cart drop-in provides a summary of the items that the user has added to their cart. It allows users to view and manage their cart contents, update quantities, and proceed to checkout. The cart is a critical component of the e-commerce experience, providing users with a convenient way to review and adjust their selections before completing their purchase.
Checkout
Ready to Implement The checkout drop-in component is a key component of the e-commerce experience, providing users with a streamlined process for completing their purchase. It allows users to enter shipping and payment information, review their order details, and confirm their purchase.
User authentication
Ready to Implement The user authentication drop-in component provides users with a secure and seamless way to log in or create an account on your e-commerce platform. It supports various authentication methods, including email, social media, and single sign-on (SSO), ensuring a smooth user experience across devices and platforms.
User account
In Development The user account drop-in component provides users with a personalized experience, allowing them to view their order history, manage their account settings, and access other account-related features.
How can I customize dropin-in components?
All dropin-in components can be customized in five ways: design tokens, CSS classes, slots, content enrichment, and localization. In this section, you’ll learn how to use each approach.
Design tokens
Design tokens are the quickest way to customize your storefront. By changing the default token values with your own brand colors, typography, spacing, and shapes, you can make quick, global brand changes to your entire storefront.
CSS classes
CSS classes provide deeper style changes for dropin-in components than design tokens. Overriding or adding new CSS classes allows you to restyle specific areas of the drop-in component. You’ll find best practices for styling here.
Slots
Slots provide the deepest level of customization. Slots are built-in extension points in the drop-in component to add your own UI components and functions. You’ll learn how powerful slots can be.
Content enrichment
Content enrichment is similar to adding content with slots. The difference is in scale. Enrichment is an Edge Delivery feature that allows you to add content to entire product categories.
Localization
Localization is one of the easiest ways to customize dropin-in components for a region. This topic shows you how to add and use a second language file in your dropin-in components.