shopify

Q: How do I install shopify?

Run npx skills add https://github.com/samhvw8/dotfiles --skill shopify in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/shopify/ (personal) or .claude/skills/shopify/ (project).

by samhvw8Backend & APIs

Shopify platform development. Stack: Shopify CLI, GraphQL/REST APIs, Polaris UI, Liquid templating. Capabilities: app development (OAuth), checkout UI extensions, admin UI extensions, POS extensions, theme development, webhooks, billing API, product/order/customer management. Actions: build, extend, customize, integrate Shopify apps/themes. Keywords: Shopify, Shopify CLI, GraphQL Admin API, REST API, Polaris, Liquid, checkout extension, admin extension, POS extension, theme, webhook, billing API, OAuth, app bridge, metafields, product, order, customer, storefront, hydrogen, oxygen. Use when: building Shopify apps, customizing checkout, creating admin interfaces, developing themes, integrating payments, managing store data via APIs, extending Shopify functionality.

Installs: 41
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/samhvw8/dotfiles --skill shopify

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads shopify automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Shopify Development

Comprehensive guide for building on Shopify platform: apps, extensions, themes, and API integrations.

Platform Overview

Core Components:

Shopify CLI - Development workflow tool
GraphQL Admin API - Primary API for data operations (recommended)
REST Admin API - Legacy API (maintenance mode)
Polaris UI - Design system for consistent interfaces
Liquid - Template language for themes

Extension Points:

Checkout UI - Customize checkout experience
Admin UI - Extend admin dashboard
POS UI - Point of Sale customization
Customer Account - Post-purchase pages
Theme App Extensions - Embedded theme functionality

Quick Start

Prerequisites

# Install Shopify CLI
npm install -g @shopify/cli@latest

# Verify installation
shopify version

Create New App

# Initialize app
shopify app init

# Start development server
shopify app dev

# Generate extension
shopify app generate extension --type checkout_ui_extension

# Deploy
shopify app deploy

Theme Development

# Initialize theme
shopify theme init

# Start local preview
shopify theme dev

# Pull from store
shopify theme pull --live

# Push to store
shopify theme push --development

Development Workflow

1. App Development

Setup:

shopify app init
cd my-app

Configure Access Scopes (shopify.app.toml):

[access_scopes]
scopes = "read_products,write_products,read_orders"

Start Development:

shopify app dev  # Starts local server with tunnel

Add Extensions:

shopify app generate extension --type checkout_ui_extension

Deploy:

shopify app deploy  # Builds and uploads to Shopify

2. Extension Development

Available Types:

Checkout UI - checkout_ui_extension
Admin Action - admin_action
Admin Block - admin_block
POS UI - pos_ui_extension
Function - function (discounts, payment, delivery, validation)

Workflow:

shopify app generate extension
# Select type, configure
shopify app dev  # Test locally
shopify app deploy  # Publish

3. Theme Development

Setup:

shopify theme init
# Choose Dawn (reference theme) or start fresh

Local Development:

shopify theme dev
# Preview at localhost:9292
# Auto-syncs to development theme

Deployment:

shopify theme push --development  # Push to dev theme
shopify theme publish --theme=123  # Set as live

When to Build What

Build an App When:

Integrating external services
Adding functionality across multiple stores
Building merchant-facing admin tools
Managing store data programmatically
Implementing complex business logic
Charging for functionality

Build an Extension When:

Customizing checkout flow
Adding fields/features to admin pages
Creating POS actions for retail
Implementing discount/payment/shipping rules
Extending customer account pages

Build a Theme When:

Creating custom storefront design
Building unique shopping experiences
Customizing product/collection pages
Implementing brand-specific layouts
Modifying homepage/content pages

Combination Approach:

App + Theme Extension:

App handles backend logic and data
Theme extension provides storefront UI
Example: Product reviews, wishlists, size guides

Essential Patterns

GraphQL Product Query

