---
schema_version: "1"
id: fc84335a4489ecb18ea8f5421a5bb41ec20a338ec5da029107005866dd89d69d
title: Add a Custom Component to Your Store
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/salesforce-commerce/guides/d2c-commerce/b2b-b2c-comm-add-lwc-component.md
canonical_url: https://developer.salesforce.com/docs/commerce/salesforce-commerce/guide/b2b-b2c-comm-add-lwc-component.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 09f32588c6ee0d6fa3310f5ed821f5bcafb7ea79bba0177cef9dfcf7fc75b319
products:
  - B2B Commerce Developer Guide
  - Salesforce APIs
---
# Add a Custom Component to Your Store

Add a component to the canvas of your B2B or D2C store created with an LWR template. Optionally edit its properties.

**note:** Before placing a custom component, assign a custom theme layout to the page in Experience Builder.

1.  In the Visual Studio Code editor, open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS).

2.  Enter `SFDX`.

3.  Select **SFDX: Open Default Org**.

    Your store opens in a separate browser.

4.  In the left Navigation panel, click **Components**.

    The custom component displays under **Components** | **Custom Components**.

5.  From the Custom area of the Lightning Components list, drag your Lightning web component to the page canvas.

6.  To edit the component properties, select the component on the page canvas, and enter changes in the component property editor.

    To include properties that are editable when the component is selected in Experience Builder, open the .js-meta.xml file and add `{lightningCommunity__Default}` in targets and then define the properties in `targetConfigs`.

    ![Screenshot of component on page canvas in Experience Builder.](https://developer.salesforce.com/media/d2c-commerce/place_lwc_in_builder.png)