5 Shopify App Onboarding Tips

TomShopifyLeave a Comment

This post is part of a series following my building of the Best Sellers app to help Shopify stores manage and promote best selling products. If you'd like to start at the beginning of the series, you can start here.

I’m excited to announce that I just submitted my Shopify app, Best Seller Insights, for final review! Once approved, my app will be listed in the Shopify app store here, without the ominous Shopify beta app warning.

Over the past few weeks, in preparation for this, I’ve been focusing on making the initial install process as smooth as possible. This process is also commonly referred to as user onboarding.

In this post, I’ll highlight the top 5 Shopify app onboarding tips I’ve learned while getting my Shopify app ready for launch.

Display a setup progress checklist

My app has several things that need to be configured, such as enabling best seller tracking on their Shopify collections, and creating a best seller badge or list snippet. To make it clear to the user what needs to be done, I show a checklist of each of the required setup steps:

setup-progress

As you can see above, the initial checklist will start off with one item checked. This will give the shop owner a quick win, and also highlight the fact that these items will be checked off as they are completed.

Each incomplete item links to the section of the app they need to visit to complete the item. As they complete each item, they will change to a green line that has a checkmark.

Display the setup progress prominently

Since my app requires visiting a few different areas to finish the setup steps, it is easy for a user to not know where to go next, or if they have additional setup steps to perform.

To help with this, I display the following notification on every major section of the app until the setup steps have been completed:

settings-notification

This has the added benefit of making it easy for the user to move back to the settings screen to finish setup.

Make it clear when your app is still loading data

For apps that require importing data from Shopify, the import process can take a while. My app has to load a fair amount of data on the initial install:

  • the last 3 months of orders
  • all products
  • all collections

Until this data is loaded, many of the app views will be showing incomplete results which can create confusion.

To make this more clear, I added loading messages like this one to each screen that depends on Shopify data:

loading-notification

Once the data finishes loading, I store a flag on the shop and this notification will not be shown.

Make theme changes as easy as possible

The initial beta version of my app required the merchant copy a big blob of liquid into their theme for best seller badges and lists. Even though it was only 5 lines, the sheer quantity of text was a bit overwhelming. Also, if the merchant wanted to change the snippet later, they would have to do this all over again.

My new process for snippets saves the snippet directly into the shop’s theme. Here is a screenshot of my new best seller badge snippet config:

badge-snippet

Now a merchant can install this snippet with a single line of liquid. In addition, the snippet can be easily updated in the future without an additional theme changes since the snippet will be updated in-place.

Allow your app config to be set it and forget it

The initial version of my app required the user to enable best seller tracking and sorting for each collection in their shop individually.

While this worked, it was far from ideal. If a store had a lot of collections, this process was fairly tedious. Also, any new collections created in the future would require the user to remember to enable them for best seller tracking.

After this discovery, I made the following two changes:

  • I added a Bulk Edit feature to enable best seller settings for all current collections.
  • I added a Future Collections setting to automatically enable best seller settings for any future published collections

This has greatly reduced the time it takes to setup and maintain my app for a Shopify store. The future collection setting also means my app will continue to work for all future collections without any extra configuration so a shop can set it and forget it.

Signup to be notified about future Shopify App development articles

Get Shopify App development tips and tricks straight to your inbox.

Summary

The first experience a user has with your app is an important one. You should strive to make this experience as easy and streamlined as possible.

In this post, I’ve covered the top 5 tips that I’ve learned while preparing my Shopify app Best Seller Insights for launch. These tips included:

  • display a setup progress checklist
  • display the setup progress prominently
  • make it clear when your app is still loading data
  • make theme changes as easy as possible
  • allow your app config to be set it and forget it

I hope you found these Shopify app onboarding tips useful.

Leave a Reply

Your email address will not be published. Required fields are marked *