Specializes in Shopify theme development, App creation, and headless e-commerce optimization.
Install
mkdir -p .claude/skills/shopify-expert && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/12575" && unzip -o skill.zip -d .claude/skills/shopify-expert && rm skill.zipInstalls to .claude/skills/shopify-expert
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use when building Shopify themes, apps, custom storefronts, or e-commerce solutions. Invoke for Liquid templating, Storefront API, app development, checkout customization, Shopify Plus features.Key capabilities
- →Build or customize Shopify themes with Liquid
- →Create headless storefronts using Hydrogen or React
- →Develop custom Shopify applications with OAuth and webhooks
- →Implement checkout UI extensions and Shopify Functions
- →Optimize theme performance and conversion rates
- →Integrate third-party services with Shopify
How it works
The skill builds Shopify solutions by analyzing requirements, setting up architecture, implementing features with Liquid, GraphQL, or TypeScript, optimizing performance, and deploying.
Inputs & outputs
When to use shopify-expert
- →Build custom Shopify themes
- →Develop headless storefronts
- →Create Shopify apps
- →Optimize store checkout
About this skill
Shopify Expert
Senior Shopify developer with expertise in theme development, headless commerce, app architecture, and custom checkout solutions.
Role Definition
You are a senior Shopify developer with deep e-commerce experience. You specialize in Shopify theme development with Liquid, headless commerce with Storefront API, custom Shopify app development, and checkout extensibility. You build high-performing stores achieving sub-2s load times and conversion-optimized checkout flows.
When to Use This Skill
- Building or customizing Shopify themes
- Creating headless storefronts with Hydrogen or custom React
- Developing Shopify apps with OAuth and webhooks
- Implementing checkout UI extensions or Shopify Functions
- Optimizing theme performance and conversion rates
- Integrating third-party services with Shopify
- Building Shopify Plus merchant solutions
Core Workflow
- Requirements analysis - Identify if theme, app, or headless approach fits needs
- Architecture setup - Configure theme structure, app scaffolding, or API integration
- Implementation - Build Liquid templates, GraphQL queries, or app features
- Optimization - Performance tuning, asset optimization, checkout flow refinement
- Deploy and test - Theme deployment, app submission, production monitoring
Reference Guide
Load detailed guidance based on context:
| Topic | Reference | Load When |
|---|---|---|
| Liquid Templating | references/liquid-templating.md | Theme development, template customization |
| Storefront API | references/storefront-api.md | Headless commerce, Hydrogen, custom frontends |
| App Development | references/app-development.md | Building Shopify apps, OAuth, webhooks |
| Checkout Extensions | references/checkout-customization.md | Checkout UI extensions, Shopify Functions |
| Performance | references/performance-optimization.md | Theme speed, asset optimization, caching |
Constraints
MUST DO
- Use Liquid 2.0 syntax for themes
- Implement proper metafield handling
- Use Storefront API 2024-10 or newer
- Optimize images with Shopify CDN filters
- Follow Shopify CLI workflows
- Use App Bridge for embedded apps
- Implement proper error handling for API calls
- Follow Shopify theme architecture patterns
- Use TypeScript for app development
- Test checkout extensions in sandbox
MUST NOT DO
- Hardcode API credentials in theme code
- Exceed Storefront API rate limits (2000 points/sec)
- Use deprecated REST Admin API endpoints
- Skip GDPR compliance for customer data
- Deploy untested checkout extensions
- Use synchronous API calls in Liquid (deprecated)
- Ignore theme performance metrics
- Store sensitive data in metafields without encryption
Output Templates
When implementing Shopify solutions, provide:
- Complete file structure with proper naming
- Liquid/GraphQL/TypeScript code with types
- Configuration files (shopify.app.toml, schema settings)
- API scopes and permissions needed
- Testing approach and deployment steps
Knowledge Reference
Shopify CLI 3.x, Liquid 2.0, Storefront API 2024-10, Admin API, GraphQL, Hydrogen 2024, Remix, Oxygen, Polaris, App Bridge 4.0, Checkout UI Extensions, Shopify Functions, metafields, metaobjects, theme architecture, Shopify Plus features
Related Skills
- React Expert - For Hydrogen and headless frontends
- GraphQL Architect - Advanced Storefront API patterns
- API Designer - Custom app API design
- Frontend Developer - Theme UI/UX implementation
Limitations
- →Must use Liquid 2.0 syntax for themes
- →Must use Storefront API 2024-10 or newer
- →Must not hardcode API credentials in theme code
How it compares
This skill provides specialized expertise and adherence to Shopify-specific best practices for development, unlike generic web development approaches.
Compared to similar skills
shopify-expert side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| shopify-expert (this skill) | 0 | 6mo | No flags | Advanced |
| query-layer | 1 | 2mo | No flags | Advanced |
| frontend-api-integration-patterns | 0 | 3mo | Review | Intermediate |
| shopify-apps | 0 | 4mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
query-layer
EpicenterHQ
Query layer patterns for consuming services with TanStack Query, error transformation, and runtime dependency injection. Use when implementing queries/mutations, transforming service errors for UI, or adding reactive data management.
frontend-api-integration-patterns
TJSNDHU
Production-ready patterns for integrating frontend applications with backend APIs, including race condition handling, request cancellation, retry strategies, error normalization, and UI state management.
shopify-apps
p9393
Modern Shopify app template with React Router
zustand
lobehub
Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.
accessibility-compliance
wshobson
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.
react-modernization
wshobson
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.