Shopify App Development is Sort of a Disaster

Sorry for poorly made memes but I felt I had to do it.

Over the last couple weeks I have been working on a simple Shopify App to prefetch the checkout page of a Shopify store, so the checkout page shows up faster for customers.

The goal of the entire app is to add 800 bytes of JavaScript at the bottom each page. The JavaScript logic took about 2 hours to write. Making the rest of the app and getting it into the Shopify App store took another 50 hours.

Now that I’m through this arduous process (and Prefetch Checkout is live, please try it..) I have some capital ‘O’ Opinions about writing apps for Shopify that I thought I would share my experience as it’s been a crazy time.

The Good Stuff

I’ll start out with the things that I quite liked about the process.

• Polaris is genuinely a usable UI library.

It’s better design than I’m able to figure out how to do.

Shopify requires that all apps imitate the “look and feel” of Shopify itself, to create a cohesive experience. I think this is fine, especially because they provide a library with all of the components ready to go.

The library has all of the components you would generally want structured in a way that makes relative sense. I would certainly choose Polaris over something like React Native Paper, but I wouldn’t go as far as to use Polaris for anything other than a Shopify app.

Overall, it works. Not terrible, not amazing. Gets the job done.

• The Support team was trying their best

Due to timezone differences, one back and forth during the review process took 24 hours pretty much every time, so the entire review process took 7 days to get through.

I can’t fault them much as during this process Shopify laid off 1000 people, mostly in their support department. Given those conditions, I’m actually fairly surprised the process was this smooth.

There was a lot of chaos in that review process that I will talk about below, but none of this was really on the app review team, so I give them a thumbs up.

The Bad Stuff

• The auth process is crazy and convoluted

Your app is hosted by you, then iframed into Shopify, so you need to get each store’s Shopify credentials for your backend to be able to query that store’s API.

This part is only half of the process…

In the scaffold provided by Shopify as an example, the process is:

1. Store owner clicks install app, is redirected to ${your_app_url}/api/auth with a shop url parameter.
2. /api/auth responds with your apps keys and what permissions* are needed.
3. The store owner then gets 302 redirected back to Shopify by the Auth library (somehow) and given a ‘Do these permissions look okay screen’.
4. After clicking okay, the store owner is sent to ${your_app_url}/api/auth/callback where the key is stored in your app.
5. /api/auth/callback redirects to your app directly at just ${your_app_url} and spins for a couple seconds before realizing it should be embedded in an iframe.
6. A different library called App Bridge takes over and redirects to ${your_app_url}/api/auth/toplevel which loads another library and somehow finds out where to redirect to next.
7. The store owner is then redirected back to the Shopify portal, and your app waits until the portal loads, then it can start loading inside an iframe.

*Scopes (permissions) are defined in Shopify.Context but this part only interacts with Shopify.Auth. By default, context is forwarded an environment variable SCOPES so don’t forget to track that down across your entire app.

This is what they give you out of the box. It seems like there are easier ways to accomplish this in Shopify, but this is the way that they are recommending. Wild.

• Is it deprecated? Who can tell?

From looking at the Script Tag API Page, would you be able to tell that using this API endpoint will get your app rejected?

If nothing else, Shopify, please put a warning on this page.

The only place I’ve found that tells you to not use this libary is a page called ‘Update your app’ three menu levels deep in the Shopify dev website.

The goal of my app was to inject a script tag into each page, I quickly found the Script Tag API which seemed like an easy win. As it turns out, that is the old way. The new way involves something called Theme App Extensions.

After the reviewer pointed this out to me, I had to rebuild all of the app again using a completely different API (not that its a complicated app but still..)

• Theme App Extensions don’t really fit

All of the code up to this point has been a node.js app with react that is hosted externally by me on Render.

Theme app extensions are separately compiled with an entirely different Ruby on Rails stack using a JSON config language and Shopify’s own Liquid templating system.

Extensions are compiled and sent to the Shopify app by the CLI, then you need to log into your Shopify partner account and manually configure versioned releases for each extension you use.

I set up a dev environment locally and a prod environment on Render. If I want to change my Theme App Extension, I need to:

1. Make the change in the dev environment.
2. Push to Render and have the app rebuild.
3. Either SSH into prod to run the CLI command to compile the extension (and download all of the Rails compilation toolchain there), or dangerously connect my production app to my dev environment to compile and send the extension.
4. Open the app config page in the Shopify Dashboard and tell the app to release this version of the extension to production.

I might have been doing this wrong and there is a cleaner way to do this, but this is the easiest way I found to get everything working.

And even after all of that, there is no direct API to check if a store has enabled a Theme App Extension (which they have to do manually from a URL your app can provide).

The official suggested solution for this seemingly important feature is to:

How is this the only way?

1. Find a UUID in a .env file that was generated somehow,
2. Grab settings_data.json from the stores theme using the API
3. Parse through the JSON to find an object that has a type key that includes the UUID you found. (The key for the object itself is a random number)
4. Look at the disabled key in that object to see if the Extension is turned on or off.

In Conclusion

Well I’ve had my fun complaining. At the end of the day, my Shopify app is live, and it is successfully doing its job. Download Subsecond: Prefetch Checkout today for your Shopify store! It saves you three’s of seconds from Cart to Checkout!

Despite all of this, I am probably going to continue with Shopify and make more apps as its a good way to provide performance tooling to Ecommerce stores.

I do hope they fix some of these problems and clean up their libraries and documentation. If anyone working at Shopify has made it this far, I’d love to talk through some ideas with you.