Click and Collect Add-On
The Shopify Click and Collect Add-On allows your customer to nominate an Outlet online to collect their order from, rather than waiting for the order to be sent to their home address. You can customise the feature to display a Google map, and even the updated inventory level for the store.
Click and Collect is a licensed add-on. You will need to purchase a license before you can use this product. Click here for more information.
This feature is not compatible with the Shopify "Local Pickup" feature.
Using Click and Collect
Using Click and Collect you can:
- Display stock availability on the product page or the Shopping Cart page (switch this off by adjusting the code in the theme)
- Allow the customer to select the Collection Outlet on the Shopping Cart page
- Action orders efficiently using the alerts on the POS home page
Related: Use the Web Order Alert settings to configure whether Click and Collect orders are included in the Web Order Alert count
How Click and Collect orders are processed
Click and Collect Visual Overview
Below is an overview of how Click and Collect will appear on your site. Configurable options include:
- Turning the stock quantity on/off e.g. 22 available
- Single or multiple columns (to control where the Availability button appears - either on the side or under the Outlet information)
- Map feature on/off (if the map is enabled customers will need to enter a postcode to see a list of outlets within a 100km radius, if maps are disabled they will just immediately see a list of all Outlets)
Note the appearance of the "Check Stock in Store", "Home Delivery" and "Store Pickup" buttons will inherit the colours of your Shopify theme (as indicated by the "Buy it Now" button in the screenshots above). Custom styling of the Click & Collect appearance can be done by your web developer (including the colours of the stock availability buttons).
Product Page
Shopping Cart/Check out
Map enabled
Map enabled
No map
No map
Limitations
Before implementing Click and Collect there are some limitations that you should be aware of.
- All stock must be Available in the same Outlet to be eligible for Click & Collect (Transfers are not available)
- The customer must view the Shopping Cart page to select an Outlet - you will need to disable/remove any features that bypass this page e.g. "Buy it now" button. This is a limitation of Shopify (see below for more details).
- Your customers will still be required to select a Shipping Method during the checkout*. It's recommended to create a $0 shipping method called "Store Pickup" for your customers to select during checkout to avoid paying shipping fees:
- The Click & Collect feature is a non-standard Shopify feature and therefore not supported by Shopify
- As all themes are different, you will therefore need an experienced developer to implement this functionality. Please note Retail Express does not provide support for Shopify themes, however we can recommend a developer to you if required.
* Shopify restricts the ability to modify the process of the customer checkout (some modifications can be achieved on a Shopify Plus store, however the Click and Collect feature has been designed to work on all versions of Shopify).
Before you begin
Before you can begin to set up the Click and Collect feature on your Shopify web store there are a few things you will need to know.
- Click and Collect is a licensed add-on. You will need to purchase a license before you can use this product. Click here for more information.
- Check to ensure you have added Outlet address and contact details for each Outlet enabled for Click and Collect
- Sign up for a free Google Maps API key (to display your Outlets on maps for your customers) - see below for details on this process
- Ensure you have enabled access to the Google Geocoding API (refer to the Google Maps instructions below)
- Ensure you have engaged an experienced developer to implement the code within your Shopify theme. Please note Retail Express does not provide support for Shopify themes, however we can recommend a developer to you if required.
To sign up and configure your Google Maps API key:
Note: Even if you already have a Google Maps API key you will need to ensure you have enabled the Geocoding API as well
- Open the Google Cloud Platform Console
Note: You will need to create an account if you don't already have one - Select your Project from the drop-down box
Note: If you are new to Google Cloud you will need create a Project before you can continue - Navigate to APIs & Services > Library
- Select Maps JavaScript API
- Click Enable
- Once enabled, click on the menu and navigate to APIs & Services > Library
- Search for the Geocoding API and click on it
- Click Enable
- Navigate to APIs & Services > Credentials
- Click Create Credentials > API Key
- Your API Key will be created
- Click Restrict Key
Tip: If you miss this step you can always click on the key under the Credentials window to edit the restrictions - Under API restrictions select Restrict Key
- Select both the Maps Javascript API and the Geocoding API
- Click Save
Installation
To begin using Click and Collect you will need to first configure Retail Express to enable the Outlets to be used for collection points, and enable the Google Map functionality.
From the Shopify side, you will need to do theme adjustments to display the content. It's also recommended to set up a Shipping Zone for Click and Collect/Store Collection so there are no shipping costs charged to the customer.
Note: Modifications to your Shopify theme should only be done by an experienced developer.
Part 1 - Retail Express
- Navigate to Settings > Integrations > Shopify
- Click on the Pencil icon to edit your integration
- Update the Custom Domain field with your website address if required e.g. mywebstore.com instead of mywebstore.shopify.com
- Locate the Click and Collect Settings section
- Add/remove Outlets by using the arrows (Outlets in the right box are available for Click and Collect)
- To enable Map and Postcode Search click Enabled
- Enter your Google Maps API Key
- Click Save
Note: If you are using a custom domain for your Shopify Store (e.g. mywebstore.com instead of mywebstore.shopify.com) you will also need to update the Custom Domain field in the Shopify Settings. Refer to the Shopify - Connect to Retail Express article for more information.
Part 2 - Shopify
Shipping Zone
Your customers are required to select a shipping method during the Checkout process.
To avoid charging your customers, it's recommended to create a free Shipping Rate called "Store Pickup" or "Click and Collect". Use the Shopify Help Center article on configuring Shipping Zones for more information on this process.
Shopify Theme
To implement the functionality within your theme download the asset files using the link below, then follow the instructions as per each heading below.
Note: Implementing Click & Collect requires modification of your Shopify Theme files. This should be only attempted by an experienced developer familiar with customising Shopify Themes. For more information refer to the Theme documentation on the Help Center.
Download Click and Collect Shopify Asset files
You will need to add code to the Head section of the site.
Click and Collect requires jQuery. Some themes may already contain the code to implement jQuery, in which case you don't need to include the first line below.
{{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' | script_tag }}
Add the following code to the end of the head section:
{% include 'click-and-collect' %}
This is a new file and will need to be created. To create a snippet:
- Expand the Snippets section
- Click Add a new snippet
- Enter the name click-and-collect
- Click Create snippet
- Once the snippet has been created you will need to paste in the following code, ensuring you replace the "YOUR_API_KEY" section with your Google Maps key (if using maps; if not, refer to the FAQs on how to remove this feature):
{% comment %}
@name: Retail Express Click and Collect
@version: 1.0.0
{% endcomment %}
{% if template == 'cart' or template == 'product' %}
<!-- Scripts -->
{{ 'api.jquery.js' | shopify_asset_url | script_tag }}
{{ 'click-and-collect-es6.js' | asset_url | script_tag }}
<!-- Stylesheets -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
{{ 'click-and-collect.scss.css' | asset_url | stylesheet_tag }}
<!-- Inline scripts -->
<script type="text/javascript">
function initCnc() {
clickAndCollectSettings = {
subdomain: '{{ shop.permanent_domain }}'.split('.', 1),
apiPrefix: 'shopify.retailexpress.com.au',
showQuantity: true,
enableMap: false
};
{% if template == 'cart' %}
window.cnc = new ClickAndCollectCart(clickAndCollectSettings);
{% endif %}
{% if template == 'product' %}
window.cnc = new ClickAndCollectProduct(clickAndCollectSettings, '{{ product.selected_or_first_available_variant.id }}');
{% endif %}
}
function initMap() {
if (window.cnc) {
window.cnc.mapReady();
} else {
window.mapIsReady = true;
}
}
document.addEventListener("DOMContentLoaded", function(event) {
if (!document.getElementById('cnc-container')) {
console.log('Click and Collect element not found.');
} else {
initCnc();
}
});
</script>
<!-- Remove if not using Google Maps -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap®ion=au" type="text/javascript"></script>
{% endif %}
Important: If you are using the ES5 version of the script (refer to the next section) you will need to replace the link 'click-and-collect-es6.js' with 'click-and-collect-es5.js' (5 instead of 6) on line 11.
Depending on your site you will need to determine which file you would like to use (replacing the x in the filename with either 5 or 6). Click and Collect has been written using Javascript ES6 (2015) which has limitations in the versions of Internet Explorer it's compatible with.
| ES6 |
Not compatible with Internet Explorer 11 or earlier If you require compatibility with IE11 (or earlier versions) you can use the file ES5 below. Filename: click-and-collect-es6.js |
| ES5-min |
Compatible with Internet Explorer 11 and earlier Filename: click-and-collect-es5-min.js Note: If using ES5-min, you will need to edit click-and-collect.liquid and uncomment the second line of this section: (Before) <!--Uncomment the following polyfill if you are using the ES5 (IE11) version of the script--> (After) <!-- Uncomment the following polyfill if you are using the ES5 (IE11) version of the script--> |
To add a new asset:
- Download the Shopify Asset files
- Unzip the files to a new folder
- Expand the Assets section
- Click Add a new asset
- Click the Choose File button on the Upload a File tab
- Navigate to where you have downloaded the files
- Select either the ES6 or ES5 file depending on your preference above
- Click Open
- Click Upload asset
- The file will be uploaded.
Note: The filename must match the filename in the click-and-collect snippet:
The Click and Collect .scss file will need to be uploaded as another asset. This is the stylesheet that controls the formatting of the Click and Collect feature.
Note: This file should not be modified. It's strongly recommended that any changes to the styling are made in a separate stylesheet - see the FAQs for more information.
- Expand the Assets section
- Click Add a new asset
- Click the Choose File button on the Upload a File tab
- Navigate to where you have downloaded the files
- Select click-and-collect.scss
- Click Open
- Click Upload asset
- The file will be uploaded.
The following code will implement the Click and Collect functionality so the customer can select a Pickup Location on the Cart page. Typically this code would be implemented following the shipping element, or after the Update/Checkout buttons.
Without Google Maps:
<div id="cnc-container"></div>
<div id="cnc-results-container"></div>
With Google Maps:
<div id="cnc-container"></div>
<div id="cnc-map-container"></div>
<div id="cnc-results-container"></div>
The following code will implement the Click and Collection functionality onto the product page to allow customers to see the various Outlets, and stock availability (if enabled in the settings). This section is typically implemented after the Add to Cart button at the end of the "product-single__meta" div element.
Without Google Maps:
<div id="cnc-container"></div>
<div id="cnc-results-container"></div>
With Google Maps:
<div id="cnc-container"></div>
<div id="cnc-map-container"></div>
<div id="cnc-results-container"></div>
Frequently Asked Questions
To control whether you would like the current inventory count for products to be displayed in the Click and Collect Outlet list you will need to adjust the file snippets/clickandcollect.liquid.
You will need to change the showQuantity: false line to be true:
showQuantity: false
as per below:
showQuantity: true
Once you have made the changes ensure you save the file.
If you would like to remove the Google Maps feature (and just display the Outlets immediately) you will need to do the following steps:
- Edit the file snippets/clickandcollect.liquid to set enableMap: true to be false
enableMap: false
- Remove this line from both the product-template and the cart-template files:
<div id="cnc-map-container"></div>
- Remove the maps script from the click-and-collect.liquid file
<!-- Remove if not using Google Maps -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR-KEY-HERE&callback=initMap®ion=au" type="text/javascript"></script>
To understand how to control the location and appearance of the Click and Collect functionality, there are several files you need to become familiar with:
| Type | File Location | Details |
| Styling | Assets/click-and-collect.scss |
Used for styling the Click and Collect functionality, including colours, fonts, spacing, buttons and more. This file should not be modified but can be used for an idea of class names etc. You should create your own stylesheet and implement that with any customisations required to the theme. You will need to include a link to the custom stylesheet within the click-and-collect snippet:
|
| Product Page button location | sections/product-template.liquid |
The Product page for your theme. You will need to implement the Click and Collect code (as listed above) in the location where you would like the feature to appear. For assistance with this process you will need to refer to your web store developer. Note: depending on your theme this may be an entirely different file to be updated. |
| Shopping Cart button location | sections/cart-template.liquid | The Shopping Cart page for your theme. You will need to implement the Click and Collect code (as listed above) in the location where you would like the feature to appear. For assistance with this process you will need to refer to your web store developer. |
Click and Collect can be used with an Unmanned Warehouse, in that a customer may select that location as a Pickup Location. However, as an Unmanned Warehouse doesn't have access to POS, sales must be fulfilled using the Fulfilment Report in Back Office.
When viewing an order within POS the order will be using the Layby & Pickup fulfilment method, indicated by the red icon on the left of the Product lines:
You can also find Click & Collect orders in the Back Office using the Fulfilment Report by searching for sales with an Order Source of "Shopify" and Delivery Mode of "Store" (for Store Pickup):
When trying to use Click and Collect on the website, if an error is displayed "Location Not Found" the issue will be related to the Google API subscription used for the Maps.
Typically, the Google subscription has expired, and needs to be renewed.
Check your Browser Console with Google to check your Billing status: https://console.cloud.google.com/projectselector2/billing/enable
You can implement code on your store to enable customers to select a location even if the stock isn't available. In these cases, you would need to then transfer the stock to the Outlet ready for collection by the customer.
Please note: The code is provided as-is; support is not available for this process. We strongly recommend engaging a web developer to implement this on your site.
Without the map enabled:
With map enabled:
The code below does not include individual product availability.
Class: Outlet
Replace this code:
createAvailabilityTable(cartItems) {
this.availabilityTable = new AvailabilityTable(
cartItems,
this.data.stock,
true,
this.cnc.settings.showQuantity
);
}
With:
createAvailabilityTable(cartItems) {
this.availabilityTable = new AvailabilityTable(
cartItems,
this.data.stock,
false,
this.cnc.settings.showQuantity
);
}
Class: Outlet
Replace this code:
createElement() {
this.element = document.createElement('input');
this.element.id = `cnc-outlet-${this.data.external_id}`;
this.element.type = 'radio';
this.element.name = 'cnc-outlet-element';
this.element.value = this.data.external_id;
this.element.disabled = !this.getAvailability();
this.element.classList.add('cnc-outlet');
}
With:
createElement() {
this.element = document.createElement('input');
this.element.id = `cnc-outlet-${this.data.external_id}`;
this.element.type = 'radio';
this.element.name = 'cnc-outlet-element';
this.element.value = this.data.external_id;
this.element.classList.add('cnc-outlet');
}
Class: AvailabilityTable
Replace this code:
isOutletAvailable() {
for (let product of this.products) {
if (!this.isProductAvailable(product)) {
return false;
}
}
return true;
}
With:
isOutletAvailable() {
return true;
}
Class: AvailabilityTable
Replace:
isProductAvailable(product) {
return product.outletStock >= product.quantity;
}
With:
isProductAvailable(product) {
return true;
}
Class: Availability Table
Replace:
createTextElement() {
this.element = document.createElement('p');
this.element.classList.add('cnc-heading-availability');
if (this.isOutletAvailable()) {
if (this.showQuantity && this.products.length === 1) {
this.element.innerHTML = `${this.products[0].outletStock} available`;
} else {
this.element.innerHTML = 'In stock';
}
this.element.classList.add('cnc-heading-available');
} else {
this.element.innerHTML = 'Out of stock';
this.element.classList.add('cnc-heading-unavailable');
}
}
With:
createTextElement() {
this.element = document.createElement('p');
this.element.classList.add('cnc-heading-availability');
}
Update the file to be set as per the following:
showQuantity=false