How to create a Shopify App - An overview

Summary

In this detailed tutorial, Robbie walks viewers through the essentials of Shopify app development. From the app installation process to working with APIs (REST and GraphQL), he explains how to create embedded apps using Shopify’s CLI, App Bridge, and Polaris for seamless integration with Shopify’s admin interface. Robbie also covers how to deploy features like theme app extensions and highlights the growing competition in the Shopify App Store. With practical insights and tools for both beginners and seasoned developers, this video provides everything you need to start building successful Shopify apps.

Takeaways

• 😀 Shopify app development starts with understanding the installation flow where users click 'Add App', which sends a request to your server for validation and access token generation.
• 😀 Shopify provides two main APIs: REST Admin API and GraphQL Admin API. Both are necessary to handle different tasks, as some features are only available in one or the other.
• 😀 The process of creating an embedded app involves using Shopify's iframe integration, which requires session token generation for every request.
• 😀 Shopify Polaris is a front-end component library that helps you build an app's interface to look like Shopify’s native dashboard.
• 😀 The Shopify CLI tool simplifies the development process by automating OAuth, session token management, and app structure generation for faster app creation.
• 😀 With Shopify CLI, you can generate apps in Node.js, Ruby, or PHP. Using other languages requires manual setup for OAuth and session token validation.
• 😀 Apps on Shopify must use session tokens rather than cookies, ensuring secure and consistent user sessions when embedded within Shopify’s interface.
• 😀 Shopify’s app extensions allow developers to add extra features like admin links, checkout customizations, and theme integration without modifying store theme code directly.
• 😀 You can add app blocks to themes using the Shopify theme app extension, which allows merchants to drag and drop your app’s features into their store theme easily.
• 😀 While the Shopify App Store has become more competitive, building useful and innovative apps can still be a profitable venture, though it requires careful planning and persistence.
• 😀 Shopify provides comprehensive documentation for building apps manually or using the CLI, making it easier to get started or add advanced features to your app.

Q & A

What is the first step in the Shopify app installation process?

The first step is when a user visits the Shopify App Store, finds the app, and clicks the 'Add App' button. This action sends a request to the app's server with the store's URL and validation information.

How does Shopify authenticate the app once the user clicks 'Add App'?

After the user clicks 'Add App,' Shopify sends a request to the app's server. The app then generates an install URL and redirects the user to a consent page where they can accept or decline the app installation. If accepted, an access token is generated for the app to interact with the store's data.

What are the two main APIs used for Shopify app development?

The two main APIs for Shopify app development are the REST Admin API and the GraphQL Admin API. Both allow developers to interact with store data like products, collections, and orders, though some functionalities are unique to each.

What is the main challenge when using both the REST API and the GraphQL API?

The main challenge is that Shopify's APIs are incomplete in different ways. For example, the REST API cannot create app-owned meta fields, while the GraphQL API lacks support for certain objects like pages. Developers often need to use both APIs to complete the tasks they want.

What is Shopify App Bridge, and why is it important for embedded apps?

Shopify App Bridge is a JavaScript library that helps developers manage the embedding of their app within the Shopify admin interface. It handles tasks like generating session tokens, which are required for embedded apps as Shopify no longer allows the use of cookies in these apps.

What is Shopify Polaris, and how does it assist developers in app development?

Shopify Polaris is a design system and front-end component library that helps developers create apps with a user interface that closely resembles Shopify's own design. It provides pre-built React components that simplify the development of consistent and polished interfaces.

What does the Shopify CLI do for app developers?

The Shopify CLI is a command-line tool that automates the setup and configuration of Shopify apps. It handles tasks like OAuth authentication, session token generation, integrating Shopify Polaris, and managing app billing. It also generates basic app code, saving developers time in the initial setup.

Why do developers need to use Ngrok when working with Shopify apps?

Ngrok is used to provide a secure URL for local development since Shopify apps cannot run directly on localhost. It tunnels traffic from the developer’s local machine to a public URL, allowing Shopify to communicate with the app during development.

What are app extensions in Shopify, and what is an example of one?

App extensions in Shopify provide additional functionality that integrates directly into the Shopify admin interface or checkout process. An example is the Theme App Extension, which allows developers to add app blocks to a store’s theme, letting store owners easily customize their site without modifying code.

What are some common challenges for new developers in Shopify app development?

One of the main challenges for new developers is the increased competition in the Shopify App Store, which now has over 10,000 live apps. Additionally, developers must learn a variety of technical concepts, including OAuth, session token management, and Shopify's APIs, all of which can be complex.