Introduction 

V0.2 The locker map available for the new Checkout version

• How It Works

• Steps to Implement the Locker Map Widget 

• Enhancing Clarity in Checkout for the customers

• When the locker is not selected, the store can receive a notification by email

V0.1 The locker map available for the old Checkout version (Deprecated)

Introduction 

The Locker Map Module is an innovative addition for your website, providing a convenient and secure way for your customers to receive their orders. 

This module displays a map of lockers locations allowing customers to select the most convenient pickup point for their packages. 

The locker map can display one or more courier lockers depending on how many couriers you have connected in xConnector.

There are two ways you can display the map of lockers, depending on what type of Shopify plan you have:

1. Shopify Plus: If you're using Shopify Plus, the lockers map will show up on the Checkout page. 

2. Other Shopify Plans: If you have a different Shopify plan than Shopify Plus:

• V01 Deprecated version: the Delivery method will be displayed at the Checkout, and the Lockers map will be displayed on the Thank You page after the order is placed

• V02 New checkout version: the Delivery method will be displayed at the checkout and the Locker map will be displayed in the email Order confirmation 

In this documentation, you can find the solution for implementing the map widget on shops with other plans than Shopify Plus. 


If you already have Shopify Plus please contact us at: [email protected] to guide you towards an alternative implementation solution that appears at Checkout page. 

V0.2  The locker map available for the new Checkout version

(This is an initial proposal for stores that do not have Shopify Plus. We are still looking for alternatives)

With the recent changes in Shopify that remove access to customizing the Checkout and Thank You pages, there is no longer a method to add scripts in the Order Status Page - Additional Scripts section to display the locker map on the Thank You page. Only stores subscribed to Shopify Plus can still benefit from this functionality, allowing the locker map to be displayed directly in Checkout.

To support the Shopify stores that do not have Shopify Plus activated, we have implemented a solution that still allows them to offer locker delivery to their customers. 

How It Works:

1. The Locker Delivery shipping method is displayed on the Checkout page.
2. The customer selects the Locker Delivery option and completes the order.
3. The customer receive the Order Confirmation email sent by Shopify.
4. In the email body, a link is provided. When accessed, it opens the locker map.
5. The customer selects a locker, and it is saved at the order details level.
6. In xConnector, the order is marked as Locker Delivery, has a selected locker, and you can generate a shipping label with locker delivery.

Steps to Implement the Locker Map Widget in the Order Confirmation Email:

1. Save the script for adding the locker map in the Order Confirmation email

   (click here to open the new script - V0.2 script) 

2. Shopify > Settings > Notifications > Customer Notifications > Order Confirmation > Edit Code 

3. Add the script just before the following line of code:

   {% if order_status_url %}
   
   

4. Replace the following two parameters in the script:

   • locker-delivery: The shipping method name defined in Shopify > Settings > Shipping and Delivery (you can name it as you wish; "Locker Delivery" is just an example).

   • access-token-from-profile-tools: The access token from xConnector > Profile > Tools > Access Token.

5. In xConnector, activate the locker function for the connected couriers:

   • xConnector > Profile > Connected Services > Courier > Collect Points > Collect Points [ON] > Save

Enhancing Clarity in Checkout for the customers

To make it clearer for customers where they will select the locker, you can display a helper text below the Locker Delivery method in Checkout:

• Shopify > Settings > Shipping and Delivery > Edit Rate

After the customer has completed the order, they will receive the Shipping Confirmation, which includes this link.

The customer clicks on the Choose the locker link, the locker map opens, and then selects the desired locker.

One of the most common mistakes when saving the script is using quatation marks in a different format than the ones accepted by the script especially in the following line of code

{% if shipping_method.title == "delivery-method-name-from-Shopify" and showMap == true %}

✅ "" (correct)
❌ ““ (incorrect)

How to check if the locker is selected:

• Go to xConnector

• Click on the order number

• Up-right there is Additional details

• Here should be displayed a Location ID, the Location name and the ConnectorID

When the locker is not selected, the store receives a notification by email:

It can happen that in some cases, the customer might forget selecting a locker.  To be automatically notified when a locker is not selected, you can implement the flow from here.

Then, to save a locker to the order or modify an existent one, you can select the desired locker from the map by clicking the icon below. 

You can find it on the Recipient page when generating an individual shipping label.

This feature is available to Advanced plan

Feel free to contact us if you need any further information:

Chat: click on the blue chat icon (bottom-right)

E-mail: [email protected]

Phone: +4 0373 747 991

V0.1 The locker map available for the old Checkout version (Deprecated)

