# Shopify ## 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. {% stepper %} {% step %} #### Install the Order Tracking app The parcelLab Order Tracking app is free to download from the Shopify App Store. {% hint style="info" %} You need Shopify admin access and a parcelLab account to be able to install the app. {% endhint %} {% embed url="" %}

Install the app

To install the parcelLab app for Shopify: 1. Log in to Shopify. 2. Navigate to the parcelLab app’s listing page: , and then click **Install**.

The Install app page will display.

Install app page for the Order Tracking app

3. Click **Install**.\ The app is installed and can be found in your Shopify Admin under the Apps section.

parcelLab Order Tracking App settings in Shopify Admin

{% endstep %} {% step %} #### 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

{% hint style="info" %} 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. {% endhint %} After your parcelLab account is connected, you can proceed with connecting order data. {% endstep %} {% step %} #### Connect order data Set up order data connections to send order details from Shopify to parcelLab whenever a customer places or updates an order. {% hint style="success" %} Your product feed will automatically sync during each data request from Shopify to ensure all article images and URLs to your shop are available. {% endhint %}

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: 1. Navigate to the **Settings** page for the parcelLab Order Tracking app in Shopify.

2. In the **Webhooks** section, click **Install/Update**.

Your order data is now connected to the parcelLab system.

Notification indicating successful connection of order data to the parcelLab system

{% hint style="info" %} 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. {% endhint %} {% hint style="success" %} 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. {% endhint %}

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: 1. From your Shopify admin, go to **Settings > Notifications**. 2. Scroll down to the **Webhooks** section at the bottom of the page. 3. 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**: \ **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**: \ **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. 4. Click **Save** when creating each webhook record to ensure they are saved. 5. Check that your webhook section shows both the webhooks like the below image.

Webhooks section with both webhooks displayed

6. Share your Shopify shop URL with your technical contact at parcelLab. {% hint style="info" %} 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. {% endhint %} 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.

{% endstep %} {% step %} #### 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: {% tabs %} {% tab title="Shipments" %}

{% endtab %} {% tab title="Return Registrations" %}

Return records on the Return Registrations page

{% endtab %} {% endtabs %} {% hint style="success" %} Click the **View in app** button or order/tracking number link for the relevant record to open the corresponding tracking in the parcelLab App. {% endhint %} {% endstep %} {% endstepper %} ### Order Status Page Add the Order Status page via our Shopify app. {% stepper %} {% step %} #### 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: 1. Navigate to the **Settings** page for the parcelLab Order Tracking app in Shopify.

parcelLab Order Tracking Settings page showing successful connection of account and order data.

2. In the **Order Status Page** section, click **Install/Update**.

Install button for connecting order status page

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").

3. 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".

Order Status page preview with "We have not received tracking data for your order." message

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: 1. To create a new page, do the following: 1. Select the **Online Store** option in the main menu.

Online Store option in main menu highlighted

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.

2. 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. 3. 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.

<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

4. Click **Save**. 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, 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.

{% endstep %} {% step %} #### 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: 1. Navigate to the **Settings** page for the parcelLab Order Tracking app in Shopify.

parcelLab Order Tracking Settings page showing successful connection of account, order data and order status page

2. In the **Order Status Page** section, click **View in Admin**.

The configured pages display for your account.

3. Select the Order Status page from the list.\ The page opens in your Shopify Admin.

Shopify page showing code for the Order Status page

4. 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.

5. When you have saved the changes, click **View** to review the page in your shop. {% hint style="warning" %} 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. {% endhint %}

{% endstep %} {% endstepper %} ### Returns Portal Add a Returns Portal for your Shopify store. {% stepper %} {% step %} #### 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

{% hint style="info" %} This setup installs the Returns Portal v2 configuration. {% endhint %} To create a new Returns Portal for Shopify in the parcelLab App: 1. Do one of the following: * Navigate to the App Store and install the "Returns Portal v2 - Shopify API" recipe.

Returns Portal v2 - Shopify API recipe in the App Store

* Navigate to Returns > Return Portals, click **New Portal**, and then select the "Shopify Returns Portal" configuration.

Shopify Returns Portal configuration in Returns > Return Portals

The Returns Portal v2 - Shopify API setup form will display.

2. 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: ).

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. 3. Navigate to Returns > Return Portals and select the installed Shopify Returns Portal.

The settings for the Shopify Returns Portal will display. 4. Click **Publish**. The Shopify Returns Portal is published and can be added to your Shopify store.

{% endstep %} {% step %} #### 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: 1. 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.

2. In the **Returns Portal** section, click **Install/Update** next to the Returns Portal you want to install.

Install button for connecting returns portal

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").

3. 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 highlighted in Shopify — Returns Portal URL in Shopify

Returns Portal URL highlighted in the Production URL field in the App — 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: 1. 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.

2. 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. 3. Copy the following code for the returns portal v2 snippet into the page editing area of the **Content** section. {% hint style="warning" %} 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. {% endhint %} ```html ``` 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

{% hint style="info" %} If the Shopify store does not have a white background, add this HTML under the existing code. {% endhint %} ```html ``` 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. {% hint style="info" %} 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. {% endhint %}

{% endstep %} {% step %} #### 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: 1. Navigate to the **Settings** page for the parcelLab Order Tracking app in Shopify.

parcelLab Order Tracking Settings page showing successful connection of account, order data, order status page and returns portal

2. In the **Returns Portal** section, click **View in Admin** next to the installed Returns Portal.

The configured pages display for your account.

3. Select the Returns Portal from the list.\ The page opens in your Shopify Admin.

Shopify page showing code for the returns portal

4. 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.

5. When you have saved the changes, click **View** to review the page in your shop.

{% endstep %} {% endstepper %}