Video summary

How to create a Shopify App - An overview

Main summary

Key takeaways

Technology

The video "How to create a Shopify App - An overview" by Robbie provides a comprehensive introduction to Shopify app development, covering key concepts, tools, APIs, and practical steps for building and deploying apps on the Shopify platform.

Key Technological Concepts and Product Features:

  • Shopify App Installation Flow: When a user installs an app via the Shopify App Store, Shopify sends a request containing the store URL and validation data to the app server. The app generates an install URL, and upon user acceptance, obtains an access token to interact with Shopify APIs.
  • APIs Used:
    • REST Admin API and GraphQL Admin API: Both APIs are necessary because some features are exclusive to one or the other (e.g., app-owned metafields require GraphQL, while page objects require REST). Shopify is gradually deprecating REST API features in favor of GraphQL, but neither API is fully comprehensive alone.
  • App Types:
    • Embedded Apps: Hosted inside Shopify’s admin panel via an iframe, requiring session tokens instead of cookies for authentication.
    • Non-Embedded Apps: Open in a separate tab but are less favored by Shopify.
  • Authentication and Session Management:
    • OAuth handled automatically by Shopify tools.
    • Session tokens generated via Shopify’s App Bridge library to manage embedded app sessions.
  • UI and Front-End Development:
    • Shopify Polaris: A React-based front-end component library that helps create apps consistent with Shopify’s UI/UX.
    • Shopify App Bridge: Manages embedding and session tokens.
  • Shopify CLI (Command Line Interface):
    • Official tool that scaffolds a complete Shopify app including OAuth, session tokens, Polaris integration, webhooks, and billing.
    • Supports templates for Node.js, PHP, and Ruby apps.
    • Integrates with ngrok for local development by exposing localhost to the internet (Shopify apps cannot run purely on localhost).
    • Simplifies app creation, running, and deployment.
  • Manual Development:
    • Possible to build apps in other languages (e.g., GoLang) but requires manual implementation of OAuth, JWT session validation, and API interactions.
    • Shopify provides detailed documentation for manual setup.
  • App Extensions:
    • Additional functionality that can be added to Shopify stores.
    • Examples include:
      • Admin Links: Add links in Shopify admin pages.
      • Checkout UI Extensions: Add blocks to the checkout flow.
      • Shopify Functions: Run WebAssembly code for custom logic post-purchase.
      • Theme App Extensions: Add app blocks to Shopify themes without editing theme code directly.
    • Extensions can be generated and deployed via Shopify CLI.
    • Theme app extensions allow drag-and-drop integration into store themes.
  • Development Workflow:
    • Use Shopify CLI to generate app and extensions.
    • Develop and test locally with ngrok.
    • Deploy extensions and apps to Shopify partner stores.
    • Manage app versions and enable extensions on development stores.
  • Market Considerations:
    • Shopify app development is increasingly competitive with over 10,000 apps live.
    • New developers face challenges entering the saturated market.

Guides and Tutorials Highlighted:

  • Step-by-step app creation using Shopify CLI.
  • Using ngrok for tunneling local development.
  • Managing OAuth and session tokens with Shopify libraries.
  • Creating and deploying theme app extensions.
  • Manual OAuth and API integration for non-supported languages.

Main Speaker:

  • Robbie, an experienced Shopify app developer who launched his first app in 2019 and has since developed five apps. He shares practical insights, tutorials, and opinions on Shopify app development.

This overview serves as a solid foundation for beginners interested in Shopify app development, emphasizing the tools, APIs, and workflows necessary to build, test, and deploy apps and extensions on the Shopify platform.

Rate this summary

Your feedback will help improve summaries.

Improve this summary

Reprocess with a stronger model when the summary feels incomplete or inaccurate.

Pro

Translate summary in another language

Pro

Ask questions to this video

Chat for follow-up questions, clarifications, and source-backed answers.

Coming soon

Share this summary

Original video