How does it work?

How many couriers would you like to display on the locker map?

    1. One Locker Delivery Option at Checkout and One Courier Locker Option on the Map
    2. One Locker Delivery  Option at Checkout and Multiple Couriers Locker Options on the Map
    3. Multiple Couriers Options at Checkout  and Just One Courier on the Map

How does it work?

1. The customer chooses the delivery method at Checkout and the lockers map  it displays on the Thank You page

2. The customer select a locker, and this information is saved in the order.

3. If the customer's browser has geolocation enabled, the nearest pick-up point will be recommended based on their location. Or he can just search his favorite locker. 

4. You can automatically generate the shipping labels for lockers delivery.

How many couriers would you like to display on the locker map?

When configuring the lockers map for your lockers delivery options, you have three flexible choices:

1. One Locker Delivery Option at Checkout and One Courier Locker Option on the Map

• Description: The map displays lockers for just one courier.

• Workflow:

  • Checkout: Locker delivery

  • Thank You Page: The map displays only the lockers for one courier.

2. One Locker Delivery  Option at Checkout and Multiple Couriers Locker Options on the Map

• Description: The map displays all the couriers activated in xConnector, offering customers a broader range of choices and enabling them to select the most convenient pickup location from various available services.

• Workflow:

  • Checkout: Locker delivery

  • Thank You Page: The map displays all the lockers for the couriers you activated under the function "Collect Points Delivery".

3. Multiple Couriers Options at Checkout  and Just One Courier on the Map

• Description: The map displays only the lockers from the courier selected at checkout. This option is recommended when you have multiple couriers for locker delivery that may (or not) have different delivery prices, and you wish to display only one courier’s lockers on the map, the one selected by the client at checkout. 

• Workflow:

  • Checkout:

    • Locker delivery for Courier 1 - delivery price x EUR

    • Locker delivery for Courier 2 - delivery price y EUR

    • Locker delivery for Courier 3 - delivery price z EUR

  • Thank You Page: The map displays only the lockers for the one courier selected by the client at checkout.

How to install the map widget on your website? 

Depending on how many couriers would you like to display on the map, there are different settings for each option. 

Please, find below 3 different option for displaying the Lockers map.

1. One Locker Delivery Option at Checkout and One Courier Locker Option on the Map

• Description: The map displays lockers for just one courier.

To integrate the map widget with the lockers on your website, you must follow just four steps:

Step 1: Open the Java Script code: click here to open the Java Code. 

Step 2: Add the JavaScript code in Shopify

Shopify > Settings > Checkout > Order status page scripts > Script > Copy-Paste the JavaScript code here > Save

Step 3: Customize the Java code script with your website data by replacing 3 parameters

• Delivery method

• Shopify store domain

• Acces token

The code customisation involves replacing 3 specific texts within the code with the relevant data from your store. Also, you must activate the functionality Collect points for the courier. 

This is the Java Code and the parameters marked in red that you should replace:

1. Delivery method

First you need to add a new delivery method in Shopify:

Shopify > Settings > Shipping and delivery > General shipping rates > General - Shipping zones > Add rate

Keep in mind that special characters like |,+,, / are not allowed in the Java script so try to name the rate without special characters. 

At the Checkout, the clients can opt from two delivery methods:

- Home delivery (your own home delivery name)

- Locker delivery (your own locker delivery name)

Search for the text delivery-method-name-from-Shopify in the Java code and replace it with your own rate name. 

Example:

In Shopify, I defined a new delivery method: Locker delivery.

In Javascript code I replaced the text delivery-method-name-from-Shopify with the exact name for the delivery method I saved in Shopify: Locker delivery.

delivery-method-name-from-Shopify = your rate name 

2. Your shop domain 

Search for the text shop-domain.myshopify.com in the Java code and replace it with your own shopify domain. 

Example:

My Shopify domain store is wowshop.myhopify.com, so I make sure that I replace it with the same name in the JavaScript code.

your-shop-domain.myshopify.com = your shopify domain

3. Acces token

Search for the text acces-token-from-xConnector-tools in the Java code and replace it with your own access token. 

Your unique acces token is here:

xConnector > Profile > Tools >  Access token 

Copy your unique access token and replace the text in the Java code.

access-token-from-profile-tools = your own access token

Example:

My unique access key is 999c3468-7831-47a1-99c5-10d99d1b87ff so I copy and paste it into the Java script.

Step 4: Activate the collect points functionality for your courier and save your Logo into xConnector:

• Logo image: fill in your logo image in .jpg format

