Placing a custom component on an LWR store page
Key Takeaway
Expose the component in its js-meta.xml file, deploy it to the org, assign a custom theme layout to the page, and then drag the component onto the page.
A custom Lightning web component does not appear in an LWR store's Experience Builder on its own. You expose it in its js-meta.xml configuration file, deploy it to the org, and then drag it from the "Components" panel onto a store page. Builders can then set its properties without touching code.
Expose the component
Every Lightning web component folder must include a configuration file named componentName.js-meta.xml, which defines the component's metadata. To make the component usable in Experience Builder, set isExposed to true and add an Experience Builder value in targets.
The target you add decides where the component shows up in Experience Builder.
| Target | What it creates | Where it appears |
|---|---|---|
lightningCommunity__Page | A drag-and-drop component | Components panel |
lightningCommunity__Page_Layout | A page layout component for LWR sites | "Content Layout" window |
lightningCommunity__Theme_Layout | A theme layout component for LWR sites | "Settings", in the "Theme" area |
To give a drag-and-drop component a custom icon, add an SVG file named componentName.svg to the component's folder. Each folder can hold only one SVG. Without that file, the Components panel shows a default icon.