Ship Products to Multiple Addresses and Stores in a Single Order

With the Retail React app template in PWA Kit v3.12 and later, enable multiple shipments in one order to give shoppers greater flexibility in choosing their order fulfillment options in the cart and the checkout page. For example, a shopper can order gifts for multiple recipients with different addresses in the same order. If in-store pickup is also enabled, shoppers can choose to pick up products from different stores in the same order, in addition to specifying multiple shipping addresses. For example, a shopper can send items to themselves to the locations they're traveling to, such as a home address, a hotel, and pick up items at store locations in different cities. This feature provides convenience and a faster checkout experience by avoiding the placement of separate orders for each recipient and shipment type.

• Build your site with:
  • The Retail React app template
  • Retail React App version 7.1.0 or later
  • Commerce SDK React version 4.0 or later

1. By default, the multiple shipments feature is enabled in the Retail React app template, in addition to the in-store pickup feature. If multiple shipments isn't turned on in your app, set the multishipEnabled: true value in config/default.js. This example shows the default configuration with both multiple shipments and in-store pickup features enabled.

2. (Optional) If in-store pickup isn't enabled in your cloned pwa-kit GitHub repository, and you want to enable it, follow the steps in Expand Shopping Options with In-Store Pickup.

To enable multiple options for both in-store pickup and shipments, you can enable the multiple shipment and the in-store pickup features. This table shows the shipping and pickup options you get when you enable or disable these features in all combinations.

• You can add shipments for up to 20 addresses.