This article is for Experience Builder implementers, Salesforce admins, and implementation partners who need to place a storefront component that presents standard product detail content in a single collapsible layout.
What this component is for
Product Detail - Accordion is an Experience Builder component that groups product description, features, and specifications into expandable sections on a product detail page.
Use it when you want a cleaner product detail experience without building a custom page layout for these standard content areas.
This component is a strong fit when:
- your storefront uses the standard product detail experience
- product description, features, and specification data are already maintained on the product records buyers view
- you want one consistent accordion pattern across desktop and mobile
- you want a simpler Builder setup than placing separate detail components and styling them individually
Use a custom product detail implementation instead when you need:
- different section titles by page or product type
- custom display logic for suppressing empty sections
- extra custom sections inside the same accordion
- product-type-specific layouts or custom data sources
Where this component can be used
The component is exposed for Experience Builder placement on:
- default community component regions
- Experience Builder pages
Use it on a product detail page where the current product record context is already available to storefront components.
Add the component in Experience Builder
Use these steps to place the component in the storefront:
- Open Experience Builder for the storefront site.
- Open the product detail page where buyers view individual products.
- In the component panel, locate Product Detail - Accordion (LWC).
- Drag the component into the target page region.
- Select the component and review the property panel.
- Leave Record Id bound to the page record unless your page uses a custom record-binding pattern.
- Save and publish the site.
Builder properties
Use these properties to control what the accordion renders.
| Builder label | API property | Default | Description | When to change it |
|---|---|---|---|---|
Record Id |
webProductId |
{! recordId } |
Identifies which product record the component reads. | Change only if the page does not use the standard product record binding. |
Show Description |
showDescription |
true |
Shows or hides the description section. | Turn off when description should not appear in the accordion for this page. |
Show Features |
showFeatures |
true |
Shows or hides the features section. | Turn off when feature content is not maintained or should be shown elsewhere. |
Show Specifications |
showSpecifications |
true |
Shows or hides the specifications section. | Turn off when specifications are not relevant or are rendered in another page region. |
Chevron Alignment |
chevronAlignment |
Left |
Places the expand and collapse icon on the left or right side of each section header. | Change when a right-aligned chevron better matches the page design. |
How the component gets its content
The accordion does not store product content itself. It composes three existing product-detail experiences and renders each one in collapsible mode.
- Description is rendered by the standard product description component.
- Features are rendered by the standard product features component.
- Specifications are rendered by the standard product specifications component.
Because of that, the accordion is best understood as a packaging component for existing product detail content rather than as a separate content source.
Section titles and labeling
The component uses the standard section headings:
- Description
- Features
- Specifications
These titles are not exposed as Builder properties on the accordion.
If you need to localize or rename these headings globally, update the corresponding Salesforce custom labels. If you need per-page or per-component title overrides, use a different component strategy.
Behavior and limitations
Keep these constraints in mind before you use the component:
- the accordion only controls whether each child section is included; it does not add page-specific content rules beyond those builder toggles
- the component does not expose a builder setting for custom section titles
- the component is intended to replace separate placement of the standard description, features, and specifications sections when you want a unified accordion experience
- if you place the accordion alongside separate product detail description, features, or specifications components, buyers can see duplicate information
The accordion itself does not evaluate whether a product has meaningful content before rendering an enabled child component. Any empty-state or no-content behavior comes from the underlying description, features, and specifications components. Validate the storefront with representative products before publishing.
What buyers see
When enabled sections have usable product data, buyers see a stacked accordion with expandable Description, Features, and Specifications sections.
The selected Chevron Alignment value applies consistently across the included sections. The component uses one shared collapsible pattern so buyers do not have to learn different interaction styles for each product-detail content area.
Validation checklist
Use this checklist after publishing:
- Open the storefront as a buyer and navigate to a product detail page.
- Confirm that Product Detail - Accordion is visible in the intended page region.
- Expand each enabled section and confirm that the expected product content appears.
- Verify that the chevron placement matches the selected Chevron Alignment value.
- Test at least one product with complete detail content and one product with partial or missing content.
- Confirm that the page does not show duplicate description, features, or specifications content from separate components unless that duplication is intentional.
- Check the same page in a narrow responsive viewport or on mobile and confirm the accordion remains readable and easy to expand.
Troubleshooting
The accordion renders but no product details appear
Verify that the component is on a product detail page with the correct Record Id binding and that the current product has description, features, or specification data available.
Buyers see duplicate product-detail sections
Check the page layout for separate product description, product features, or product specifications components in addition to the accordion.
A section header appears but the content is incomplete or empty
Check the underlying product data and validate how the corresponding child component behaves for that product content set. The accordion does not add extra suppression rules for empty content.