query GetProducts($first: Int!) {
  products(first: $first) {
    edges {
      node {
        id
        title
        handle
        variants(first: 5) {
          edges {
            node {
              id
              price
              inventoryQuantity
            }
          }
        }
      }
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

Checkout Extension (React)

import { reactExtension, BlockStack, TextField, Checkbox } from '@shopify/ui-extensions-react/checkout';

export default reactExtension('purchase.checkout.block.render', () => <Extension />);

function Extension() {
  const [message, setMessage] = useState('');

  return (
    <BlockStack>
      <TextField label="Gift Message" value={message} onChange={setMessage} />
    </BlockStack>
  );
}

Liquid Product Display

{% for product in collection.products %}
  <div class="product-card">
    <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
    <h3>{{ product.title }}</h3>
    <p>{{ product.price | money }}</p>
    <a href="{{ product.url }}">View Details</a>
  </div>
{% endfor %}

Best Practices

API Usage:

Prefer GraphQL over REST for new development
Request only needed fields to reduce costs
Implement pagination for large datasets
Use bulk operations for batch processing
Respect rate limits (cost-based for GraphQL)

Security:

Store API credentials in environment variables
Verify webhook signatures
Use OAuth for public apps
Request minimal access scopes
Implement session tokens for embedded apps

Performance:

Cache API responses when appropriate
Optimize images in themes
Minimize Liquid logic complexity
Use async loading for extensions
Monitor query costs in GraphQL

Testing:

Use development stores for testing
Test across different store plans
Verify mobile responsiveness
Check accessibility (keyboard, screen readers)
Validate GDPR compliance

Reference Documentation

Detailed guides for advanced topics:

App Development - OAuth, APIs, webhooks, billing
Extensions - Checkout, Admin, POS, Functions
Themes - Liquid, sections, deployment

Scripts

shopify_init.py - Initialize Shopify projects interactively

python scripts/shopify_init.py

Troubleshooting

Rate Limit Errors:

Monitor X-Shopify-Shop-Api-Call-Limit header
Implement exponential backoff
Use bulk operations for large datasets

Authentication Failures:

Verify access token validity
Check required scopes granted
Ensure OAuth flow completed

Extension Not Appearing:

Verify extension target correct
Check extension published
Ensure app installed on store

Webhook Not Receiving:

Verify webhook URL accessible
Check signature validation
Review logs in Partner Dashboard

Resources

Official Documentation:

Shopify Docs: https://shopify.dev/docs
GraphQL API: https://shopify.dev/docs/api/admin-graphql
Shopify CLI: https://shopify.dev/docs/api/shopify-cli
Polaris: https://polaris.shopify.com

Tools:

GraphiQL Explorer (Admin → Settings → Apps → Develop apps)
Partner Dashboard (app management)
Development stores (free testing)

API Versioning:

Quarterly releases (YYYY-MM format)
Current: 2025-01
12-month support per version
Test before version updates

Note: This skill covers Shopify platform as of January 2025. Refer to official documentation for latest updates.

FAQ

What does the shopify skill do?

How do I install shopify?

Run npx skills add https://github.com/samhvw8/dotfiles --skill shopify in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/shopify/ (personal) or .claude/skills/shopify/ (project).

Which AI agents can use shopify?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is shopify safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains shopify?

It is published by samhvw8 in samhvw8/dotfiles. It has 41 recorded installs.

More from samhvw8/dotfiles

View all →

code-quality

samhvw8/dotfiles

Review, refactor, and debug code with verification before claiming done. Use when responding to review feedback, requesting a review, refactoring or reducing technical debt, root-causing a bug or failing test, or checking work before a merge, commit, or completion claim.

Code Quality & Workflow291 installs

mise-expert

samhvw8/dotfiles

mise — the tool-version manager, env-var loader, and task runner that replaces asdf, direnv, and make. Use for anything touching mise.toml or .tool-versions: installing or pinning tools, choosing a backend (core, packslip, aqua, github, cargo, npm, pypi/pipx), env vars, tasks, lockfiles, trust prompts, auto-updates, CI setup, migrating from asdf/direnv/make/npm scripts or off ubi, and install failures — including attestation/cosign/SLSA verification errors.

Backend & APIs176 installs

frontend-development

samhvw8/dotfiles

Multi-framework frontend development. Frameworks: React 18+ (Suspense, hooks, TanStack), Vue 3 (Composition API, Pinia, Nuxt), Svelte 5 (Runes, SvelteKit), Angular (Signals, standalone). Common: TypeScript, state management, routing, data fetching, performance optimization, component patterns. Actions: create, build, implement, style, optimize, refactor components/pages/features. Keywords: React, Vue, Svelte, Angular, component, TypeScript, hooks, Composition API, runes, signals, useSuspenseQuery, Pinia, stores, state management, routing, lazy loading, Suspense, performance, bundle size, code splitting, reactivity, props, events. Use when: creating components in any framework, building pages, fetching data, implementing routing, state management, optimizing performance, organizing frontend code, choosing between frameworks.

Frontend & Design174 installs

infra-engineer

samhvw8/dotfiles

Comprehensive infrastructure engineering covering DevOps, cloud platforms, FinOps, and DevSecOps. Platforms: AWS (EC2, Lambda, S3, ECS, EKS, RDS, CloudFormation), Azure basics, Cloudflare (Workers, R2, D1, Pages), GCP (GKE, Cloud Run, Cloud Storage), Docker, Kubernetes. Capabilities: CI/CD pipelines (GitHub Actions, GitLab CI, Jenkins), GitOps, infrastructure as code (Terraform, CloudFormation), container orchestration, cost optimization, security scanning, vulnerability management, secrets management, compliance (SOC2, HIPAA). Actions: deploy, configure, manage, scale, monitor, secure, optimize cloud infrastructure. Keywords: AWS, EC2, Lambda, S3, ECS, EKS, RDS, CloudFormation, Azure, Kubernetes, k8s, Docker, Terraform, CI/CD, GitHub Actions, GitLab CI, Jenkins, ArgoCD, Flux, cost optimization, FinOps, reserved instances, spot instances, security scanning, SAST, DAST, vulnerability management, secrets management, Vault, compliance, monitoring, observability. Use when: deploying to AWS

DevOps & Cloud139 installs

3d-graphics

samhvw8/dotfiles

3D web graphics with Three.js (WebGL/WebGPU). Capabilities: scenes, cameras, geometries, materials, lights, animations, model loading (GLTF/FBX), PBR materials, shadows, post-processing (bloom, SSAO, SSR), custom shaders, instancing, LOD, physics, VR/XR. Actions: create, build, animate, render 3D scenes/models. Keywords: Three.js, WebGL, WebGPU, 3D graphics, scene, camera, geometry, material, light, animation, GLTF, FBX, OrbitControls, PBR, shadow mapping, post-processing, bloom, SSAO, shader, instancing, LOD, WebXR, VR, AR, product configurator, data visualization, architectural walkthrough, interactive 3D, canvas. Use when: creating 3D visualizations, building WebGL/WebGPU apps, loading 3D models, adding animations, implementing VR/XR, creating interactive graphics, building product configurators.

Media & Creative136 installs

github-search

samhvw8/dotfiles

Search GitHub with the gh CLI: find repositories, code, and issues/PRs, and see how open-source projects use a library. Use when looking for repos, usage examples, or reported bugs and workarounds on GitHub.

65 installs

Popular backend & apis skills

View category →

find-skills

vercel-labs/skills

Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.

OfficialBackend & APIs4.1M installs

entra-app-registration

microsoft/azure-skills

Guides Microsoft Entra ID app registration, OAuth 2.0 authentication, and MSAL integration. USE FOR: create app registration, register Azure AD app, configure OAuth, set up authentication, add API permissions, generate service principal, MSAL example, console app auth, Entra ID setup, Azure AD authentication. DO NOT USE FOR: Key Vault secrets (use azure-keyvault-expiration-audit), general Azure resource security guidance.

OfficialBackend & APIs566.7K installs

google-agents-cli-adk-code

google/agents-cli

This skill should be used when the user wants to "write agent code", "build an agent with ADK", "add a tool", "create a callback", "define an agent", "use state management" — in a project that needs ADK (Agent Development Kit) API patterns and code examples. It provides a quick reference for agent types, tool definitions, orchestration patterns, callbacks, state management, the graph Workflow API, and reference recipes to study. Do NOT use for scaffolding (use google-agents-cli-scaffold) or deployment (use google-agents-cli-deploy).

Backend & APIs514.8K installs

embedded-captions

heygen-com/hyperframes

Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet anchor rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.

Backend & APIs453.3K installs

entra-agent-id

microsoft/azure-skills

Provision Microsoft Entra Agent Identity Blueprints, BlueprintPrincipals, and per-instance Agent Identities via Microsoft Graph, and configure OAuth 2.0 token exchange (fmipath, OBO, cross-tenant) including the Microsoft Entra SDK for AgentID sidecar. USE FOR: Agent Identity Blueprint, BlueprintPrincipal, agent OAuth, fmipath token exchange, agent OBO, Workload Identity Federation for agents, polyglot agent auth, Microsoft.Identity.Web.AgentIdentities. DO NOT USE FOR: standard Entra app registration (use entra-app-registration), Microsoft Foundry agent authoring (use microsoft-foundry).

OfficialBackend & APIs336.6K installs

neon

neondatabase/agent-skills

Overview of Neon, a complete set of cloud backend primitives around Lakebase Postgres: Auth, Object Storage, Functions, the AI Gateway, and Realtime. Start here to choose Neon for undecided login, files, APIs, and LLM calls, set up the CLI or MCP server, and follow the branch-first workflow. Use when building an app or backend on Neon, or when "Neon" or "Lakebase Postgres" is mentioned. Child skill neon-postgres wins for an existing DATABASEURL, SQL, schema, inspect, or search. Child skill neon-auth wins for login, users, sessions, identity routing, and Managed Better Auth setup. Child skill neon-realtime wins for live queries in reactive apps and agents. Also use for object storage, S3, buckets, serverless functions, function triggers, cron, AI gateway, LLM calls, realtime, logs, Loki, Grafana, observability, postgres, database, backend, Claimable Neon, neon.new, or a no-signup database.

Backend & APIs237.1K installs

shopify

Install

Install

Describe the task

Review the result

SKILL.md

Shopify Development

Platform Overview

Quick Start

Prerequisites

Create New App

Theme Development

Development Workflow

1. App Development

2. Extension Development

3. Theme Development

When to Build What

Build an App When:

Build an Extension When:

Build a Theme When:

Combination Approach:

Essential Patterns

GraphQL Product Query

Checkout Extension (React)

Liquid Product Display

Best Practices

Reference Documentation

Scripts

Troubleshooting

Resources

FAQ

More from samhvw8/dotfiles

Popular backend & apis skills