Skip to content
Adobe Commerce Storefront
Docs Playgrounds Videos
Drop-in components

Installing drop-in components

Drop-in components are designed for the browser’s JavaScript run-time without the need for a bundler. But they can also be installed and executed in a build-time environment with bundlers like Webpack and Vite. The installation steps for both run-time and build-time environments are the same after the initial drop-in component package imports.

Why install drop-in components?

Installing drop-in components is essential for customizing and enhancing your Adobe Commerce storefront, especially if you choose not to start with the boilerplate template. It is a strategic choice for businesses looking to customize, optimize, and scale their Adobe Commerce storefronts effectively. This approach provides the flexibility and modularity needed to create a unique and high-performing online shopping experience.

If you have an existing storefront project and are not starting with the boilerplate template, you can install drop-in components individually to add the specific features that you need.

Workflow

The following diagram provides an overview of the steps necessary for installing a drop-in:

PDP Installation

The installation of all drop-in components follows the same pattern described in the workflow diagram above. Refer to the following resources for step-by-step instructions to install specific drop-in components: