Recent Orders

This article is for Salesforce admins, implementation partners, and support engineers who need to place the storefront recent orders widget on the home page and configure how buyers move from that widget into order history and order details.

What the recent orders widget does

Use the recent orders widget to show buyers a short summary of their latest storefront orders directly on the home page. The component is designed for quick access, not for full order-history management.

In the storefront UI, the widget displays:

• An Order History header
• A View All action
• Up to three recent orders
• A linked order date for each row
• An order status badge for each row
• An order total when the buyer is allowed to view pricing

The component appears in Experience Builder as General - Recent Orders (LWC). In the delivered home-page metadata, it is placed in the home page sidebar area, but you can position it in any suitable region of the page.

Before you begin

Before you add the widget, confirm the following:

• Your storefront already has a home page in Experience Builder.
• Your storefront has an order history page and an order details page, or you have decided to use the standard page names.
• You know the Experience Builder page names for those destinations if your site uses custom page names.
• The target users should be able to access storefront shopping experiences.

Add the widget to the storefront home page

1. Open your storefront in Experience Builder.
2. Open the home page, or the page where you want to surface recent orders.
3. Drag General - Recent Orders (LWC) onto the page.
4. Place the component in the region that best fits your home-page layout.
5. Save the page.
6. Publish the site when you are ready to make the widget available to buyers.

For most storefronts, this widget works best on the home page because it gives buyers a quick path into full order history without requiring them to open a dedicated order-history page first.

Configure the component settings

After you place the component on the page, configure the exposed properties in the component panel.

Configure page destinations

Use the page-name settings when your storefront uses custom Experience Builder page names.

• Set Order History Page Name to the named page that should open when buyers select View All.
• Set Order Details Page Name to the named page that should open when buyers select a recent order.

If your storefront uses the standard page names, you can keep the defaults. If a field is cleared or contains only whitespace, the component still resolves the destination to the standard fallback page name.

Configure date styling

Use Date Color when you want the order date links to align more closely with your storefront branding.

This setting changes the color of the clickable order date text in each row. It does not change the widget header, status badges, or the View All action.

Understand display and access behavior

The widget is intentionally limited to a short recent-orders summary.

Three-order display limit

The component shows up to three recent orders. Buyers who need to review a longer list must use View All to open the full order history page.

This limit is fixed in the current component behavior and is not exposed as an Experience Builder setting.

Pricing visibility behavior

Order totals are shown only when the current buyer has permission to view pricing.

In practice:

• Buyers with pricing visibility see the order total for each recent order.
• Buyers without pricing visibility still see the order date and status, but not the order total.

This means the widget can look slightly different for different storefront users, even when the page configuration is the same.

Access behavior

The component checks storefront access before rendering the widget. If the current user does not meet the storefront access requirements used by the component, the recent orders widget does not display.

When validating the page, always test with a user profile that matches the intended storefront audience.

Understand navigation behavior

The widget supports two buyer actions: View All and selecting an individual order.

View All

When a buyer selects View All, the widget opens the named page defined by Order History Page Name.

If that setting is blank, the component opens Commerce_Order_History.

Individual order selection

When a buyer selects a recent order, the widget opens the named page defined by Order Details Page Name.

If that setting is blank, the component opens Commerce_Order_Details.

The component passes the selected order number into the destination page URL so the order details experience can load the correct order.

Validate the widget after publishing

After you publish the page, test the widget as a storefront user.

1. Open the storefront home page and confirm the widget is visible.
2. Confirm the widget header shows Order History and the View All action is available.
3. Confirm the widget shows no more than three recent orders.
4. Select View All and confirm the browser opens the intended order history page.
5. Select one recent order and confirm the browser opens the intended order details page.
6. Confirm the order date link color reflects your Date Color configuration.
7. Test with a user who can view pricing and confirm order totals are displayed.
8. Test with a user who cannot view pricing and confirm order totals are hidden.

Troubleshooting tips

If the widget does not behave as expected, check these areas first:

• If View All opens the wrong page, verify Order History Page Name on the component.
• If order clicks open the wrong page, verify Order Details Page Name on the component.
• If navigation always goes to the standard page names, check whether the custom page-name fields were left blank.
• If buyers do not see totals, verify whether the affected users have permission to view pricing.
• If the widget does not render at all, test with a storefront user who has the expected access level.