Agent skill

shopify-developer

Complete Shopify development reference covering Liquid templating, OS 2.0 themes, GraphQL APIs, Hydrogen, Functions, and performance optimization (API v2026-01). Use when working with .liquid files, building Shopify themes or apps, writing GraphQL queries for Shopify, debugging Liquid errors, creating app extensions, migrating from Scripts to Functions, or building headless storefronts. Triggers on "Shopify", "Liquid template", "Hydrogen", "Storefront API", "theme development", "Shopify Functions", "Polaris". Do NOT use for non-Shopify e-commerce platforms.

Stars 2,081
Forks 241

Install this agent skill to your Project

npx add-skill https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/(development)/shopify-developer

SKILL.md

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

Choose Your Path

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

Liquid templating - writing or debugging .liquid files:

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

Theme development - building or customising themes:

  • 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 - GraphQL Admin API (primary), REST (legacy), OAuth, webhooks, rate limiting
  • references/api-storefront.md - Storefront API, Ajax API, cart operations

App development - building Shopify apps:

  • references/app-development.md - Shopify CLI, extensions, Polaris Web Components, App Bridge

Serverless logic - custom business rules:

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

Headless commerce - custom storefronts:

  • references/hydrogen.md - Hydrogen framework, React Router 7, Storefront API integration

Optimisation and troubleshooting:

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

Expand your agent's capabilities with these related and highly-rated skills.

tech-leads-club/agent-skills

seo

Optimize for search engine visibility and ranking. Use when asked to "improve SEO", "optimize for search", "fix meta tags", "add structured data", "sitemap optimization", or "search engine optimization". Do NOT use for accessibility (use web-accessibility), performance (use core-web-vitals), or comprehensive site audits covering multiple areas (use web-quality-audit).

2,081 241
Explore
tech-leads-club/agent-skills

web-quality-audit

Comprehensive web quality audit covering performance, accessibility, SEO, and best practices in a single review. Use when asked to "audit my site", "review web quality", "run lighthouse audit", "check page quality", or "optimize my website" across multiple areas at once. Orchestrates specialized skills for depth. Do NOT use for single-area audits — prefer core-web-vitals, web-accessibility, seo, or web-best-practices for focused work.

2,081 241
Explore
tech-leads-club/agent-skills

accessibility

Audit and improve web accessibility following WCAG 2.1 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible". Do NOT use for SEO (use seo), performance (use core-web-vitals), or comprehensive site audits covering multiple areas (use web-quality-audit).

2,081 241
Explore
tech-leads-club/agent-skills

react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. Use when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements. Do NOT use for component API architecture or composition patterns (use react-composition-patterns instead).

2,081 241
Explore
tech-leads-club/agent-skills

best-practices

Apply modern web development best practices for security, compatibility, and code quality. Use when asked to "apply best practices", "security audit", "modernize code", "code quality review", or "check for vulnerabilities". Do NOT use for accessibility (use web-accessibility), SEO (use seo), performance (use core-web-vitals), or comprehensive multi-area audits (use web-quality-audit).

2,081 241
Explore
tech-leads-club/agent-skills

perf-lighthouse

Run Lighthouse audits locally via CLI or Node API, parse and interpret reports, and set performance budgets. Use when measuring site performance, understanding Lighthouse scores, setting up budgets, or integrating audits into CI. Triggers on: lighthouse, run lighthouse, lighthouse score, performance audit, performance budget. Do NOT use for fixing specific performance issues (use perf-web-optimization or core-web-vitals) or Astro-specific optimization (use perf-astro).

2,081 241
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results