shopify-developer

Document Shopify development with Liquid, GraphQL APIs, and Hydrogen.

1|Updated Feb 26, 2026
One-click install
npx skills add https://github.com/Matheusrlr/payment-orchestrator --skill shopify-developer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: shopify-developer
Source: https://github.com/Matheusrlr/payment-orchestrator/tree/main/skills-catalog/skills/%28development%29/shopify-developer
Command: npx skills add https://github.com/Matheusrlr/payment-orchestrator --skill shopify-developer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a complete reference for all aspects of Shopify development, enabling developers to efficiently build, customize, and debug Shopify stores and applications.

Core Features & Use Cases

  • Liquid Templating: Reference for Liquid tags, filters, and objects for theme customization.
  • Theme Development: Guidance on Online Store 2.0 architecture, sections, blocks, and settings_schema.json.
  • API Integration: Documentation for GraphQL Admin API, Storefront API, and Ajax API.
  • App Development: Resources for Shopify CLI, extensions, Polaris components, and webhooks.
  • Headless Commerce: Information on Hydrogen framework and React Router 7.
  • Performance & Debugging: Tips for optimising Core Web Vitals and troubleshooting common issues.
  • Use Case: A developer needs to implement a custom discount logic using Shopify Functions, debug a cart issue, or build a headless storefront with Hydrogen. This Skill provides all the necessary documentation and examples.

Quick Start

Use the shopify-developer skill to find examples of how to use the Shopify Storefront API to add items to a cart.

Frequently Asked Questions about shopify-developer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a headless storefront using Hydrogen and React Router 7?

Building a headless storefront with Hydrogen and React Router 7 involves using the framework to render Shopify Storefront API data. This approach bypasses traditional Liquid theming for customized, React-based storefronts.

How do I add items to a cart using the Shopify Storefront API?

Adding items to a cart via the Shopify Storefront API requires executing GraphQL mutations against your store endpoint. The API handles cart creation, line item additions, and quantity updates.

What is the difference between Shopify Liquid objects and filters in OS 2.0 theme development?

Shopify Liquid objects represent data like products and collections, while filters modify that data output. OS 2.0 theme development uses these alongside sections and blocks for customizable layouts.

When do I need to migrate from Shopify Scripts to Shopify Functions?

Migrating from Shopify Scripts to Shopify Functions is necessary when implementing custom discount logic or dynamic cart transformations. Functions replace Scripts with WebAssembly-based extensibility.

Does the GraphQL Admin API support custom app development with Shopify CLI and Polaris?

Yes, the GraphQL Admin API supports custom app development with Shopify CLI and Polaris. The CLI handles app scaffolding while Polaris provides React components for the admin interface.

Why is Core Web Vitals optimisation important for Shopify theme development?

Core Web Vitals optimisation is important for Shopify theme development because it directly impacts store performance. Optimising Liquid rendering and reducing JavaScript improves user experience.