Click & Collect

The Click & Collect feature — also called BOPIS (buy online, pickup in-store) — allows shoppers to buy online without the shipping step and costs.

Implementation

When Click & Collect feature is enabled, you will see two main changes in your storefront:

• the StoreLocator component that displays a list of commercetools channels (opens new window) provided by the useChannel composable,
• during checkout, users will have the option to select Click & Collect as a shipping option in the shipping step.

Map configuration

To add a map to your application, we use the Google Maps service, so you need to provide an active Google Maps API key (opens new window).

The StoreLocator component is disabled by default. To enable it, set the CLICK_COLLECT_ENABLED environment variable to true in your project's .env file.

// .env
CLICK_COLLECT_ENABLED=true
GMAPS_KEY={YOUR_GOOGLE_MAPS_API_KEY}

For further configuration and filtering options, see the useChannel documentation page.

Shipping method configuration

A new shipping method needs to be configured in the commercetools Merchant Center to deal with the Click & Collect orders.

You can check the Shipping methods (opens new window) docs to learn how to add a new shipping method.

In our demo store, we created a shipping method called "Click & Collect" with the shipping rate set to free shipping.

The most important information while creating a shipping method is the key. In our example, we call it "collect".

In the next step, add the COLLECT_SHIPPING environment variable with the value of that key to the .env file.

// .env
COLLECT_SHIPPING=collect

Every order selected as Click & Collect will use this newly created shipping method.