To integrate Click & Collect into your online store, you should have completed the following steps in advance:
- Stores created
- Catalog imported
- In-Store App installed in the stores
To enable Click & Collect as a fulfillment method, the option "Click&Collect" must be enabled in the fulfillment settings. You can find it in the merchant area under Settings › Fulfillment in the "Fulfillment Methods" section. If your products are not yet assigned to a fulfillment method during import, you also need to enable "Click&Collect" as the default method under "Global Product Default Fulfillment Methods":
Integration
There are various options and levels of expansion for integrating Click & Collect into your online store. With Shopgate, you are completely free and flexible in how you implement it. Below, we focus on two implementation examples. If you have any questions, just get in touch with us – we will help you create a concept.
The basic question
The basic question you should ask yourself is whether you want to allow shopping carts with mixed fulfillment methods. This means, for example, that customers pick up some of the products in an order in the store while another part is shipped. This can be useful, for example, if not all products are in stock at the preferred store but your customers want to receive the products as quickly as possible.
Allowing multiple fulfillment methods in one shopping cart or order provides the best possible customer experience, but also makes the integration more complex, because many shop systems do not support different fulfillment methods by default. In this case, support for fulfillment methods has to be built in at product level.
In addition, there may be cases where it makes sense to split the pickup of a product across several nearby stores. This also adds complexity, because the shopping cart and checkout then have to support different stores per product.
Availability display on product detail pages
It is a good idea to show the Click & Collect option on the product detail page already and to offer an availability check for products in stores. The integration can be done very simply with the Shopgate Storefront JavaScript. It is publicly available on GitHub. In addition, Shopgate already offers plugins for the availability display for the following shop systems:
Click & Collect in the shopping cart/checkout
To add Click & Collect to the shopping cart or checkout, we come back to the basic question of mixed fulfillment methods. If you want to offer your customers this option, the shopping cart must already let them change the fulfillment method and/or the store per product.
If you decide on one fulfillment method, it is often enough to make this choice when selecting a shipping method. For example, you can create a shipping method "Pickup in store" and, when it is clicked, add store selection using our Storefront JavaScript.
With either option, the shop system must pass the selected stores through until the order is completed.
Completing the order
Once a Click & Collect order has been completed, it must be passed to Shopgate. You can do this with our API. Use it to create a new "fulfillment order" per store so that it is forwarded to that store.
If the payment in your shop's checkout (e.g. by credit card) is only authorized and only charged once the order has been fulfilled, you can also be notified automatically via a webhook as soon as your customers have picked up the order in the store.
Examples
Example 1: Maximum user experience
On the product detail page, you show your customers the product's availability per store using the Storefront JavaScript. In addition, you add another button called "Pick up in store" near the add-to-cart button. Clicking it adds the item to the shopping cart, and the fulfillment method and store are saved on the product. Your customers can add more items to the cart for shipping or for pickup in a different store.
In the shopping cart, you show the fulfillment method and the selected store in a separate column. Your customers can change this information per product in the shopping cart.
At checkout, you show the relevant information instead of shipping costs for the products to be picked up. Shipping costs are still calculated and shown for products to be shipped.
After the order is placed, the products selected for pickup are transferred to Shopgate as a fulfillment order per store.
Example 2: Fast time to market
On the product detail page, you show your customers the product's availability per store using the Storefront JavaScript. In addition, you add another button called "Pick up in store" near the add-to-cart button. Clicking it adds the item to the shopping cart, and the fulfillment method and store are saved on the cart. After that, the cart is locked for products to be shipped. You inform customers about this restriction and offer to order the product for pickup as well or to ship the entire cart.
In the shopping cart, you show the fulfillment method and the selected store. Your customers can change this information for the entire cart.
At checkout, customers are offered free shipping.
After the order is placed, the entire order is transferred to Shopgate as a fulfillment order via the API.