Shopify

Use parcelLab to provide your customers with a seamless post-purchase experience when buying from your Shopify store.

Overview

Our Shopify integrations make it even easier to track your orders from your carrier network and provide proactive delivery updates to your customers during the outbound and returns journey.

The parcelLab Order Tracking app enables you to easily connect your order data and integrate parcelLab's Order Status page and Returns Portal in your Shopify store to provide your customers with timely delivery status updates and a fully branded returns experience.

Customer Requirements

For successful configuration, the following requirements need to be met:

Shopify Admin access
parcelLab account

Configuring the Shopify Integrations

Follow our instructions below for full details of how to successfully install and configure the parcelLab Order Tracking app and Order Status page and Returns integrations with Shopify.

Order Data Connection

Install the parcelLab Order Tracking app and connect your order data.

Install the Order Tracking app

The parcelLab Order Tracking app is free to download from the Shopify App Store.

You need Shopify admin access and a parcelLab account to be able to install the app.

parcelLab Order Tracking - Deliver a personalized embedded order tracking page | Shopify App Storeapps.shopify.com

Install the app

To install the parcelLab app for Shopify:

Log in to Shopify.
Navigate to the parcelLab app’s listing page: https://apps.shopify.com/parcellab-engage, and then click Install.
The Install app page will display.
Click Install. The app is installed and can be found in your Shopify Admin under the Apps section.

Connect your parcelLab account

Once you've installed the app, if you have a parcelLab account but it is not yet connected to your Shopify domain, please enter your email address and then click Request.

Request integration of Shopify domain to parcelLab account

The request will be submitted and you'll get a notification via the email address provided when your parcelLab account is connected to the Shopify domain (for example: weareparkers.myshopify.com).

Request submitted for integration of Shopify domain to parcelLab account

If you do not have a parcelLab account, please contact your parcelLab representative and our team will get started with onboarding to prepare your account.

After your parcelLab account is connected, you can proceed with connecting order data.

Connect order data

Set up order data connections to send order details from Shopify to parcelLab whenever a customer places or updates an order.

Your product feed will automatically sync during each data request from Shopify to ensure all article images and URLs to your shop are available.

Set up order data connection

The order data connections transmit order data from Shopify to parcelLab when a customer makes an order and any time the order is updated.

To connect your order data from Shopify to the parcelLab system:

Navigate to the Settings page for the parcelLab Order Tracking app in Shopify.
In the Webhooks section, click Install/Update.
Your order data is now connected to the parcelLab system.

If the Webhooks section does not update after clicking Install/Update, click Refresh. If the connection is still not established, please contact your parcelLab representative.

All trackings will have article images and the corresponding URL to the product page in your Shopify store as the information from your product feed is automatically transmitted for each request from Shopify.

Send order data via webhook

If you are not using the order tracking app, you can send order data with two webhooks for "Order Creation" and "Order Update".

To create webhooks for Shopify integration:

From your Shopify admin, go to Settings > Notifications.
Scroll down to the Webhooks section at the bottom of the page.
Click the Create Webhook button, and then enter the details of the webhooks for an order creation and order update as required. For example:
- Event: "Order Creation" Format: "JSON" URL: https://api.parcellab.com/shopify Webhook API version: (should be the latest version) What does this do?: This transmits order data from Shopify to parcelLab at the time that a customer makes an order.
- Event: "Order Update" Format: "JSON" URL: https://api.parcellab.com/shopify Webhook API version: (should be the latest version) What does this do?: This transmits order data from Shopify to parcelLab any time the order is updated. This is primarily for when the order is updated with tracking number information but also transmits item information and order cancellations when applicable.
Click Save when creating each webhook record to ensure they are saved.
Check that your webhook section shows both the webhooks like the below image.
Share your Shopify shop URL with your technical contact at parcelLab.

This is usually in a format like "shopname.myshopify.com". However, it can sometimes vary and it is important that this information is correct to make sure we are connecting your data coming from the webhook to your parcelLab account.

When this is completed, data should be coming through to us exactly as we need it. Our team will double-check to make sure the data is correct.

As for your next step, you will need to provide us your carrier information.

View order and returns data

