Skip to main content
Skip table of contents

LWC- Product Item Details

Product Item Details

The Product Item Details Lightning Web Component (LWC):

  • Displays the details of the product available for purchase
  • Allows a member/constituent to select the quantity
  • Allows the member/constituent to use Buy Now to quickly purchase the product and skip the shopping cart process
  • Allows the member/constituent to add the product to their shopping cart first and then purchase all the products added as a single purchase
  • Additionally, administrators can modify the behavior of the Add to Cart button to invoke a process, depending on the product, prior to adding it to the cart.

Configuration Options

Learn more about Experience Builder here.

From the components list, select the Product Item Details component and drag it onto the site page. 

On the page, click within the Product Item Details component to bring up the Property editor.

Figure 1. Product Item Details LWC with configuration properties

ProductThis tells the LWC the specific product details to show. Use {recordId} for the current record, {url.<param>} (e.g. {}) for a URL parameter, or a Salesforce record ID
LayoutThis enables you to choose a horizontal or vertical rendering of the product.
Image FitThis tells the LWC how to fit the image within the container.
Call-to-action labelThis allows you to specify how you want the name of the 'Buy Now' button to appear.
Checkout PageThis allows you to enter the API name of the Checkout page.
Show Buy NowThis allows you to show or hide the 'Buy Now' button on the LWC.
Show Add to CartThis allows you to show or hide the 'Add to Cart' and 'Shopping Cart' buttons on the LWC.
Shopping Cart pageThis allows you to enter the API name of the Shopping Cart page.


Figure 2. Products Item Details page showing a product in Experience Cloud Community Hub

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.