How to Integrate a Client’s Existing Logistics Website into Shopify as a Shipping Automation App?

Shopify Apps
,
1

Hi Shopify experts,

I’m working for a client who runs a logistics service with a fully functional website. They want to integrate their existing website into Shopify as an app, allowing Shopify merchants to automate their shipping processes. The goal is to embed the current website into Shopify Admin and have it fetch and process Shopify order details, as well as send fulfillment updates (like tracking numbers) back to Shopify.

I need to achieve this without rebuilding the entire website. Specifically:

  1. Embed the existing website into Shopify (using Shopify Admin/Embedded App).
  2. Access Shopify order details via the Shopify API.
  3. Automate shipping workflows using the existing platform and sync order data between Shopify and the client’s platform.
  4. Send back fulfillment info (like tracking numbers) to Shopify.

I’ve looked into Shopify App Bridge, Shopify API, and Webhooks, but I’m not entirely sure how to approach this as a seamless integration for the client.

Could someone provide a detailed guide or share best practices for integrating an external website into Shopify as a shipping automation app?

Any advice or resources would be much appreciated!

1 Like
2

Hello,

It is doable. If I understand correctly you wanted an integrated experience by staying in Shopify Admin but leveraging your existing order/fulfilment tools without too much dev effort.

Embed the existing website into Shopify (using Shopify Admin/Embedded App).

You can build an embedded app (custom app specifically built your client shop). Apart from AppBridge loading your existing web app, the main thing you need to the authorization between Shopify Admin store and your web app/site, so your existing web app/site has OAuth access to invoke Shopify Admin APIs for your store.

Also, ensure your website allows embedding in an iframe by setting appropriate Content-Security-Policy and X-Frame-Options headers, more details here .

Access Shopify order details via the Shopify API.

Once your embedded app established the authorization, your session storage would have obtained an access token which can be used to invoke order related APIs for your store.

Automate shipping workflows using the existing platform and sync order data between Shopify and the client’s platform.

Depending on the source of the order - I assume your wanted to use Shopify online store, so the order is captured by Shopify and you can setup webhook to push new orders back to your website for fulfilment. You will need to build something here to integrate orders/shipments (e.g. webhook, scheduled pulling, etc).

Send back fulfillment info (like tracking numbers) to Shopify.

This would be easy once you sort out above processes - the order is already in your system with a Shopify order ID, you can invoke the relevant Shopify API to attach a track number to the corresponding order. Since the order/fulfilment are automatically processed via webhook/background integrations, the order/fulfilment information on the embedded app and Shopify admin orders screen will be pretty much in sync in realtime. Your frontend/website should not need too much dev effort, the main effort would be building the order/fulfilment flow back and forth.

Hope this helps - let me know if you need other advise, happy to share my thoughts. Have done this type of order/fulfilment integrations for years with various e-commerce platforms.

3

Hi @JoeMetmos ,

Thanks for the detailed explanation! However, I’m still feeling quite confused. Could you help me by breaking it down step by step? I want to understand the actual steps I need to perform to achieve this integration.

Looking forward to your guidance.

4

Hello @goswami_abhi ,

In your case, there are 2 main strategies you can follow:

  1. Use ready 3rd party apps and services. It is an affordable and fast method with no technical knowledge required, but it is not very reliable. You need to understand that there can’t be such an app that will transform each Shopify store to an app without any issues - you will need to fix bugs, adjust styling, and so on. And don’t forget that you will pay a monthly fee for using the app.
  2. Develop an app 100% from scratch. It is the most reliable, secure, and trouble free option as you build an app following your unique business needs. This option allows you for customizations of an app, integration of reach features, and so on. But it is a more expensive option definitely.

My team has a huge experience developing apps from scratch, as well as improving and editing apps to integrate into the Shopify ecosystem and publish in the Shopify app store. If you need any consultation or assistance, please don’t hesitate to ask.

Best regards,
Anastasia

5

Hi @goswami_abhi ,

Can I ask if you are a developer or have a developer to do this for you?

I can share my thoughts on the general approach here but it may not make sense to you if you’re not hands-on on the tech details. Let me know what aspect you’re confused about - is it the solution? the tools? or you want some links to dev resources that you can reference?

Cheers, Joe

6

Hi @JoeMetmos

I’m not a developer myself, so I’d appreciate it if you could provide me with the steps I can share with my developer to implement this. Any resources, examples, or references would be really helpful.

Thank you for your assistance!

7

Sure, what is your tech stack of the “existing website” that you wanted to embedded in Shopify Admin? Depending on the tech stack, there might be different approaches when it comes to implementation, coz the the main goal here is to reuse.

8

We are using React for the frontend and Node for the backend.

9

@goswami_abhi The following could be a high level approach for you to get started. Let’s focus on embedding your existing app first.

First, you need to create a “Custom app” as your existing “website” is not suitable for publishing to app store. It is a bespoke solution for a specific store. Initialize a new app via Shopify CLI

Set your hosted Node backend URL to App URL and Allowed redirection URLs in the app configuration:

https://shopify.dev/docs/apps/build/cli-for-apps/app-structure#root-configuration-files

Implement OAuth so your Node backend can invoke Shopify Admin API:

https://github.com/Shopify/shopify-app-js/tree/main/packages/apps/shopify-api

https://github.com/Shopify/shopify-app-js/blob/main/packages/apps/shopify-api/docs/guides/oauth.md

Use App Bridge to embed your react app inside Shopify Admin - install @shopify/app-bridge-react

https://shopify.dev/docs/api/app-bridge-library#react

For development purpose, it’s best to use Shopify CLI and a development store to launch the app locally.

Cheers.

10

@goswami_abhi do you have further questions on the advice provided? Let me know if your team still looks for a solution.