Blog

How to use App Proxy in Shopify?

App Proxy:

Sometimes it might be a requirement in Shopify to fetch data from an outside location and display it on the page of an online store. To achieve this kind of requirement, Shopify provides a setting called App Proxy.

An app proxy is a setting that Shopify apps can use to route requests from our Shopify stores shop’s domain to any URL of the other applications.

Here the content on these proxy pages can be dynamic, which allowing it to be updated as often as is needed. App proxies can be used for displaying image galleries, statistics, and custom forms.

It is not necessary to set up app proxies before we publish our app, if we add an application proxy to an app after we have published it, then existing app installations will be updated automatically.

App proxies also support for responses from the Proxy URL using Liquid, which is a Shopify's theme customization engine. This means we can use Liquid to display our proxy page as if it were a part of an online store's theme.

 

Steps to add an app proxy to any Shopify app:

To add a proxy to our app, we need to make sure the app is set up for the online store area of Shopify for that we’ll need to enable the online store area. Then we can continue with adding the proxy:
 

1. From the Partner Dashboard, first, we have to click Apps.

2. Click the name of our app.

3. Click on Extensions.

4. Click on Online Store.

5. In the App proxy section, click on Add proxy.

6. Then first we need to select a prefix from the Sub path prefix drop-down list. If required we can add a sub path in the Sub path field:

 

These settings are required which determines the HTTP request for Shopify that are proxied to the proxy URL entered in the next step. For example, if the sub path prefix is apps, and the sub path is ‘order’, then any path in your shop after https://your-store.myshopify.com/apps/order is proxied to the provided proxy URL.

7. Need to enter the URL of our proxy server in the Proxy URL field. This is the URL that will be proxied from the path that we entered in the previous step.

8. Finally, click Save.

 

Quick Example:

Consider the following app proxy configuration settings example:

Subpath prefix: apps

Subpath: my-proxy-app

Proxy URL: https://my-proxy-app.com/ proxy_app

In this example, https://my-store.myshopify.com/apps/my-proxy-app/app_path forwards to the proxy URL at https://my-proxy-app.com/proxy_app/app_path.