paint-brush
3 Common Mistakes To Avoid When Building Your First Shopify Appby@ChrisTung
3,307 reads
3,307 reads

3 Common Mistakes To Avoid When Building Your First Shopify App

by Chris TungJanuary 4th, 2019
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

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 &gt; $18 billion, <a href="https://expandedramblings.com/index.php/shopify-statistics/" target="_blank">over 600,000 merchants</a>, and Shopify partners and developers have <a href="https://www.shopify.com/partners" target="_blank">made more than $430 million in services and apps</a>, it’s no wonder that more and more people are interested in building and monetizing Shopify apps.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - 3 Common Mistakes To Avoid When Building Your First Shopify App
Chris Tung HackerNoon profile picture

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…

1. Forgetting to set up authenticated_controller.rb

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 AuthenticatedControllerset 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

2. Using the`domain` field from Shopify when retrieving information about your Shop in your controller

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_domainand 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

3. Making easy mistakes when submitting your app for review that will get you rejected.

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:

  1. Do not reference “Shopify” in your app name or tagline. You can mention other apps though (e.g. my app uses Slack so I reference Slack).
  2. If you’re developing a freemium app, do not mention your other pricing tiers in the general description text box. It does seem like you can include these in your screenshots, or you can include them in the pricing section of your app description.
  3. The name of your app in the App store must match the name of the app when it is installed. I thought I could do a more marketing heavy one after the app is installed, but clearly, I was wrong. Just make sure the app names are identical, and you won’t have any issues.

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).