Shopify has fundamentally changed the way we think of e-commerce and building online businesses, You can now create a beautiful eCommerce website, list products, and start making money in less than a day because of Shopify, and in a world where Shopify has a market cap of > $18 billion, over 600,000 merchants, and Shopify partners and developers have made more than $430 million in services and apps, it’s no wonder that more and more people are interested in building and monetizing Shopify apps.
And, I should know because I built my first Shopify app to do just that.
But, I’ve also learned a few things after developing and getting my first Shopify app — Shoppy: A Better Slack Bot — released on the App store, and I’d like to share 3 common mistakes that I made when making my first app so you can avoid them and get to market faster.
Here goes…
One of the most important first steps in making a Shopify app is authenticating the new shop and using that session data to do things like use store/orders/product data, respond to a webhook, or process a charge.
When I first set up my app, I used the following code on each controller to ensure that I had properly authenticated the session:
session = ShopifyApp::SessionRepository.retrieve(1)ShopifyAPI::Base.activate_session(session)class ShopifyController < ApplicationController
This is incredibly inefficient and resulted in bugs that were very frustrating and could have easily been avoided if I instead had ShopifyController
inherit an Authenticated Controller that handled all of the Shopify-related auth.
So what’s the best way to ensure that we always authenticate our sessions to gain access to the API and shop data?
Solution: Make sure you have AuthenticatedController
set up properly and make sure any controller that needs Shopify authentication inherits this:
class AuthenticatedController < ActionController::Baseinclude ShopifyApp::Localizationinclude ShopifyApp::LoginProtectioninclude ShopifyApp::EmbeddedApp
protect_from_forgery with: :exceptionbefore_action :login_again_if_different_shoparound_action :shopify_sessionend
...
class ShopifyController < AuthenticatedController
Literally the screen my first alpha user saw because of this mistake.
While in development, you’ll likely create a debug store so you can install your app and test your data. With Shopify, shops are automatically generated so if your debug store is called Debug Store
, Shopify will give your shop a domain similar to debug-store.myshopify.com
.
This Shopify domain will be stored in two fields: myshopify_domain
and domain
.
While developing, it might be intuitive for you to set up your various shop lookups like so:
@shop = Shop.where(shopify_domain: ShopifyAPI::Shop.current.domain).first
In fact, most of the repos and tutorials I could find did their lookup off of domain
because in development this makes sense. myshopify_domain
and domain
are identical!
However, in production, the majority of users set up their own custom domain, which results in data like the following:
myshopify_domain: "example.myshopify.com", domain: "example.com"
I found this out the first time I had an alpha user install Shopy, and the app completely crashed.
What I discovered was that Shopify gives you themyshopify_domain
shop link for you to store in your app’s database so if you do your shop query and rely on domain
then the query won’t properly match if the shop has set up a custom domain, resulting in crashes.
So how do you make sure that you properly match the domain you receive from Shopify in production?
Solution: When you’re retrieving information about your Shop in a controller, always use myshopify_domain
instead of domain
. This ensures that you’ll properly match a user’s domain to the Shopify domain you receive after they complete installation.
So your adjusted, production code should look something like this:
@shop = Shop.where(shopify_domain: ShopifyAPI::Shop.current. myshopify_domain).first
The last thing I wanted to share was mistakes I made after I finished development and submitted my app for approval.
Below are the official errors I received after I submitted Shoppy for the first time:
1. The word “Shopify” cannot be used in app names or taglines. Refer to our Partner Program Agreement about trademark restrictions.
2. No pricing information should be included elsewhere in your app listing. Refer to our pricing section requirements for more details.
3. The name of the app is different in your partner account than what is in the Shopify App Store listing. These fields must be identical. The app name can be changed within the app setup section in your partner dashboard.
These were super easy-to-fix mistakes, but because I made them and they were flagged, I had to resubmit my app after making the edits. From there, it took another 10 days for the app to go from pending to approved. I could have reduced my total approval time from 30 days to 20 days if I avoided these mistakes.
So, how do we not make these copy mistakes when submitting an app for review?
Solution: A lot of things:
I hope this post helps you out in developing and releasing your own Shopify app, and if you have any questions, feel free to email me any time at [email protected]!
—
Chris is a self-taught programmer and the co-founder of Threadbase: a platform that allows non-developers to build their own Reddit-style communities in just a few clicks, which was acquired in March 2019. He also just finished developing Shoppy — a free app that that sends order notifications and summary reports from your Shopify store to Slack.
Before Threadbase and Shoppy, Chris worked in marketing for startups including Quidsi and ComiXology (both acquired by Amazon) and Bonobos (acquired by Walmart).