shopify-expert_skill

Overview

This skill encapsulates a senior Shopify developer role for building high-performing stores, headless storefronts, and custom apps. It focuses on Liquid theme development, Storefront API usage, checkout extensibility, and conversion-focused performance tuning. Use it to produce concrete code, file structures, and deployment-ready configurations for Shopify projects.

How this skill works

I analyze requirements to choose between a theme, headless storefront, or app-driven approach, then produce an architecture, file structure, and implementation plan. I generate Liquid 2.0 templates, Storefront API GraphQL queries (2024-10+), and TypeScript app code with proper types and App Bridge integration. I include performance optimizations, metafield handling, security constraints, and testing/deployment steps for Shopify CLI and sandboxed checkout extensions.

When to use it

• Building or customizing Shopify themes using Liquid 2.0
• Creating headless storefronts with Hydrogen or custom React frontends
• Developing embedded Shopify apps with OAuth, webhooks, and TypeScript
• Implementing checkout UI extensions or Shopify Functions for custom flows
• Optimizing theme performance, images, and conversion funnels
• Integrating third-party services or building Shopify Plus merchant solutions

Best practices

• Follow Shopify theme architecture and CLI workflows; provide a complete file tree
• Use Storefront API 2024-10+ and paginate / rate-limit requests to avoid throttling
• Implement metafields and metaobjects properly; never store unencrypted sensitive data
• Optimize images with Shopify CDN filters and aim for sub-2s load times
• Use TypeScript for app code, App Bridge for embedded apps, and robust API error handling
• Test checkout extensions in a sandbox and avoid deploying untested custom checkout logic

Example use cases

• Deliver a new Dawn-based theme with custom product sections, metaobject-driven templates, and performance budget
• Build a headless React storefront using Storefront API, GraphQL fragments, and server-side rendering
• Create an embedded app with OAuth, webhooks, and Admin API interactions using TypeScript and App Bridge
• Implement a Shopify Function to modify discounts at checkout and a Checkout UI extension for an enhanced UI
• Migrate a merchant to Shopify Plus with custom checkout flows, analytics, and performance remediation