Dropins overview
Dropin 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 dropins?
Dropins are full-featured shopping components. They are not primitive components like Carousels and Galleries. Dropins define the storefront shopping experience. Our dropins include Product Details, Carts, Checkout, User Authentication, User Accounts, with more on the way. This section introduces these dropins and provides links to their details.
Product Details dropin
The Product Details dropin is designed to render detailed information about products and services, including SKUs, pricing, descriptions, and customizable options, with built-in support for internationalization and accessibility. This dropin is a key component of the e-commerce experience, providing users with essential product details and enabling them to make informed purchasing decisions.
Cart dropin In Development
The Cart dropin 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 dropin 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 dropin In Development
The Checkout dropin 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 Account dropin In Development
The User Account dropin provides users with a personalized experience, allowing them to view their order history, manage their account settings, and access other account-related features.
User Authentication dropin In Development
The User Authentication dropin 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.
How can I customize dropins?
All dropins 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 dropins than design tokens. Overriding or adding new CSS classes allows you to restyle specific areas of the dropin You’ll find best practices for styling here.
Slots
Slots provide the deepest level of customization. Slots are built-in extension points in the dropin 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 dropins for a region. This topic shows you how to add and use a second language file in your dropins.
Where can I use dropins?
Our dropin components easily integrate into the most popular frontend frameworks, or into no framework at all! Here are a few of them: