Making 'Buy Online, Pick Up in Store' Work in Magento 2
In recent years, ‘Buy Online, Pick up at Store’ became the overnight focus for many retailers as in-person shopping came to a halt.
Using Adobe Commerce (Magento) to set up Buy Online, Pick up at Store (BOPIS) is a piece of cake. Even if you have 20 store locations, central fulfillment, and a few drop-shippers all as “origin points.” (If you have only one location, just enable the new ‘Pick up in Store’ delivery method, and you can stop reading.)
Setting up Buy Online, Pickup at Store in Magento 2
Assuming you have several locations where customers could come pick up their stuff, there are the three primary steps needed to set up your own BOPIS environment in Magento:
- Configure Magento’s Multi-Source Inventory
- Add quantities for each location
- Set up a BOPIS delivery method
Step #1: Configure Magento 2’s Multi-Source Inventory (MSI)
This feature in Magento Commerce 2.3+ allows you to use a single product that has multiple “sources” of inventory, with different quantities at each source. A source is usually a physical location and might include warehouses, brick-and-mortar stores, distribution centers, and drop shippers.
This feature was likely originally intended for managing sources of inventory that you might want to ship to a customer that originate from different locations. It can certainly be used for that purpose, but also can be extended to the scenario where a customer is going to select a location and drive over and pick their order up.
Adobe Commerce MSI has a few cool features:
- It aggregates the inventory from all locations into a total “salable” inventory number.
- Once an order is placed, it “reserves” that inventory until the item is shipped. This is especially useful for BOPIS in low-inventory situations. (Few things are worse than a customer purchasing online, arriving for pickup to find the inventory unavailable—I’m talking to you, Target!)
- It has proximity radius detection to calculate the distance and time from shipping destination and the source locations. (Though in a BOPIS store, the customer will likely choose where they want to pick up from, but the algorithm is useful to show them the nearest locations first.)
Detailed Magento Docs:
- Setting Up BOPIS Locations (Managing Sources)
- Assigning Available Stock to Sources (Inventory to Locations)
- Proximity Detection (Google API setup) – Proximity is being calculated via a Source Selection Algorithm
Step #2: Add quantities for each location
Once your locations are in place, for each product/SKU, you will see multiple quantity fields. You can associate inventory available at each location. This is an area we often customize a sync process, for example with the point of sale (POS) system that has the latest inventory counts. And that is not a big project.
Step #3: Set up a BOPIS delivery method
There is a new “in-store delivery” delivery method that can be configured to support BOPIS, however, we’ve been installing the Amasty Locator + MSI extension and find it to be a good choice to provide a slightly nicer UX.
The Amasty Location + MSI extension adds four handy features:
- A store location map and directory
- Uses Multi-Source Inventory
- Adds a new delivery method to checkout, with date/time for pickup
- Displays current available stock (based on MSI) in the product detail page
Here’s how it looks on the front end, in the product detail page. This is straight out of the box, default theme in Adobe Commerce. The Amasty extension is adding the “pick up is available in 2 stores” table, and is correctly displaying inventory (and not offering the location where the puppy toy is not in stock).
On checkout, can see the new delivery method for Buy Online, Pick up at Store (you could also have an option for delivery of course). The customer can choose their preferred store, and set pickup date and time (all configurable of course).
Those are the main three setup steps for a Buy Online, Pick up at Store experience in Adobe Commerce.
Beyond the basics, we often integrate with a POS, or other inventory systems in order to have accurate inventory availability online. We also often pass orders completed into the clients POS for fulfillment in the store so the store staff can use an existing system — though they can certainly fulfill orders within Adobe Commerce as well.