Shopify Theme, App, and Storefront Development
Build and fix Shopify themes, apps, and headless storefronts with secure auth, reliable carts, and targeted tests.
Before & after
Same prompt, same agent — the only difference is the skill.
Building a Shopify app requires setting up OAuth, handling webhooks, and managing permissions. You'll need to use the Shopify API. There are different approaches—you could build a custom app or a public app depending on your needs. You'll probably want to sync inventory in real-time or at least regularly. You'd need to handle API rate limits and potentially queuing if you're dealing with lots of inventory updates. Webhooks are the right way to stay in sync. Error handling and retry logic matter. Testing is important too. Have you built Shopify integrations before?
SHOPIFY INVENTORY SYNC APP ARCHITECTURE APP SETUP (shopify.app.toml) → Scopes: write_inventory,read_inventory,write_products,webhook → OAuth redirect: https://inventory-sync-app.example.com/auth/callback → API version: 2024-07 WEBHOOK STRUCTURE → Topic: inventory_levels/update (triggers on stock change) → Batching: Groups updates into 50-item batches (rate limit: 2 calls/second) → Retry logic: Exponential backoff 60/120/300 seconds (drop after 3 failures) → Dead letter queue: Failed syncs logged to Postgres for manual review SYNC WORKFLOW 1. Warehouse system POSTs inventory delta to sync-app endpoint 2. App validates request signature (HMAC-SHA256) 3. Transforms warehouse SKU → Shopify variant ID (via mapping table) 4. Batch updates via Shopify GraphQL (updateProductVariants mutation) 5. Logs audit trail: warehouse_qty → shopify_qty, timestamp, user 6. Webhook fires: inventory_levels/update (notifies Shopify subscribers) CONFLICT RESOLUTION → Shopify is source of truth during sales (prevents oversell) → Warehouse update is applied only if shopify_inventory > 0 → Tie-breaker: Last-write-wins with 5-second debounce → Mismatch alert: Email if delta exceeds 10% of warehouse count TESTING → Shopify CLI: shopify app dev (localhost:3000) → Mock webhooks via CLI: shopify webhooks trigger inventory_levels/update → Load test: 10k inventory updates in 10 seconds (verify batching + rate limits) DEPLOYMENT → Environment: Node.js 20 + Express on Vercel → Database: Postgres for mappings, audit trail → Monitoring: Sentry for error tracking, DataDog for webhook latency → Production first sync: Runs incrementally over 24 hours (avoids rate limit burst)
About this skill
Your theme adds the wrong variant, your webhook runs twice, or your headless cart loses its market context. This skill traces those failures to the right Shopify surface and produces focused code changes, explicit platform constraints, and tests that reproduce the problem.
What it does
- Builds Online Store sections with valid Liquid, merchant settings, responsive images, and theme-editor lifecycle handling.
- Separates OAuth callback verification, embedded-app authentication, and webhook HMAC verification so credentials and signatures stay in the correct trust boundary.
- Designs webhook ingestion around durable acceptance, duplicate delivery, retries, and events arriving out of order.
- Implements Storefront API product queries and cart mutations with variant IDs, pagination, buyer context, and actionable error handling.
- Routes checkout requests to UI extensions, Shopify Functions, or app configuration according to the actual requirement and verified platform eligibility.
- Diagnoses storefront performance through image priority, JavaScript initialization, request waterfalls, and measured bottlenecks.
What you get
A scoped patch or implementation with file placement, configuration requirements, and targeted verification steps. Larger builds also include the data flow and deployment sequence; quick fixes stay focused on the failing behavior.
Best for
Developers maintaining Shopify themes, building custom or distributed apps, or shipping Hydrogen and other headless storefronts. Especially useful when a change crosses theme, app, checkout, or API boundaries.
SKILL.md preview
---
name: shopify-theme-app-and-storefront-development
description: Builds and debugs Shopify Liquid themes, custom apps, and Hydrogen or other Storefront API storefronts by identifying the execution surface, tracing data and authentication boundaries, and producing scoped code changes with failure-focused verification. Use when the user says "customize my Shopify theme", "my cart keeps adding the wrong variant", "build a Shopify app", "my webhook runs twice", "connect Hydrogen to Shopify", "add a custom checkout discount", or "my Shopify storefront is slow".
---
# Shopify Theme, App, and Storefront Development
… (sign up to view the full skill)More development skills
View all Development skills →Frontend Component UX and Accessibility Review
Severity-ranked fixes with code for UI components: states, keyboard, focus, ARIA, touch targets, contrast, and responsive breakage.
Three.js Click-to-Learn 3D Game Builder
Build click-to-learn 3D games in Three.js: TSL materials, reliable object picking, and an accessible quiz overlay fed by content data.
Angular Standalone Features and State Architecture
Build Angular standalone features with lazy routes, scoped state, safe RxJS flows, and targeted tests.
shadcn/ui Component Building and Theming
Build, theme, and debug shadcn/ui components the way the library is designed to work, with Tailwind v3 and v4 theming handled correctly.