Skill UI

This guide helps developers choose the optimal architecture pattern for building on Shopify. It compares four validated variants: Embedded Remix App (for admin tools), Headless Storefront (for custom e-commerce experiences using Hydrogen), Backend Integration (for system syncing like ERP), and Theme App Extension (for storefront widgets). Use this resource when starting a new Shopify project to determine the correct development path and technology stack.

This workflow provides comprehensive management of Shopify products, variants, collections, and inventory using the powerful GraphQL Admin API. It supports all CRUD operations, enabling users to programmatically create, update product details, manage bulk variants and pricing, and automate smart collections. Ideal for building robust e-commerce integrations and complex catalog synchronization tools.

A comprehensive core workflow for managing the full e-commerce lifecycle within Shopify. It utilizes the GraphQL Admin API to query order data, process fulfillments (including tracking), create draft orders, and search/manage customer records efficiently. Ideal for building robust order management systems and complex e-commerce integrations.

This guide provides a minimal, working example of connecting to a Shopify store using the GraphQL Admin API. It demonstrates how to initialize the API client, authenticate the connection, and execute a query to retrieve product and variant details. Ideal for developers starting a new e-commerce integration, testing API connectivity, or learning basic Shopify data retrieval patterns.

This guide details how to implement robust and secure authentication for Shopify applications using the official @shopify/shopify-api SDK. It covers three main authentication methods: OAuth flow for public apps, session token exchange for embedded apps, and private access for custom apps. Use this skill when setting up, connecting, or debugging any application that requires deep integration and secure API access to Shopify's admin or storefront data.

This guide details how to use Shopify Metafields and Metaobjects via the GraphQL Admin API. Metafields allow attaching key-value custom data to existing resources (like products or orders), while Metaobjects enable defining entirely new, structured content types. Together, they provide a powerful way for developers to model complex custom data, often eliminating the need for external databases to extend e-commerce functionality.

A comprehensive deep dive into migrating entire e-commerce platforms to Shopify. This guide details how to transfer product catalogs, customer records, historical orders, and inventory using advanced methods like Shopify's GraphQL Admin API, bulk mutations (e.g., productSet), and staged uploads. Ideal for developers and technical teams undertaking platform replatforming or migrating data from other e-commerce systems.

This guide provides comprehensive steps for upgrading Shopify API versions (quarterly releases) and migrating your application from the legacy REST Admin API to the modern GraphQL Admin API. It details how to check supported versions, identify breaking changes (like ProductInput splits), and update configurations, ensuring your codebase remains current with Shopify's evolving API standards.

This module provides essential abstractions for building web administration dashboards. It includes critical hooks like `useNavigateFolder` for structured routing and `useRecords` for standardized data fetching and state management. It simplifies complex frontend logic, ensuring consistency and reusability across large-scale admin applications.

This guide outlines robust architectural patterns for building complex administrative extensions within a React environment. It enforces strict separation of concerns by dividing logic into two main layers: Headless Features (business logic, using UseCase/Repository/Gateway) and Presentation Features (UI components, Presenters, and hooks). Following these patterns ensures highly maintainable, testable, and scalable codebases, promoting clean architecture principles for web applications.

This module provides essential abstractions and hooks (BuildParam, BuildParams, useBuildParams) for managing build parameters within the administrative interface. It allows developers to centralize the definition, retrieval, and usage of configuration parameters required for the application's setup and various features, ensuring clean and type-safe access to build-time variables.

This utility module provides essential abstractions, hooks, and components for structuring complex, scalable web applications. It facilitates feature management, global state provision (via React Context), route definition, and environment configuration, making it foundational for building robust frontend architectures.