CONTENT:

• How to install the map widget on your website?

  • Step 1: Open the Java Script code:

  • Step 2: Add the JavaScript code in Shopify

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

    • 3.1 Delivery method 

    • 3.2 The Shopify store domain

    • 3.3 The unique access key

  • Step 4: Activate the collect points functionality for your courier(s) and save your Logo in xConnector:

    • 4.1 Activate the Collect Points function

    • 4.2 Save your logo for the Thank you page

• How does it work?

• What if the customer doesn't select a locker?

• Return to the locker point

• List of couriers that have implemented the locker pick-up service

Now you can offer your clients an additional delivery method to choose from: Locker delivery. 

• At the Checkout the client choose the Delivery method (Home delivery or Personal Pickup from a locker)
• In Thank you page the client is able to select a locker. The map widget is displayed in Thank you page. 

How to install the map widget on your website?

To integrate the map widget with the lockers on your website, please follow the four steps below:

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 store data by replacing 3 parameters

• Delivery method
• Shopify store domain
• Acces token

Customisation involves replacing a specific text within the code with the relevant data from your store.

Below, I will provide examples for each parameter on how to fill them in Java code:

• the code as it is now and 
• an example of how you should customise it with your data.

3.1 Delivery method 

In Shopify, you create a new delivery option for collect points delivery and then in the JavaScript code, you replace Livrare la punct colectare text with the same name you've just created in Shopify (for collect points delivery).

     Shopify > Settings > Shipping and delivery > Shipping > Manage > Shipping to > Add rate

Keep in mind that the specials characters like ),+,(, / are not allowed. 

Example:

In Shopify, I defined a new delivery method: Ridicare personala and I saved the exact naming for both conditions (free locker delivery and cost locker delivery).

In Javascript code I replaced the text Livrare la punct colectare with the exact name for delivery method I just saved in Shopify: Ridicare personala. 

It is not mandatory to save your delivery method with the name: Ridicare personala or Livrare la punct de colectare - these are just examples. You can choose your own naming but you need to save it exactly the same for both conditions created in Shopify and then to copy-paste it in Javascript, replacing the text:  Livrare la punct de colectare.

Also, keep in mind that the naming can't contain special caracters like  /, ), ! etc

At the Checkout, the clients will see the two delivery methods and they can choose one of them:

- Collect points: Ridicare personala

- Home delivery: Curier rapid

How to replace the delivery method name in the Java code?

3.1.1 Delivery method for multiple couriers 

If you need to install the map and display lockers from multiple couriers, you have to:

• save at least one common word/naming for the delivery method defined in Shopify for all couriers
• in your Java code, replace the == (equals) parameter with the contains parameter. This way, the widget on your website will display all those collection points for all couriers that contains the common word in their delivery method name.

Example:

I want to display on my website the lockers for GLS, DPD and Packeta.

• In Shopify, I define all the delivery methods but with a common word (I choose Ridicare personala as a common naming, you can choose any other name)

• Ridicare personala GLS
• Ridicare personala DPD
• Ridicare personala Packeta

• In the Java code, I will replace the == parameter with the parameter contains, and then I fill-in in the Java code the common name Ridicare personala
  
  

=> On my website, the widget will display all collection points from those couriers that contain the phrase "ridicare personala" in their name (saved in Shopify as the delivery method).

3.2 The Shopify store domain

You must replace in the JavaScript code the shop-domain.myshopify.com text with your own Shopify store domain.

How to replace the Shopify domain in the Java code?

3.3 The unique access key

You must replace in the JavaScript code the text access-token-from-profile-tools with your own store's unique access key.

Copy your unique access key from xConnector > Tools > Access token and paste it into the JavaCode, replacing the text access-token-from-profile-tools.

How to replace the unique access key in the Java code?

My store's unique access key is 999c3468-7a31-47a1-99c5-10d99d1b87ff. So I replaced into the Javascript code the text access-token-from-profile-tools with it.

Step 4: Activate the collect points functionality for your courier(s) and save your Logo in xConnector:

4.1 Activate the Collect Points function

xConnector > Profile > Connected services > Select courier > Collect points > Collect points [ON]

After you follow these steps, the Pick-up points selector will be active on Thank you page on your website.

Depending on the payment method selected for the order, the widget will display (for certain couriers*) all pickup points allowing the payment method used for the order. 

*Keep in mind that only some couriers have the information about the available payment methods for each locker. 

4.2 Save your logo for the Thank you page

xConnector > Profile > Connected services > Select courier > Collect points > Logo image

Fill in your logo url link and save. 

How does it work?

After the customer has selected the delivery method at Checkout, the map with pick-up points is activated on the Thank You page. 

The customer selects the desired pick-up point, and this information is saved at the order level. 

There is a list of all lockers and also the map displaying all the available lockers. 

The nearest pickup point will be recommended based on geolocation (if this option is enabled in the browser).

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 

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. 

List of couriers that have implemented the locker pick-up service

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: support@xconnector.app

Phone: +4 0373 747 991