SFDX workflow for creating and deploying a custom store component
Key Takeaway
A custom store component appears in the "Components panel" of Experience Builder only if its .js-meta.xml targets include lightningCommunity__Page. A successful deploy alone won't put it there.
A custom store component is a Lightning web component that you build yourself and add to a B2B or D2C store created with an LWR template, next to the standard Commerce components. You build it locally in a Salesforce DX (SFDX) project, using Salesforce CLI or VS Code. Then you deploy it to Experience Builder with Commerce metadata. Two choices matter most: the targets in its metadata file decide where the component can appear, and the path you deploy decides what reaches the org.
What you build
LWR stores already include dozens of standard Lightning web components, so review the existing components before you build a custom one. To speed up development, you can reference the Public Commerce LWR Library GitHub repository (forcedotcom/commerce-on-lightning-components).
A component is built from three kinds of files, and each has its own job:
- HTML provides the structure.
- JavaScript holds the core business logic, event handling, API calls that fetch page data, and related metadata.
- CSS provides the look, feel, and animation.