This article is for Salesforce admins, implementation partners, and solution consultants who need to add the storefront order history page and configure how buyers filter orders, move into order details, and download pro forma invoices.
When to use the storefront order history page
Use the order history page when buyers need a self-service view of past orders in the storefront. The page is designed for accounts with repeat ordering activity, especially when buyers need to narrow long order lists by status, date range, or price range before opening a specific order.
The component automatically adapts to screen size. Buyers see a table layout on larger screens and a list layout on smaller screens, so you do not need to build separate desktop and mobile versions of the page.
Before you begin
Before you configure the page, confirm the following:
- Your storefront already has an Experience Builder page where buyers should access order history.
- You know whether order links should open a storefront page or a Salesforce record-detail page.
- If you plan to use named-page navigation, you know the Experience Builder page name for the order details page.
- If you plan to use record-detail navigation, buyers have access to the relevant order record-detail experience.
Add the component to an Experience Builder page
- Open your storefront in Experience Builder.
- Open the page that should show order history, or create a new page for this purpose.
- Drag the order history component onto the page.
The component appears in Experience Builder as General - Order Overview (LWC). - Save the page.
- Publish the site when you are ready to make the page available to buyers.
Configure the component settings
After you place the component on the page, configure the exposed properties in the component panel.
| Setting | What it controls | When to use it |
|---|---|---|
Order Link Type |
Controls how buyers open order details from the order history page. | Use Page to keep buyers in a storefront page flow. Use Record Detail when your implementation intentionally opens the Salesforce order record-detail experience. |
Order Page Name |
Defines the target Experience Builder page name for order links. | This matters only when Order Link Type is set to Page. It is ignored when Order Link Type is set to Record Detail. |
Header Background Color |
Changes the header color of the desktop table layout. | Use this when you want the table header to better match storefront branding. This setting does not affect the mobile list layout. |
Number of Orders per Page |
Sets how many orders appear on each page of results. | Increase it when buyers commonly review larger result sets. Reduce it when you want shorter pages and less scrolling. |
Display Proforma Invoice |
Adds a pro forma invoice download action to the order history experience. | Enable it when buyers should be able to download pro forma invoices directly from order history. |
How filtering and paging work
The order history page includes filters for:
- Order status
- Order date range
- Order price range
These filters are applied to the retrieved order data before pagination is calculated. This means buyers are filtering the full result set returned for the page, not only the orders currently visible on one page of results.
In practice, this affects the buyer experience in two ways:
- The number of result pages can change after a filter is applied.
- Buyers can reload the page or share the page URL and keep the same filter state.
Filter values are stored in the page URL state, which helps preserve the buyer's current view during reloads, browser navigation, and shared links.
Choose how order links open order details
Option 1: Page
Use Page when buyers should open a storefront order details page.
With this option:
- Order links navigate to a named Experience Builder page.
Order Page Namedetermines which page opens.- This is the best fit when you want buyers to stay in a storefront-specific journey.
Use an explicit page name when your storefront uses a custom order details page name. If you leave the page name blank, the component falls back to the standard storefront order-details page name.
Option 2: Record Detail
Use Record Detail when order links should open the Salesforce order record-detail page instead of a storefront named page.
With this option:
- Order links open the order record directly.
Order Page Nameis ignored.- The buyer experience depends on your Experience Cloud and record-access setup.
Choose this option only when the record-detail experience is the intended destination for storefront users.
Configure pro forma invoice display
When Display Proforma Invoice is enabled, the order history page shows a pro forma invoice download action in the order list.
The exact presentation depends on screen size:
- On larger screens, buyers see an additional invoice column in the table.
- On smaller screens, buyers see the invoice action within each order card.
Enable this setting only when invoice download should be available from order history. If you leave it disabled, the invoice action is hidden from the page.
Validate desktop and mobile behavior
After publishing the page, test the experience as a storefront user.
- Open the order history page on a larger screen and confirm the page renders as a table.
- Apply a status filter, a date range, and a price range.
- Confirm the filtered result set updates correctly and that pagination reflects the filtered results.
- Reload the page and confirm the current filter state is preserved.
- Open the same page on a mobile device or in a narrow responsive viewport and confirm the layout changes to a list view.
- Click an order link and confirm it opens the correct destination for your selected
Order Link Type. - If
Display Proforma Invoiceis enabled, confirm the invoice action appears where expected.