Creating drop-in components

This topic describes how to use the drop-template repository to create drop-in components for Adobe Commerce Storefronts.

What are drop-in component templates?

Drop-in templates are GitHub Templates that allow you to quickly create drop-in components with the same structure, branches, files, and best practices built-in. The dropin-template repository provides the starting point for creating new drop-ins quickly and consistently.

For more information on GitHub Templates, you can refer to the following resource: How to Use GitHub Repository Templates

How to use the Adobe Commerce drop-in template

To create a new drop-in component using the Adobe Commerce drop-in template, follow these steps:

1. Navigate to the Template Repository: Go to https://github.com/adobe-commerce/dropin-template.
2. Create a New Repository: Click on the “Use this template” button to create a new repository based on the template. This will generate a new repository with the same directory structure and files as the template.
3. Clone Your New Repository: You can now clone the newly created repository to your local machine using git clone.
4. Install, Configure, and Launch: Follow the instructions in your new repo’s README file to install the dependencies, generate a configuration file, update your Mesh endpoint, and launch your development environment.

That’s it! You now have a drop-in application with the same consistency and best practices that Adobe’s drop-ins have, built in.

Adding a shared component to your project

After creating your drop-in component, let’s add a shared component from the Storefront SDK. These components are designed to be reusable and customizable, making it easier to build consistent and high-quality user interfaces. Follow the steps below to add a shared component to your drop-in component project.

npm install @adobe-commerce/elsie

npx elsie generate container --pathname <MyContainer>

npx elsie generate component --pathname <myUIComponent>

import { Button } from '@adobe-commerce/elsie';

function MyUiComponent() {
  return (
    <div>
      <Button label="Click Me" />
    </div>
  );
}