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.
Your LWR-based B2B or D2C store has dozens of standard Lightning web components. Before building a custom component, review the already-built LWCs described in LWR Store Components or, to view all the components available in your store template, see View All Components.
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.
To bring dynamic data into a custom component, use expressions. Note that your component can be rendered multiple times as different parts of the data tree are filled in. If you have custom components that use data expressions, verify that they can handle the initial absence of data and re-render as data updates. Before attempting to use data with expressions in a component, check that the data is defined and of the correct type. For more information, see Expressions in Commerce Components.
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
- LWR Sites for Experience Cloud
- Server-Side Rendering
- Commerce LWR Storefront Performance Best Practices