First app in the Shopify App Store

An exciting, fun, and learning experience.Quick look into technologies, setup and the review process.

Ho Ho Ho Sale Announcements app

My first application got approved in the Shopify App Store.
I am really excited, this is something I have wanted to do for a long time. Even though I've been developing on Shopify for many years, applications always seems hard to do. And it is hard, it is a mix of technologies, some of them being outside my comfort zone.

Luckily, Shopify made this much easier.
My application is Ho Ho Ho Sales Announcements.
It allows adding promo banners with a few pre-designed Black Friday, Christmas, and Boxing Day templates. It sounds easy and even if the functionality is minimal, getting from a blank canvas to the App store was a few months journey for me.

The app injects a Shopify section into the theme code and a ScriptTag. Users can configure the section in Theme Editor. This is it! For my first app, I wanted to keep things as simple as possible.

Let's dig into technical details.

Shopify App CLI

This is a great Shopify tool that quickly scaffolds Node.js and Ruby on Rails apps. I went with Node.js being a front-end developer.
You get out of the box a nice setup that will take you a really long way. There are few technologies that Shopify App CLI will add into the mix: Next.js, Webpack, Koa, Polaris, Apollo GraphQL.

I've tried to learn the bits that I didn't know, see how everything works together. It can be somewhat overwhelming but in the end, everything makes sense.

The best part is that Shopify App CLI will get you up and running in no time. I strongly recommend starting with the CLI and this will be my start point for future applications.

Polaris

This is another great addition from Shopify. It is a design system for applications. There are many Polaris components that can, again, take you a long way into building the application. It is built on React, so you will need to get comfortable with how React works.

I wish Polaris would also be available as Web Components but once you get familiarized with React Hooks, data binding, and JSX, this totally makes sense.

Koa

The CLI will use Koa.js as a web server. 
For my application, I just needed a few routes that handle API calls.

The server that is generated by the CLI contains most of what I needed. You get authentication and webhooks utilis. Very helpful.

ScriptTag

The application needs JavaScript to handle user interaction.
The ScriptTag is injected right after the user has installed the app. It will get automatically removed on application uninstall. Shopify takes care of that part.

As this adds a 3rd party script to the user store I wanted to make sure that I do not affect the storefront performance.

The app JavaScript is under 3Kb, minified, and gzipped. The code is wrapped in an IIFE so nothing leaks. The js file is hosted on AWS Cloudfront CDN.

Hosting and dev workflow

I work locally and use Ngrok. This is how the CLI will set up things for you. I have a paid Ngrok account and it feels like an improvement over the free account.

The app is hosted on Heroku using a paid account running 2 Standard 1x Dynos. It is more than I need, probably a lower configuration will be just as good.

I've set up a Heroku delivery pipeline that contains a Staging and a Production environment. Staging will automatically pull from Github any change. Once I test this on a staging app, I can easily promote this build to Production.
This workflow allows me to test live any app changes before going to production.
It is something easy to set up even if you are not familiar with Heroku.

Billing

This is the part that gave me the most problems, it can be a bit confusing.
Here is how the billing works on my application:

  1. After the user installs the app it will be redirected to a /plans page. I only have 2 paid plans, monthly and yearly.
  2. On the plans page, I generate via appSubscriptionCreate GraphQL API the payment links for each plan.
  3. Selecting a plan, the user will get directed to the Shopify plan payment page.
  4. If the payment is successfully done, the user will be redirected to a /thank-you page. On that page with another API call, I will activate the charge.
  5. If the payment is canceled by the user, the server will redirect to the plans page.

Few things I've learned here:

  1. You need to take care of setting this up: create payment links, activating the charge. Shopify just handles the app installation, payment is something you need to handle.
  2. Make sure that verify if the user has a valid subscription. The user can install the app, go to the payment page, and cancel the charge. It can be a loophole.
  3. After the user accepts the charge, you need to activate it. Look into https://shopify.dev/tutorials/charging-for-your-app-with-rest-admin-api-implement-billing-model

SSL Certificates

Your app needs SLL to be approved in the App Store.
In my case, my certificated are handled by AWS, for the ScriptTag, and Heroku for the application.

Mandatory GDPR webhooks

Your app requires Mandatory GDPR webhooks even if you do not handle customer data. In my case, I am just responding 200 on those endpoints.

Submission and review process

Take a big cup of coffee and go through https://shopify.dev/concepts/app-store/getting-your-app-approved/app-requirements#writing-a-shopify-app-store-listing

I went several times, It is really important to follow the Shopify guidelines, no way around it.

Tip: watch https://www.youtube.com/watch?v=qacE8fEjhTI. It is a live review of 2 apps done by Ivana and Marko from Shopify. This answered all of my questions regarding the review process.

Putting all together, screenshots, copy, installation instructions took me roughly one day. It is an important step and you need to make it right.

For the installation instructions, I've created a Loom video. I've tried to cover everything from start to end. My app also has a quick install video showing users how to get started. I've added that video also to the installation instructions.

Shopify moved really fast with my app review. It took less than 3 days to get a response. I had 3 changes to make before getting accepted:

  1. I was not approving the charge, see billing.
  2. I was requesting "read_scripts" scope when I only needed "write_scripts".
  3. I was not selecting the "Sales channel requirements" in the app listing.

After making the requested changes, I've contacted Shopify. In 2 days my app was live in the App Store!

Even for a small simple app like mine, it takes a lot of work. There are many things you need to take care but Shopify gives great tools to take some of the heavy-lifting.

The App CLI and Polaris is definitely something you want to try.

Next?

I am not sure, I need to learn how to drive traffic to my app. Just getting listed in the App Store is not delivering traffic to the app. There are things I need to improve and learn, but I am sure I will in time.

The best part is that I was able to create something from scratch and put it in front of 1.000.000 merchants. I know so much more now than when I've started.

It's been a fun, exciting, and sometimes painful process but getting through new technologies and challenges made me a better developer.