shopifyShopify

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.

1

Install the Order Tracking app

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

circle-info

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

chevron-rightInstall the apphashtag

To install the parcelLab app for Shopify:

  1. Log in to Shopify.

  2. Navigate to the parcelLab app’s listing page: https://apps.shopify.com/parcellab-engagearrow-up-right, and then click Install.

    Order Tracking app listing

    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
2

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

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

3

Connect order data

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

circle-check
Order Tracking app connected
chevron-rightSet up order data connectionhashtag

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.

    parcelLab Order Tracking App settings in Shopify Admin
  2. In the Webhooks section, click Install/Update.

    Install button for connecting webhooks

    Your order data is now connected to the parcelLab system.

    Notification indicating successful connection of order data to the parcelLab system
circle-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.

circle-check
chevron-rightSend order data via webhookhashtag

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: https://api.parcellab.com/shopifyarrow-up-right 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/shopifyarrow-up-right 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.

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

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.

4

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:

Order records on the Shipments page
circle-check

Order Status Page

Add the Order Status page via our Shopify app.

1

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.

Order status page installed
chevron-rightInstall the Order Status page via the apphashtag

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

    Order status page installed
  3. To view your installed Order Status page, click Open storefront page.

    Open storefront page button

    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.

chevron-rightEmbed the Order Status page via the Shopify storehashtag

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.

      Pages option in main menu highlighted
    3. Click the Add Page button in the top right-hand corner of the page.

      Add page button highlighted

      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.

      Title field highlighted
    5. Select the Visible option in the Visibility section to make the page available.

      Visibility option highlighted
  2. Click the Show HTML button in the Content section header.

    Show HTML option highlighted

    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.

    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.

    View option 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".

    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.

2

Customize the Order Status page

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

Order status page HTML snippet
chevron-rightCustomize the Order Status page via the apphashtag

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.

    View in Admin button

    The configured pages display for your account.

    Configured pages list
  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.

    circle-info

    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.

circle-exclamation

Returns Portal

Add a Returns Portal for your Shopify store.

1

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
chevron-rightAdd a Shopify Returns Portal in the parcelLab Apphashtag
circle-info

This setup installs the Returns Portal v2 configuration.

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.

    Returns Portal v2 - Shopify API setup form
  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: https://weareparkers.com/pages/returns).

      circle-info

      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.

    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.

2

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.

Returns portal installed
chevron-rightInstall the Returns Portal via the apphashtag

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.

    parcelLab Order Tracking Settings page showing successful connection of account, order data, and order status page.
  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").

    Returns portal installed
  3. To view your installed Returns Portal, click Open storefront page.

    Open storefront page button

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

    Returns Portal login page

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

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

    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
chevron-rightEmbed the Returns Portal via the Shopify storehashtag

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.

    Online Store option in main menu highlighted

    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.

    Title field highlighted

    e. Select the Visible option in the Visibility section to make the page available.

    Visibility option highlighted
  2. Click the Show HTML button in the Content section header.

    Show HTML option highlighted

    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.

circle-exclamation

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
circle-info

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

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.

View option at the top of the page

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

Returns Portal login page

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

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

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
3

Customize the Returns Portal

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

Returns portal HTML snippet
chevron-rightCustomize the Returns Portal via the apphashtag

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.

    View in Admin button

    The configured pages display for your account.

    Configured pages list
  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.

    circle-info

    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.

Last updated

Was this helpful?