Orders and return data sync automatically via webhooks, with new orders appearing in Trackings in the parcelLab App after connection and Shopify return data available immediately once the integration is set up.

You can view orders and return registrations for your Shopify store from the parcelLab Order Tracking app on the following pages:

Return records on the Return Registrations page

Click the View in app button or order/tracking number link for the relevant record to open the corresponding tracking in the parcelLab App.

Order Status Page

Add the Order Status page via our Shopify app.

Add the Order Status page

You can install the Order Status page via the Order Tracking app or embed it directly from your Shopify store.

Install the Order Status page via the app

To install the Order Status page from the Order Tracking app:

Navigate to the Settings page for the parcelLab Order Tracking app in Shopify.
In the Order Status Page section, click Install/Update.
This will automatically create a new page and install the Order Status page snippet in your shop and display the relevant details (for example: the slug for the page, "parcellab-order-status").
To view your installed Order Status page, click Open storefront page.
Your page should now display, with an alert stating "We have not yet received tracking data for your order".
If you see this message, everything is connected exactly as needed.

Embed the Order Status page via the Shopify store

You can embed the order status page in your Shopify store using the in-built Shopify integration.

To set up the order status page integration:

To create a new page, do the following:
1. Select the Online Store option in the main menu.
2. Select the Pages option in the Online Store menu.
3. Click the Add Page button in the top right-hand corner of the page.
  A page will display for you to enter the details of the new page.
4. Enter a title for the new page in the Title field.
5. Select the Visible option in the Visibility section to make the page available.
Click the Show HTML button in the Content section header.
The page editing area in the Content section is updated, where you can directly edit the HTML code.

Copy the following code into the page editing area of the Content section. Important: You will need to insert your parcelLab account ID in the plUserId field when copying the tracking snippet below.

parcellab-track-and-trace-snippet.html

<div id="parcellab-track-and-trace">
<img src="https://cdn.parcellab.com/img/loading-spinner-1.gif" alt="loading" />
</div>

<script>
  function plTrackAndTraceStart() {
        window.parcelLabTrackAndTrace.initialize({
          plUserId: TYPE_YOUR_USER_ID_HERE,
          lang: 'en', // default language if not specified for order
          show_searchForm: true,
          show_zipCodeInput: true,
          show_articleList: true,
          use_campaign_banners: true
        });
        var linkTag = document.createElement('link');
        linkTag.rel = 'stylesheet';
        linkTag.href = 'https://cdn.parcellab.com/css/v5/main.min.css';
        document.getElementsByTagName('head')[0].appendChild(linkTag);
  }
</script>
<script async onload="plTrackAndTraceStart()"
src="https://cdn.parcellab.com/js/v5/main.min.js"></script>

The copied HTML code is displayed in the Content section.

Tracking HTML code snippet for the order status page with the parcelLab User ID entered

Click Save.
To confirm the setup has been completed as expected, click the View button at the top of the page.
Your page should now display, with an alert stating "We have not yet received tracking data for your order".
If you see this message, everything is connected exactly as needed.

Customize the Order Status page

You can edit the configuration of the Order Status page snippet and check the results directly from your shop.

Customize the Order Status page via the app

To customize your Order Status page from the Order Tracking app:

Navigate to the Settings page for the parcelLab Order Tracking app in Shopify.
In the Order Status Page section, click View in Admin.
The configured pages display for your account.
Select the Order Status page from the list. The page opens in your Shopify Admin.
Here you can edit the snippet’s configuration, and then click Save at the top of the page.
For further information on configuring the Order Status page snippet, see our Order Status page setup documentation.
When you have saved the changes, click View to review the page in your shop.

The Order Status page setup is currently not persisted. This means that if you reload the Settings page of our Shopify app, the settings are not saved or displayed again.

The Order Status page itself is installed permanently and can be managed like any other page through Shopify Admin.

Returns Portal

Add a Returns Portal for your Shopify store.

Set up a new Returns Portal

If you don't have a Returns Portal configured, you can create a new Returns Portal in the parcelLab App to use in Shopify.

Shopify Returns Portal template configuration

Add a Shopify Returns Portal in the parcelLab App

This setup installs the Returns Portal v2 configuration.

To create a new Returns Portal for Shopify in the parcelLab App:

