Application proxies - front end development
You can use an application proxy to fetch data from an outside location and display it on the page of an Online Store. For app developers, this means that the content on these proxy pages can be dynamic, or capable of being updated as much as you want. Application proxies are useful for displaying image galleries, statistics, custom forms, and other kinds of dynamic content.
You do not need to set up application proxies before you publish your app. If you add an application proxy to an app after you've published it, then its existing install base will be updated automatically.
Application proxies also support responses from the Proxy URL using Liquid, Shopify's theme customization engine. You can use Liquid to display your proxy page as if it were a part of an Online Store's theme.
Add a proxy to your app
To add a proxy to your app:
- From your Partner Dashboard, click Apps.
- Click on the name of the app that you want to change.
- Click Extensions.
- In the App proxy section, click Add proxy.
Select a prefix from the Sub path prefix drop-down list. If you want to add a sub path as well, then enter one in the Sub path field:These settings determine which HTTP requests to Shopify are proxied to the Proxy URL that you enter in the next step. For example, if the Sub path prefix is
apps, and the Sub path is
store-pickup, then any path in your shop after
https://your-store.myshopify.com/apps/store-pickupwill be proxied to the Proxy URL that you enter in the next step.
Enter the URL of your proxy server in the Proxy URL field. This is the URL that will be proxied from the path that you entered in the previous step.
Shopify does not recognize
example.comas the Proxy URL. If your app proxy contains those values, then it will return an error.
When you're done, click Save.
Consider the following app proxy configuration:
- Sub path prefix:
- Sub path:
- Proxy URL:
In this example,
https://example-store.myshopify.com/apps/my-app-proxy/app_path will be forwarded to the Proxy URL at
What the store owner sees
After a merchant installs an app with a proxy, they can change the sub path. The sub path is where the application proxy will be accessed from a merchant's own shop. Merchants may choose to change the sub path so that the URL in a browser's location bar makes the proxy page look like it's hosted in their store instead of externally. Ultimately, the sub path doesn't affect the actual location of the proxy URL (if the merchant edits a sub-path, then it will still be forwarded to the proxy URL).
Issue a proxy request
When Shopify receives an HTTP request for a proxied path, it will forward that request to the specified Proxy URL. For example, when the following HTTP request is sent from the client user agent:
Shopify will forward the request using the specified Proxy URL.
Given that the Proxy URL is set to
https://proxy-domain.com/proxy, the client's IP address is
18.104.22.168 and the applications shared secret is
hush, the forwarded request will look like the following:
Cookies are not supported for the application proxy, since the application is accessed through the shop's domain. Shopify will strip the
Cookie header from the request and
Set-Cookie from the response.
The forwarded request adds the following parameters:
shop: The myshopify.com domain for the shop.
path_prefix: The proxy sub-path prefix at which the shop was accessed. In this case, it's/apps/awesome_reviews, which was replaced in the forwarded request URL with the proxy application's Proxy URL.
timestamp: The time in seconds since midnight of January 1, 1970 UTC.
signature: Verifies that the request was sent by Shopify. A hexadecimal encoded SHA-256 HMAC of the other parameters, split on the "&" character, unencoded, sorted, concatenated and using the applications Shared Secret as the HMAC key.
Security: Calculate a digital signature
Just like our webhooks, we sign all our proxy requests.
In Ruby, the algorithm for calculating the signature looks like this using the ruby-hmac gem:
The request method and request body will be forwarded, so content from form submission and AJAX requests can be used in the proxy application. In this case, the URL will still contain the query parameters added by the proxy (i.e. shop, path_prefix, timestamp, and signature) even when the body also contains URL encoded parameters.
If the HTTP response from the Proxy URL has
Content-Type: application/liquid set in its headers, Shopify will evaluate and render any Liquid code in the request's body in the context of the shop using the shop's theme. When used the right way, it can automatically make your app look like it belongs as part of the shop without any manual intervention.
Otherwise, the response will be returned directly to the client. 30* redirects will be followed in case you need that sort of thing.