• Go to xConnector > Profile > Connected services > Select courier > Collect points - Collect points [ON] > Save

Now, simply place a test order to see how your clients can view and interact with the map of lockers.

Example:

I activated the functionality Collect points just for Cargus

On the map it will be displayed only one courier that I activated - Cargus lockers. 

One of the most common mistakes when saving the script is using quatation marks in a different format than the ones accepted by the script especially in the following line of code

{% if shipping_method.title == "delivery-method-name-from-Shopify" and showMap == true %}

✅ "" (correct)
❌ ““ (incorrect)

2. One Locker Delivery  Option at Checkout and Multiple Couriers Locker Options on the Map

•      Description: The map displays all the couriers activated in xConnector, offering customers a broader range of choices and enabling them to select the most convenient pickup location from various available services.

To integrate the map widget with the lockers on your website, you must follow four steps:

Step 1: the same as for One Locker Delivery Option at Checkout and One Courier Locker Option on the Map

Step 2: the same as for  One Locker Delivery Option at Checkout and One Courier Locker Option on the Map

Step 3: the same as for One Locker Delivery Option at Checkout and One Courier Locker Option on the Map

Step 4: Activate the collect points functionality for your as may couriers and save your Logo into xConnector:

• Logo image: fill in your logo image in .jpg format

• Go to xConnector > Profile > Connected services > Select courier > Collect points > Collect points [ON] > Save       

           

Repet Step 4 for as many couriers you wish to display the lockers on the map.                     

Example: 

I activated the functionality Collect points for FanCourier, Sameday, Cargus and DPD.

On the map it will be displayed lockers for all 4 couriers that I activated -  FanCourier, Sameday, Cargus and DPD. 

Once the map is displayed, there is also an option to filter which courier's locker you want to see on the map

1. Filters - Flag - Collect points delivery: it will display all the orders with Locker delivery method

2. Filters - Connector - how many orders 

One of the most common mistakes when saving the script is using quatation marks in a different format than the ones accepted by the script especially in the following line of code

{% if shipping_method.title == "delivery-method-name-from-Shopify" and showMap == true %}

✅ "" (correct)
❌ ““ (incorrect)

3. Multiple Couriers Options at Checkout  and Just One Courier on the Map:

•  Description: the map displays lockers for just one selected courier in the Checkout page.
  This option is recommended when you have multiple couriers to offer for lockers delivery that may have (or not) different delivery prices and you wish to display on the map only one courier’s lockers.

Example: I display three couriers in the checkout  . The map only dispalys the courier's locker selected here (in the checkout page)

If you select Locker delivery Cagus - the map will diplay only Cargus Lockers

If you select Locker delivery Fan Courier - the map will diplay only Fan Courier Lockers

If you select Locker delivery Sameday - the map will diplay only Sameday Lockers

To integrate the map widget with the lockers on your website, you must follow four steps:

Step 1: Open the Java Script code: click here to open the Java Code.

Step 2: Add the JavaScript code in Shopify

Shopify > Settings > Checkout > Order status page scripts > Script > Copy-Paste the JavaScript code here > Save

Step 3: Customize the Java code script with your website data by replacing 3 parameters and adding a condition and a constant for each courier

• Delivery method

• Shopify store domain

• Acces token

• Adding a Condition each courier

• Adding a constant for each courier

The example below shows the code for 2 couriers but you can add as many you wish

This is the Java Code and the parameters marked in red that you should replace:

1. Delivery method

First you need to add a new delivery method in Shopify for each courier

Shopify > Settings > Shipping and delivery > General shipping rates > General > Shipping zones > Add rate

Keep in mind that special characters like |,+,, / are not allowed in the Java script so try to name the rate without special characters. 

At the Checkout, the clients can opt from two or more locker deliveries methods:

Example for 2 courier options with two different prices:

Search for the text common-word-for-delivery method-name-from-Shopify

 in the Java code and replace it with a common word(s) from the two delivery methods.

Example:

In Shopify, I defined two rates name:

Locker delivery Sameday

Locker delivery Fan courier

-> the common words I use:  Locker delivery

In Javascript code I replaced the text common-word-for-delivery method-name-from-Shopify with the common words saved in Shopify for the rates name: Locker delivery.

common-word-for-delivery method-name-from-Shopify = common word(s) 

2. Your shop domain 

Search for the text shop-domain.myshopify.com in the Java code and replace it with your own shopify domain. 

Example:

My Shopify domain store is wowshop.myhopify.com, so I make sure that I replace it with the same name in the JavaScript code.

your-shop-domain.myshopify.com = your shopify domain

