home / skills / henkisdabro / wookstar-claude-plugins / shopify-developer

This skill provides a comprehensive Shopify development reference to accelerate Liquid, themes, APIs, and app builds with best-practice guidance.

npx playbooks add skill henkisdabro/wookstar-claude-plugins --skill shopify-developer

Review the files below or copy the command above to add this skill to your agents.

Files (12)
SKILL.md
6.4 KB
---
name: shopify-developer
description: Complete Shopify development reference for Liquid templating, theme development (OS 2.0), GraphQL Admin API, Storefront API, custom app development, Shopify Functions, Hydrogen, performance optimisation, and debugging. Use when working with .liquid files, creating theme sections and blocks, writing GraphQL queries or mutations for Shopify, building Shopify apps with CLI and Polaris, implementing cart operations via Ajax API, optimising Core Web Vitals for Shopify stores, debugging Liquid or API errors, configuring settings_schema.json, accessing Shopify objects (product, collection, cart, customer), using Liquid filters, creating app extensions, working with webhooks, migrating from Scripts to Functions, or building headless storefronts with Hydrogen and React Router 7. Covers API version 2026-01.
---

# Shopify Developer Reference

Comprehensive reference for professional Shopify development - API version **2026-01**.

## Quick Reference

| Item | Value |
|------|-------|
| API version | `2026-01` (stable) |
| GraphQL Admin | `POST https://{store}.myshopify.com/admin/api/2026-01/graphql.json` |
| Storefront API | `POST https://{store}.myshopify.com/api/2026-01/graphql.json` |
| Ajax API (theme) | `/cart.js`, `/cart/add.js`, `/cart/change.js` |
| CLI install | `npm install -g @shopify/cli` |
| Theme dev | `shopify theme dev --store {store}.myshopify.com` |
| App dev | `shopify app dev` |
| Deploy | `shopify app deploy` |
| Docs | [shopify.dev](https://shopify.dev) |

## Choose Your Path

Read the reference file(s) that match your task:

**Liquid templating** - writing or debugging `.liquid` files:

- [references/liquid-syntax.md](references/liquid-syntax.md) - Tags, control flow, iteration, whitespace, LiquidDoc
- [references/liquid-filters.md](references/liquid-filters.md) - All filter categories with examples
- [references/liquid-objects.md](references/liquid-objects.md) - Product, collection, cart, customer, and global objects

**Theme development** - building or customising themes:

- [references/theme-development.md](references/theme-development.md) - OS 2.0 architecture, sections, blocks, JSON templates, settings schema

**API integration** - fetching or modifying data programmatically:

- [references/api-admin.md](references/api-admin.md) - GraphQL Admin API (primary), REST (legacy), OAuth, webhooks, rate limiting
- [references/api-storefront.md](references/api-storefront.md) - Storefront API, Ajax API, cart operations

**App development** - building Shopify apps:

- [references/app-development.md](references/app-development.md) - Shopify CLI, extensions, Polaris Web Components, App Bridge

**Serverless logic** - custom business rules:

- [references/functions.md](references/functions.md) - Shopify Functions (replacing Scripts), Rust/JS targets, deployment

**Headless commerce** - custom storefronts:

- [references/hydrogen.md](references/hydrogen.md) - Hydrogen framework, React Router 7, Storefront API integration

**Optimisation and troubleshooting**:

- [references/performance.md](references/performance.md) - Images, JS, CSS, fonts, Liquid, Core Web Vitals
- [references/debugging.md](references/debugging.md) - Liquid errors, API errors, cart issues, webhook failures

## Deprecation Notices

| Deprecated | Replacement | Deadline |
|------------|-------------|----------|
| Shopify Scripts | Shopify Functions | August 2025 (migration), sundown TBD |
| checkout.liquid | Checkout Extensibility | August 2024 (Plus), done |
| REST Admin API | GraphQL Admin API | Active deprecation (no removal date yet) |
| Legacy custom apps | New auth model | January 2025 (done) |
| Polaris React | Polaris Web Components | Active migration |
| Remix (app framework) | React Router 7 | Hydrogen 2025.5.0+ |

## Liquid Essentials

Three syntax types:

```liquid
{{ product.title | upcase }}                    {# Output with filter #}
{% if product.available %}In stock{% endif %}   {# Logic tag #}
{% assign sale = product.price | times: 0.8 %}  {# Assignment #}
{%- if condition -%}Stripped whitespace{%- endif -%}
```

Key patterns:

```liquid
{% for product in collection.products limit: 5 %}
  {% render 'product-card', product: product %}
{% endfor %}

{% paginate collection.products by 12 %}
  {% for product in paginate.collection.products %}...{% endfor %}
  {{ paginate | default_pagination }}
{% endpaginate %}
```

## API Essentials

```javascript
// GraphQL Admin - always use GraphQL over REST
const response = await fetch(
  `https://${store}.myshopify.com/admin/api/2026-01/graphql.json`,
  {
    method: 'POST',
    headers: {
      'X-Shopify-Access-Token': accessToken,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ query, variables }),
  }
);
const { data, errors } = await response.json();
if (errors) throw new Error(errors[0].message);

// Ajax API (theme-only cart operations)
fetch('/cart/add.js', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ id: variantId, quantity: 1 }),
});
```

## Reference Files

| File | Lines | Coverage |
|------|-------|----------|
| [liquid-syntax.md](references/liquid-syntax.md) | ~600 | Tags, control flow, iteration, variables, whitespace, LiquidDoc |
| [liquid-filters.md](references/liquid-filters.md) | ~870 | String, numeric, array, Shopify-specific, date, URL, colour filters |
| [liquid-objects.md](references/liquid-objects.md) | ~695 | All Shopify objects: product, variant, collection, cart, customer, order, etc. |
| [theme-development.md](references/theme-development.md) | ~1200 | File structure, JSON templates, sections, blocks, settings schema, layout |
| [api-admin.md](references/api-admin.md) | ~595 | GraphQL queries/mutations, REST (legacy), OAuth, webhooks, rate limiting |
| [api-storefront.md](references/api-storefront.md) | ~235 | Storefront API, Ajax API, cart operations, Customer Account API |
| [app-development.md](references/app-development.md) | ~760 | CLI, app architecture, extensions, Polaris Web Components, deployment |
| [functions.md](references/functions.md) | ~300 | Function types, Rust/JS targets, CLI workflow, Scripts migration |
| [hydrogen.md](references/hydrogen.md) | ~375 | Setup, routing, data loading, Storefront API, deployment |
| [performance.md](references/performance.md) | ~605 | Images, JS, CSS, fonts, Liquid, third-party scripts, Core Web Vitals |
| [debugging.md](references/debugging.md) | ~650 | Liquid, JavaScript, API, cart, webhook, theme editor troubleshooting |

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

FAQ

Which API should I use for admin tasks, REST or GraphQL?

GraphQL Admin API is the recommended primary API; REST is legacy and should be used only for edge cases not covered by GraphQL.

When should I migrate Scripts to Functions?

Migrate Scripts to Shopify Functions now—Scripts are deprecated with an August 2025 migration window; Functions run serverless, are faster, and support the new extension model.