Do one of the following:
- Navigate to the App Store and install the "Returns Portal v2 - Shopify API" recipe.
- Navigate to Returns > Return Portals, click New Portal, and then select the "Shopify Returns Portal" configuration.
The Returns Portal v2 - Shopify API setup form will display.
Complete the following information:
1. Enter a name for the Returns Portal.
2. Enter a unique identifier code for the Returns Portal.
3. Enter the expected production URL where the Returns Portal snippet will be integrated (for example: https://weareparkers.com/pages/returns).
  You can update the URL later if is different from the one that you enter on install.
4. Click Install.
The Shopify Returns Portal is installed.
Navigate to Returns > Return Portals and select the installed Shopify Returns Portal.
The settings for the Shopify Returns Portal will display.
Click Publish.

The Shopify Returns Portal is published and can be added to your Shopify store.

Add the Returns Portal in Shopify

You can install the Returns Portal via the Order Tracking app or embed it directly from your Shopify store.

Install the Returns Portal via the app

To install the Returns Portal from the Order Tracking app:

Navigate to the Settings page for the parcelLab Order Tracking app in Shopify. A list of configured returns portals will display in the Returns Portal section.
In the Returns Portal section, click Install/Update next to the Returns Portal you want to install.
This will automatically create a new page and install the Returns Portal snippet in your shop and display the relevant details (for example: the slug for the page, "parcellab-returns-us-en").
To view your installed Returns Portal, click Open storefront page.
Your page should now display, showing the returns portal login page.
If you see this page, everything is connected exactly as needed.
The full URL is shown at the bottom of the page and should be added in the Production URL field in Returns Portal Configuration in the App.
Returns Portal URL in Shopify
Returns Portal URL in Production URL field in the App

Embed the Returns Portal via the Shopify store

To set up the returns portal integration:

To create a new page, do the following:
a. Select the Online Store option in the main menu.
b. Select the Pages option in the Online Store menu.
c. Click the Add Page button in the top right-hand corner of the page.
A page will display for you to enter the details of the new page. d. Enter a title for the new page in the Title field.
e. Select the Visible option in the Visibility section to make the page available.
Click the Show HTML button in the Content section header.
The page editing area in the Content section is updated, where you can directly edit the HTML code.
Copy the following code for the returns portal v2 snippet into the page editing area of the Content section.

You will need to insert your returns portal code and parcelLab account ID or technical account name (for example: 1619884 or weareparkers) in the code and account-name fields when copying the snippet below.

<pl-returns-portal
  code="your-portal-code"
  account-name="parcellab-account-name"
>
</pl-returns-portal>

<script
  type="module"
  src="https://returns-app.parcellab.com/static/plugin/js/loader.mjs"
>
</script>

The copied HTML code is displayed in the Content section.

Tracking HTML code snippet for the returns portal with the returns portal code and parcelLab User ID entered

If the Shopify store does not have a white background, add this HTML under the existing code.

<style>
div.pl-toggle-section-header { background-color: transparent !important; }
</style>

4. Click Save. The Shopify integration setup is saved.

5. To confirm the setup has been completed as expected, click the View button at the top of the page.

Your page should now display, showing the returns portal login page.

If you see this page, everything is connected exactly as needed.

The full URL is shown at the bottom of the page and should be added in the Production URL field in Returns Portal Configuration in the App.

Returns Portal URL highlighted in Shopify

Returns Portal URL highlighted in the Production URL field in the App

Customize the Returns Portal

You can edit the configuration of the Order Status page snippet and check the results directly from your shop.

Customize the Returns Portal via the app

To customize your Order Status page from the Order Tracking app:

Navigate to the Settings page for the parcelLab Order Tracking app in Shopify.
In the Returns Portal section, click View in Admin next to the installed Returns Portal.
The configured pages display for your account.
Select the Returns Portal from the list. The page opens in your Shopify Admin.
Here you can edit the snippet’s configuration, and then click Save at the top of the page.
For further information on configuring the Returns Portal v2 snippet, see our Returns Portal setup documentation.
When you have saved the changes, click View to review the page in your shop.

PreviousApp Store

NextApple Wallet Order Tracking

Last updated 13 days ago

Was this helpful?