3. Acces token

Search for the text acces-token-from-xConnector-tools in the Java code and replace it with your own access token. 

Your unique acces token is here:

xConnector > Profile > Tools >  Access token 

Copy your unique access token and replace the text in the java code.

access-token-from-profile-tools = your own access token

Example:

My unique access key is 999c3468-7831-47a1-99c5-10d99d1b87ff so I copy and paste it into the Java script.

5. Adding a Condition each courier

Search for the text courier1-name-from-Delivery-method-name in the Java code and replace it with the courier’s name from the rate name.

6. Adding a constant for each courier

Search for the text xconnector-courier-name in the Java code and replace it with the constant. For each courier, xConnector has a constant to recoqnize the courier in our database. Find below our constants for each courier:

Step 4: Activate the collect points functionality for each courier and save your Logo into xConnector:

• Logo image: fill in your logo image in .jpg format

• Go to xConnector > Profile > Connected services > Select courier > Collect points > Collect points [ON]  Save

After the settings above: at the checkout you’ll offer two Locker delivery options and the client can choose one of them. The map will only display the lockers from the courier that he selected.

One of the most common mistakes when saving the script is using quatation marks in a different format than the ones accepted by the script especially in the following line of code

{% if shipping_method.title == "delivery-method-name-from-Shopify" and showMap == true %}

✅ "" (correct)
❌ ““ (incorrect)

What if the customer doesn't select a locker?

If the customer has not selected a pickup point from a locker on the Thank You page, there are three ways to save the pickup address in the order.

1. You can tell them to revisit the Thank you page by clicking the link View order in the Shipping Confirmation e-mail. The map popup window will open and they can select their desired pickup location
   

2. Alternatively, you can select it for them by accessing the order's details in Shopify, then selecting "More actions" and "View order status page."

• See the order in xconnector - Click on the round button 

• Click on More actions - View order status page - The map popup window will open and you can select the desired pickup location

3. When generating the shipping label at Recipient tab >  Collect point: here you can select the locker 

Cool Tricks That Help You:

We know that some customers might close or forget to select a locker on the Thank You page. That's why we've got you covered with a solution: Every time an order is placed for locker pickup without a selected locker, you'll receive an email notification with the order number. This way, you can contact the customer and update the order yourself or guide them to do it.

Just import this Flow and you'll automatically receive an email everytime an order place for locker delivery doesn't have a locker selected

- Shopify > Apps > Flow 

- Import and activate the Flow
- Edit and replace the current email address with your own

xConnector - The orders panel

xConnector will display the selected delivery method and the collection point. 

xConnector - Filters

You can filter the orders based on the delivery method. Please see the filters on the left side of the screen in the Shipping carrier section: 

Shipping label generation

When generating a shipping label for a pickup-from-locker order, you need to select the corresponding service type. Depending on each courier, you need to select the appropriate service type for delivery to a locker. In the first tab - Courier - Service tab field.

For example: 

Courier Sameday - Service type Next Locker

Courier Urgent - Service Type Easy Collet

Courier DPD - Service Type Parcel Shop

PIN to unlock

Once the courier has placed the package in the locker, an email will be automatically sent to the customer with the PIN for locker access.

Return to the locker point

Your customers can return to the locker. If the integrated courier allows this option, you can generate a return shipping label to the locker by following the steps below:

1. Access the order details (click on the order number) - the order details page will open.

2. Click on the 'Create return shipment' button - the pop-up for generating the shipping label will open.

   • Courier: depending on the courier, select the Service type needed for return at a locker. For example Sameday has the Service type: Locker NextDay

   • Pickup address: here is he default locker address, where the client received for the first time his package

   • Content: no need to fillin

   • Observation: check the option if needed
     

3. Go through the steps to generate the shipping label, Save, and Print.

4. you will find the access code to open a locker at the Timeline section (click on the order number - scroll down - Timeline)

5. Give this code to your client, he will be able to open the locker and the courier will pick it and deliver to you. 

The list of couriers that have implemented the Locker service in xConnector

Please, keep in mind that not all couriers offer the Pick-up option.

See below the list of the couriers that have activated the pick-up points widget till now:

• Sameday - EasyBox

• FanCourier - FanBox

• Packeta

• GLS

• MyGLS

• Cargus - Ship&Go

• DPD Romania

• DPD Hungary

• Speedy BG

• Econt

• Innoship

This feature is available to Advanced plan

Feel free to contact us if you need any further information:

Chat: click on the blue chat icon (bottom-right)

E-mail: [email protected]

Phone: +4 0373 747 991