What is a Shopify Application Proxy and how can I use it?
Shopify’s developer API has an incredible arsenal of endpoints available for connected Shopify apps to interact with a store’s data. From editing a stores products to altering a store’s theme, the API lets you customize functionality for stores in a plethora of ways.
However, one of the often overlooked tools of Shopify app development is the Shopify Application Proxy. An app proxy is a setting that Shopify apps can use to route requests from your shop’s domain to any url of the app’s choosing. For example; https://your-shop.com/apps/test-app could become a direct link to https://whatever-they-choose.com. It’s up to the app developer to make that choice.
A typical non-proxied user’s internet flow looks something like this:
The internet user accesses your site through www.your-store.com, which is set-up (typically by you) through DNS to route to Shopify. Shopify then renders your page based on your settings, and returns the webpage to the user. The user, due to your DNS settings, just sees “www.your-store.com” in their address bar.
A proxied user’s internet flow
The same data is passed from the user to your website, then to Shopify. But Shopify acts as a proxy to whichever url the third-party app specifies, and sends the data there. That url then has the job of returning whatever it wants to the user.
When an app proxy responds, there are two things that can happen.
Case #1 — non-liquid response: The third party app responds with a non-liquid formatted response.
The response can be anything; text, HTML, whatever it wants. The user sees that rendered in their browser as usual. For example: Let’s say that an app proxy sets up the path www.your-store.com/apps/proxy to point to www.example.com. Since www.example.com is a normal website that responds with HTML, the user sees the contents of www.example.com in their browser after visiting your store (www.your-store.com/apps/proxy). Based on the internal proxy settings of the third-party app, the user might see www.example.com in their address bar, or they still might see www.your-store.com/apps/proxy. It’s up to the app, that’s how proxies work.
Case #2 — liquid response: The third party app responds with a liquid-formatted response.
When this happens, the user still sees www.your-store.com/apps/proxy in the address bar. However, the liquid contents are then rendered inside your store’s active theme. This means that the header, footer, and URL remain true to your store. The liquid contents are shoved in-between the header and footer, allowing the app-proxy to display contents that look as if your store is rendering them with styling intact.
How can I use an app proxy?
Let’s take a look at how us at Shop Sheriff use an app proxy to add Accelerated Mobile Pages (AMP) to your store. Shop Sheriff renders a non-liquid response to create unique AMP pages for every product, collection, and blog in your Shopify shop.
First we set up an app proxy at /a/s by editing our apps settings like so:
Now, when you download Shop Sheriff, any requests to www.your-store.com/a/s/… will go to the URL that we have set-up.
When Shopify proxies requests from www.your-store.com/a/s/ to our URL, they also send certain pieces of information including the name of the store that originated the request. Shopify sends this information in the form of a query string that our app proxy receives.
For example; www.your-store.com/a/s/something gets routed to Shop Sheriff as a request to: www.our-proxy.com/something?shop=your-store.myshopify.com&more-data…
In this example, www.our-proxy.com is the app proxy destination we have set up with Shopify. Since the original URL has the subdirectory /something, then our server gets the request at www.our-proxy.com/something, along with several query string parameters automatically added.
Shopify sends the following data as a query string:
- shop — the
.myshopify.comdomain name of the originating shop - path_prefix — the “sub path prefix” and “subpath” setting seen in the photo above, concatenated, as they appear in the URL. In this case:
a/s. - timestamp — the time in seconds since midnight on January 1st, 1970 UTC.
- signature — A long, un-guessable string that is generated by Shopify that can then be used by the receiving app to verify that the request was in-fact sent by Shopify.
Shop Sheriff is able to aggregate pieces of this information to render and generate intelligently-formatted AMP pages for every product in your store.
We use the unique shop string to discern who is the unique store requesting an AMP rendering. We use the rest of the URL to determine what type and handle of item we’re intending to render. For example: the URL: https://campuswardrobe.com/a/s/products/northeastern-university-game-day-t-shirt-heather-grey gets sent to Shop Sheriff as: https://our-proxy.com/products/northeastern-university-game-day-t-shirt-heather-grey?shop=campus-wardrobe.myshopify.com&other-data… Shop Sheriff uses the included information within this URL to make sure that we render the right type of item, for the intended shop.
Shop Sheriff also renders the home page, collections, blogs, and articles by using the same methods described. Behind the scenes, Shop Sheriff uses heaps of data to make sure we render your pages as efficiently and valid as possible. We also tell Google to index these pages, so that mobile visitors can see your AMP pages in their search results and get the best of both worlds.
It’s easy to see how powerful an app proxy with Shopify can be. When you’re ready, head over to the Shopify application proxy API guide to read more. If you’ve seen some impressive ways of using this powerful feature, let us know! Or if you’re having trouble getting your proxy to work, feel free to drop us a note and we’ll do our best to help out. And as always, happy coding!
❤️ Team Shop Sheriff
