Build Custom Components

In addition to the Commerce App standard components, you can add custom components to your B2B or D2C store created with an LWR template. Custom Lightning web components (LWC) are easy to build, and they perform well in the web browser that hosts your B2B or D2C store created with an LWR template.

Build a Lightning web component by using HTML, JavaScript, and CSS. HTML provides the structure. JavaScript defines the core business logic, event handling, API calls to fetch page data, and related metadata. CSS provides the look, feel, and animation. Then deploy the component to Experience Builder with Commerce metadata. From start to finish, including deploying the component to your store, an SFDX project framework and related utilities assist you.

To get started building a custom component, see Create an SFDX Project for the Custom Component. To accelerate the development process, you can also reference the Public Commerce LWR Library GitHub Repository.

For guidance on specific custom components, see these topics:

• Create a Pricing Component that Displays Discount Percentage
• Create Commerce Einstein Recommendations Components
• Customize a Checkout Component for a B2B or B2C Store (LWR)
• Create a Custom Payment Component