Configure layouts and widgets for in-store pick up

You must make changes to a number of the storefront layouts to add in-store pick up to your storefront.

This section describes adding new widgets to page layouts and also making sure the latest versions are used for some widgets that are included in the page layouts out of the box. To replace a widget with the latest version, see Upgrade deployed widgets in Customize your store layouts.

To enable in-store pick up, you must make the following changes to your storefront:

Add the Store Pick Up element to the Product Details widget. See Update the Product layout for in-store pick up.
Make Checkout Layout for Multi Ship the default checkout layout. See Update the default checkout layout for in-store pick up.
Configure the Enable Store Pickup setting for the Shopping Cart Summary and Shipping Options widgets. See Update the default checkout layout for in-store pick up and Update the Cart layout for in-store pick up.
Update to the latest versions of the Order Confirmation and Order Details widgets.
If your environment supports scheduled orders, update to the latest version of the Scheduled Order widget. See Configure page layouts for scheduled orders for more information.
(Optional) Configure widgets to show when an item will be available for pick up. See Display the date and time an item will be available for pick up.

Update the Product layout for in-store pick up

Add the Store Pick Up element to the Product Details widget on the Product layout. (Make sure you are using the latest version of the Product layout and Product Details widget.) This element specifies that an item can be picked up (based on the value of the SKU’s onlineOnly property) and lets the shopper search for pick-up locations by postal code or city and state.

When the shopper clicks the Find Stores button, Commerce displays a list of nearby stores where the item can be picked up. For stores where the item is in stock, The number of stores listed depends on the .Enter the Number of Matching Stores to Display value you entered on the Product Details widget’s Settings tab. (By default, the widget displays a maximum of ten stores.) The shopper can click a Select Store button for a store that has the item in stock to put the item in the shopping cart.

Note: If you customize the query that finds stores, note that Commerce does not support finding a store by geolocation, that is, by its longitude and latitude coordinates.

Update the Cart layout for in-store pick up

Make sure you are using the latest version of the Shopping Cart widget so you can enable in-store pick up.

To configure the Shopping Cart widget to support in-store pick up:

From the Design page, select the Layout tab.
From the Layout tab menu, select the Cart layout.
Click the Shopping Cart widget’s setting icon to view the widget information.
On the Settings tab, select the Enable Store Pickup check box.
Enter the maximum number of stores to display when a shopper searches for a pick-up location from a product’s details page.
By default, the maximum number of stores listed is ten.
Click Save.

Update the default checkout layout for in-store pick up

Make Checkout Layout for Multi Ship the default checkout layout. This new layout includes a Progress Tracker stack with the following tabs and widgets:

Login
Shipping Options
Payment Methods
Review Order

The Login tab includes a new version of the Login-Checkout widget.

Shipping Options tab

The Shipping Options tab includes a new Shipping Options widget that lets registered and anonymous shoppers select a shipping option on the cart or checkout page. If Enable Store Pickup is selected on the widgets Settings tab, shoppers can search for a store that has the item in stock.

Payment Methods tab

The Payment Methods tab includes the Split Payments widget. The latest version of this widget displays the Pay in Store option if it has been configured and if all items in the order will be picked up at the same location. See Configure payment processing for in-store pick up for more information.

Even if an order qualifies for in-store payment, the Pay in Store option will not appear if gift cards have already been applied to the order. The shopper can remove gift cards from the order and then select Pay in Store. The shopper can pay with the gift cards when they pick up the items at the store.

In the new version of this widget, each payment method includes its own Billing Address section. A payment’s billing address overrides the default billing address.

This tab also includes a new version of the Promotions widget.

Review Order tab

The Review Order tab includes the Review Order widget, which has not been updated in this release.

Note: A shopper can view the details of their selected pick-up location when they review their order. However, after they view the pick-up location details in Review Order and then navigate back to Shipping Options to update the selected store, the updated store is not reflected within the Review Order widget.

Display the date and time an item will be available for pick up

You can optionally configure widgets to display the date and time an item will be available for pick up at a store. For example, you could display the availability dates on the product details page, in the shopping cart, during checkout, and in the order history.

Every in-store pick up shipping group in an order contains the following properties:

availablePickUpDate specifies the date and time the items in the shipping group will be at the location and ready to be picked up by the shopper. This data likely originates in your order management system.
preferredPickUpDate specifies the date and time the shopper specifies would like to pick up their items. The date specified by preferredPickUpDate should be valid in relation to inventory availability, for example, it should occur after the date specified by availablePickUpDate or the availabilityDate, but Commerce does not automatically provide validation. The integration you write will need to include code that validates the dates.