shopify-developer_skill

Overview

This skill is a complete Shopify developer reference covering Liquid templating, OS 2.0 theme development, GraphQL Admin and Storefront APIs (2026-01), custom apps, Shopify Functions, Hydrogen, performance optimisation, and debugging. It gives focused, practical guidance for editing .liquid files, building themes and apps, running serverless logic, and improving store performance. Use it when you need precise code patterns, deployment steps, or troubleshooting checks for Shopify stores and integrations.

How this skill works

The skill inspects common Shopify development tasks and provides concise, actionable instructions, code snippets, and best-practice checklists. It organises guidance by domain—Liquid, theme dev, APIs, apps, Functions, Hydrogen, optimisation, and debugging—and references stable patterns for API calls, CLI commands, and theme workflows. For errors or migrations it highlights causes, remediation steps, and compatibility notes tied to API version 2026-01.

When to use it

• Editing or debugging .liquid templates, sections, blocks, and settings_schema.json
• Writing GraphQL Admin or Storefront queries and mutations for API version 2026-01
• Developing or deploying Shopify apps with the CLI and Polaris Web Components
• Migrating Scripts to Shopify Functions or creating custom Functions (Rust/JS)
• Building headless storefronts with Hydrogen and React Router 7
• Diagnosing performance issues, Core Web Vitals regressions, or theme-level bugs

Best practices

• Prefer GraphQL Admin API over REST for admin operations and follow version 2026-01 patterns
• Keep Liquid logic simple in templates; move complex business rules to Functions or app backends
• Use OS 2.0 JSON templates, sections and blocks for modular, upgrade-safe themes
• Use Shopify CLI for local dev, theme push, app dev, and Function builds to match store environment
• Measure Core Web Vitals before and after changes; optimise images, fonts, third-party scripts, and Liquid rendering streams
• Secure API access with OAuth or access tokens and respect rate limits and webhook retries

Example use cases

• Add a reusable product-card section and render it with {% render %} across templates
• Fetch inventory and update product metafields via GraphQL Admin mutation in a custom app
• Replace a Script-based discount with an equivalent Shopify Function and deploy with the CLI
• Implement cart add/change via the Ajax API from theme JavaScript and update cart UI asynchronously
• Build a headless storefront using Hydrogen, React Router 7, and the Storefront API to render product pages