Custom Shopify Integrations Using Web Apps

One common challenge our ecommerce website clients have is when their Shopify store grows past the capabilities of the default Shopify features. For example, as your site grows you’ll need to integrate with different shipping providers, SMS gateways, product customisers and other systems, meaning you’ll need to develop custom integrations using the Shopify API, SDKs and notification frameworks.

All apps in the Shopify App Store use the API, notification frameworks and other libraries available to integrate with the store and provide this functionality. The Shopify App Store is great if you can find a reliable app that does exactly what you want, however if you have a different requirement or want to do something slightly differently you will need to develop your own custom app.

We’ve noticed a few patterns in the problems Shopify owners face over the last 18 months. In this article, we’ll take you through some of our digital agency solutions to give you an idea of what can be achieved, including third party logistics integrations, custom pricing tiers based on a subscription membership system and SMS notifications to customers for easy reordering.

But first, a little bit of theory on how it all connects together.

How Shopify Integrations Work

There are five key integration points available with the Shopify platform for customised solutions. In most cases, you will end up using a combination of them to achieve the desired outcome. These integration points are:

1. Shopify API – this is the key integration point that allows you to access all data within your store and create or modify a restricted set of data, and in 99% of backend integrations will be the core of the solution. The Shopify API is RESTful – which means that most other systems are able to communicate easily with the Shopify API.
2. Webhooks – these are realtime notifications that can be sent from Shopify to external systems to notify them that an action has occurred e.g. a new order has been made, or a new customer been created. This is a very effective mechanism for real time updates e.g. executing realtime order fulfilment or keeping customer data up to date in an external CRM.
3. Shopify JS Buy SDK – This is a relatively new library that allows you to embed your Shopify store on another website e.g. your WordPress blog. The WordPress Shopify plugin that has been released within the last couple of weeks uses this SDK. Previously, the alternative to this was to redirect back to Shopify using the cart and line item properties.
4. Shopify Mobile Buy SDK – This is similar to the JS SDK in terms of functionality and is available natively for both iOS and Android. If you want to do any mobile integration with Shopify from a user perspective this is the library to use.
5. Hosted Payment SDK – This integration allows you to use your own hosted payment page and gateway to accept payments from customers, which is useful if you are using a gateway that has not been included into the current Shopify platform.

Depending on the integration chosen, this ends up working one of two ways:

1. For the JS and Mobile Buy SDKs (3 & 4 above), these are integrated directly into the website or app.
2. For the Shopify API, webhooks and hosted payment SDK, these connect to a custom web app before connecting to the external system. We commonly use Laravel or its offshoot Lumen to be facilitate this as they work well in a variety of situations and environments. You will need to obtain a separate hosting server for this custom web app and maintain it as a separate web application.

If that might be too much technical information (or too little) let’s go through a few examples to be able to understand how it works.

Example 1 – Third Party Logistics (3PL) Integration

This is one of the most common use cases that we have seen and is relatively straightforward to understand but can develop greater complexity quickly depending on the exact fields to be copied between the two systems. Generally, the workflow goes something like:

1. Order notifications are pushed via webhooks from Shopify to the custom web app.
2. These order notifications are stored in the custom web app database.
3. The order notifications are then either passed on in real-time or via a batch file, depending on the requirements of the 3PL system. Logging and error handling needs to be put in place to ensure the orders are traceable and that errors are monitored and recoverable.
4. Tracking numbers and order updates are pulled back by the custom web app and stored in the database.
5. These order updates are pushed back to Shopify via the Shopify API.
6. Old orders are cleaned out by the system on a regular basis.

This integration reduces manual processing time and human error, and at volumes of hundreds or thousands of orders per day can be a very effective time saver for your online store and improve your customer service levels.

Viajiyu – Leafcutter Shopify Site

Example 2 – Custom Pricing via Subscribed Members

This is a more unique piece we did a few years ago to integrate the recurring payment gateway (Recurly) with a paid annual membership, and then updating prices of products in the store based on the membership level purchased (i.e. pricing tiers). The workflow is:

1. User selects a specific membership level to purchase. The user is redirected to the recurring payment gateway page to complete the purchase.
2. A webhook from the recurring payment gateway is sent to the custom web app.
3. The custom web app updates the customer record in Shopify via the API with a metafield denoting their membership level. The custom web app continues to listen for update webhooks (cancellations, suspensions, etc) from the recurring payment gateway to update the customer record accordingly.
4. Modifications were made to the theme to display different priced variants for each tier of customer.

The above solution was a very creative way to achieve the functionality requested, in particular step 4. Like most problems, there is a way to achieve the outcome if you can figure out how to use the built in functionality of the system in a creative way.

Example 3 – SMS Marketing for Increased Reordering

This is a scenario similar to the third party logistics integration. This workflow can be used to follow up customers that may want to repurchase from you, and is ideal for selling products that can be continually reused without requiring significant variation (e.g. nappies, washing powder or other consumable products). The workflow is:

1. Order notifications are pushed via webhooks from Shopify to the custom web app.
2. These order notifications are stored in the custom web app database.
3. On a regular basis, the custom web app pushes these to an SMS gateway like Edgility
4. Responses are then pulled back from Edgility and updates are pushed to the orders in the Shopify system. Depending on the workflow of your store, these can be created as new orders and sent for rebilling, or updates to older orders and then allowance for manual recapturing. In the ideal situation, you have a solution in place that allows for variable ongoing billing, however this is a much more complex solution generally beyond the reach of most Shopify stores.

This solution can be a relatively inexpensive way to get your customers to re-engage with your store without signing them up to an ongoing subscription, reducing buyer friction whilst still maintaining some form of recurring revenue.

We’ll Make it Work for You

Shopify is a fantastic platform to start on, but as your store matures you generally need to go beyond what is available out of the box. A custom web app is generally the best way to go about achieving more complex integration with external systems and enhancement to the base platform, and can offer a lot of power and flexibility to extend your store.

If you have any questions about what might be possible with your Shopify store or want help with a particular problem or idea, feel free to reach out to us and we’ll be more than happy to help.