How to Build Your First Shopify App

How to Build Your First Shopify App

How to Build Your First Shopify App: 2016Shopify is a growing ecosystem with over 275,000 merchants, and many of these businesses are using one of the 1,500 apps listed on the Shopify App Store. If you’re new to the Shopify App ecosystem, or if you’ve ever thought about building an app, this article will help you find an app idea, design your app, set up an app environment, and learn technical how-tos to get a ‘Hello World’ app running on a Shopify store.

We recently hosted a Partner Session webinar with Josh Brown from Shopify’s app team, where he discussed how to create your first Shopify app.

This article walks through some of the steps Josh outlined in his presentation, and will help you tackle your inaugural Shopify app project.

You might also like: How to Build a Shopify App in One Week

1. Finding a great idea for your Shopify App

How to Build Your First Shopify App: Idea for your Shopify AppFinding an idea for your app can be one of the most difficult challenges in the entire app building process. Luckily, there are a few strategies you can use to find great ideas that align with merchant demand.

A good Shopify app should solve a problem that merchants are willing to pay to have solved. One way to identify these problems is by becoming an active member on the Shopify Ecommerce Forums. The forums are a place where merchants discuss their businesses, find ways to improve their stores, discover marketing ideas, and solve problems they are experiencing. By participating in those discussions, you can often find gaps where an app would be the ideal solution to a merchant’s particular problem.

If you would like to get involved in these kind of discussions, please visit the Shopify Ecommerce Forums or get involved in the conversation on a Shopify Slack channel.

When trying to pinpoint your app idea, it’s best to keep an eye on any recently released APIs by Shopify. APIs can give you the opportunity to launch an app that was previously not possible, or solve a problem in a new or different way. New types of apps, or a whole new class of apps, can be created where it was not previously possible. Shopify recently held its first Partner conference called Unite, where new API announcements were made — get inspired by watching all the announcement recordings.

Another way to find app ideas is to look at potential channel integrations. Shopify merchants are continually looking for integrations with third-party services, such as fulfilment providers, advertising platforms, shipping carriers, social media, and many other platforms. For example, a Facebook integration with a Shopify app to solve a problem in a unique way could be very useful to certain merchants.

2. Validating your app idea

So we have an idea that we think will be a real winner, and we want to validate it. We can do that by creating a Minimum Viable Product (MVP). An MVP allows you to quickly build a minimum set of features that are just enough to launch the product. By creating an MVP, you will be able to test your idea with users, and avoid the full-scale development of products that merchants might not actually want. Start by prototyping the app, and getting it in the hands of as many merchants as possible to gather feedback and improve the app’s quality.

Your app may only be a good fit for a subset of Shopify merchants, and that’s ok. Just be aware of this fact, and know your target audience when developing the app.

You might also like: Marketing Your Shopify App: The Details We Overlook

3. Designing your app

How to Build Your First Shopify App: Designing your AppSince your background may be in core development rather than design, Shopify provides you with a set of tools to improve your app’s visual appearance and UX. Shopify has an app store where your app will be listed with all of the app features and details.

With one click, merchants can install your app on their shops and approve charges (if you’re charging for your app). All of this is taken care of by Shopify, which significantly improves the onboarding process for your users.

Shopify has an Embedded App SDK for developers, which allows your app to be seamlessly integrated into the Shopify admin. The benefit of embedded apps is that merchants don’t have to learn a new interface to access your app, since it will look like it’s a native feature of the Shopify admin. It’s also worth noting that you can build embedded apps for Shopify’s POS iPad app with the Embedded App SDK as well.

The Embedded App SDK will also help your app’s design and UX with the following window.postMessage API:

  • Custom modal windows
  • Alert, confirm, and input dialogs
  • Top bar with icon, breadcrumbs, buttons, pagination, and dropdown menus
  • Flash messages

Another great design resource to use comes from a Shopify Partner who recently released UptownCSS. UptownCSS is a beautiful front-end framework for Shopify App development. UptownCSS will provide you with a grid, layouts, cards, typography, buttons, icons, forms, and  much more to make your Shopify App look like a native Shopify admin component. You can learn more about Uptown CSS on their website and Github page.

4. Starting development

How to Build Your First Shopify App: Starting DevelopmentShopify apps can be developed with Ruby on Rails, Python, or any other coding language. Shopify provides a gem to help you get a head start if you’re developing your app with Ruby on Rails. You can get the gem, which contains a sample code for an app using the Embedded App SDK, on Shopify’s Github page.

To initialize your app, we will start with the JavaScript API. Simply include the app.js at the top of your app’s element. It has no dependencies, but plays well with other libraries like jQuery.

The SDK should be initialized with the API key and shop’s origin immediately after including the app.js file.

If you’re building your app using Ruby on Rails with the ruby gem, follow along with the video below.

Extra resources for getting started with Shopify Apps

Here are a few extra resources from us that can help you get up and running with your first Shopify App:

Documentation

Articles

Hello app world

Now you know how to discover the best Shopify app ideas, and you’re equipped with the tools to begin building a beautiful app for merchants. The next step is to get your MVP in the hands of beta users, and to start building your Shopify app business.

Development shops like Bold Commerce have built successful businesses around Shopify app development, and now have over 100 employees — will you be next? Get started on your first app today! We can’t wait to see what great ideas you’ll come up with, and what problems you’ll solve for the merchant community.

Looking for some amazing content to tide you over until our next live event? Head over to our webinars page and check out our previous Partner Session webinars.

You might also like: 5 Reasons Why App Integrations Benefit Ecommerce Websites

About the Author

Levin is a self-taught designer and front-end developer whose passion for design combined with his thirst for continual learning inspired him to run his own conference: Go Beyond Pixels. He has worked for clients all over the world, such as Vox Media in NYC, and now works for Trello.

Grow your business with the Shopify Partner Program

Learn more