Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
sickn33 avatar

Shopify Development

  • 1.7k installs
  • 44.4k repo stars
  • Updated August 4, 2026
  • sickn33/antigravity-awesome-skills

shopify-development guides Shopify apps, extensions, and themes with CLI and GraphQL APIs.

About

The shopify-development skill routes work across Shopify apps, extensions, and themes based on user intent. Apps suit external integrations, merchant tools, and billing via references/app-development.md. Extensions cover checkout, admin, POS UI, and Shopify Functions per references/extensions.md. Themes address storefront Liquid customization in references/themes.md. Combined app plus theme extension fits backend logic with storefront UI. Shopify CLI commands include shopify app init, shopify app dev with tunnel, and theme dev workflows after npm install -g @shopify/cli. GraphQL Admin API, REST APIs, webhooks, metafields, and billing patterns are documented. Invoke when building Shopify apps, checkout extensions, Polaris admin UI, Liquid themes, or GraphQL integrations for ecommerce merchants. Routes to app, extension, or theme workflows by intent. Shopify CLI: app init, app dev, theme dev commands.

  • Routes to app, extension, or theme workflows by intent.
  • Shopify CLI: app init, app dev, theme dev commands.
  • GraphQL Admin API, webhooks, metafields, and billing patterns.
  • Polaris UI for admin and checkout extension surfaces.
  • Liquid templating for storefront theme customization.

Shopify Development by the numbers

  • 1,705 all-time installs (skills.sh)
  • +41 installs in the week ending Aug 5, 2026 (Skillselion tracking)
  • Ranked #295 of 4,347 Backend & APIs skills by installs in the Skillselion catalog
  • Security screen: MEDIUM risk (skills.sh audit)
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
At a glance

shopify-development capabilities & compatibility

Capabilities
app versus extension routing · shopify cli workflows · graphql admin api · liquid themes
Works with
stripe
Use cases
api development · frontend
From the docs

What shopify-development says it does

Build Shopify apps, extensions, themes using GraphQL Admin API, Shopify CLI, Polaris UI, and Liquid.
SKILL.md
shopify app init # Create new app
SKILL.md
npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill shopify-development

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs1.7k
repo stars44.4k
Security audit2 / 3 scanners passed
Last updatedAugust 4, 2026
Repositorysickn33/antigravity-awesome-skills

Should I build a Shopify app, extension, or theme for this merchant feature?

Build Shopify apps, extensions, and Liquid themes with GraphQL Admin API, Shopify CLI, Polaris UI, and webhooks.

Who is it for?

Developers building Shopify merchant apps, checkout UI, or themes.

Skip if: Non-Shopify ecommerce platforms or generic React SPAs.

When should I use this skill?

User builds Shopify app, checkout extension, Liquid theme, or GraphQL admin integration.

What you get

Correct Shopify surface with CLI scaffold, API integration, and UI pattern references.

  • Shopify app scaffold
  • OAuth and webhook integration

By the numbers

  • Covers 4 Shopify development areas: apps, extensions, themes, and Functions
  • Includes 2 bundled reference docs: app-development.md and extensions.md

Files

SKILL.mdMarkdownGitHub ↗

Shopify Development Skill

Use this skill when the user asks about:

  • Building Shopify apps or extensions
  • Creating checkout/admin/POS UI customizations
  • Developing themes with Liquid templating
  • Integrating with Shopify GraphQL or REST APIs
  • Implementing webhooks or billing
  • Working with metafields or Shopify Functions

---

ROUTING: What to Build

IF user wants to integrate external services OR build merchant tools OR charge for features: → Build an App (see references/app-development.md)

IF user wants to customize checkout OR add admin UI OR create POS actions OR implement discount rules: → Build an Extension (see references/extensions.md)

IF user wants to customize storefront design OR modify product/collection pages: → Build a Theme (see references/themes.md)

IF user needs both backend logic AND storefront UI: → Build App + Theme Extension combination

---

Shopify CLI Commands

Install CLI:

npm install -g @shopify/cli@latest

Create and run app:

shopify app init          # Create new app
shopify app dev           # Start dev server with tunnel
shopify app deploy        # Build and upload to Shopify

Generate extension:

shopify app generate extension --type checkout_ui_extension
shopify app generate extension --type admin_action
shopify app generate extension --type admin_block
shopify app generate extension --type pos_ui_extension
shopify app generate extension --type function

Theme development:

shopify theme init        # Create new theme
shopify theme dev         # Start local preview at localhost:9292
shopify theme pull --live # Pull live theme
shopify theme push --development  # Push to dev theme

---

Access Scopes

Configure in shopify.app.toml:

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

Common scopes:

  • read_products, write_products - Product catalog access
  • read_orders, write_orders - Order management
  • read_customers, write_customers - Customer data
  • read_inventory, write_inventory - Stock levels
  • read_fulfillments, write_fulfillments - Order fulfillment

---

GraphQL Patterns (Validated against API 2026-01)

Query Products

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

Query Orders

query GetOrders($first: Int!) {
  orders(first: $first) {
    edges {
      node {
        id
        name
        createdAt
        displayFinancialStatus
        totalPriceSet {
          shopMoney {
            amount
            currencyCode
          }
        }
      }
    }
  }
}

Set Metafields

mutation SetMetafields($metafields: [MetafieldsSetInput!]!) {
  metafieldsSet(metafields: $metafields) {
    metafields {
      id
      namespace
      key
      value
    }
    userErrors {
      field
      message
    }
  }
}

Variables example:

{
  "metafields": [
    {
      "ownerId": "gid://shopify/Product/123",
      "namespace": "custom",
      "key": "care_instructions",
      "value": "Handle with care",
      "type": "single_line_text_field"
    }
  ]
}

---

Checkout Extension Example

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

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

function GiftMessage() {
  const [isGift, setIsGift] = useState(false);
  const [message, setMessage] = useState("");
  const applyAttributeChange = useApplyAttributeChange();

  useEffect(() => {
    if (isGift && message) {
      applyAttributeChange({
        type: "updateAttribute",
        key: "gift_message",
        value: message,
      });
    }
  }, [isGift, message]);

  return (
    <BlockStack spacing="loose">
      <Checkbox checked={isGift} onChange={setIsGift}>
        This is a gift
      </Checkbox>
      {isGift && (
        <TextField
          label="Gift Message"
          value={message}
          onChange={setMessage}
          multiline={3}
        />
      )}
    </BlockStack>
  );
}

---

Liquid Template Example

{% comment %} Product Card Snippet {% endcomment %}
<div class="product-card">
  <a href="{{ product.url }}">
    {% if product.featured_image %}
      <img
        src="{{ product.featured_image | img_url: 'medium' }}"
        alt="{{ product.title | escape }}"
        loading="lazy"
      >
    {% endif %}
    <h3>{{ product.title }}</h3>
    <p class="price">{{ product.price | money }}</p>
    {% if product.compare_at_price > product.price %}
      <p class="sale-badge">Sale</p>
    {% endif %}
  </a>
</div>

---

Webhook Configuration

In shopify.app.toml:

[webhooks]
api_version = "2026-01"

[[webhooks.subscriptions]]
topics = ["orders/create", "orders/updated"]
uri = "/webhooks/orders"

[[webhooks.subscriptions]]
topics = ["products/update"]
uri = "/webhooks/products"

# GDPR mandatory webhooks (required for app approval)
[webhooks.privacy_compliance]
customer_data_request_url = "/webhooks/gdpr/data-request"
customer_deletion_url = "/webhooks/gdpr/customer-deletion"
shop_deletion_url = "/webhooks/gdpr/shop-deletion"

---

Best Practices

API Usage

  • Use GraphQL over REST for new development
  • Request only fields you need (reduces query cost)
  • Implement cursor-based pagination with pageInfo.endCursor
  • Use bulk operations for processing more than 250 items
  • Handle rate limits with exponential backoff

Security

  • Store API credentials in environment variables
  • Always verify webhook HMAC signatures before processing
  • Validate OAuth state parameter to prevent CSRF
  • Request minimal access scopes
  • Use session tokens for embedded apps

Performance

  • Cache API responses when data doesn't change frequently
  • Use lazy loading in extensions
  • Optimize images in themes using img_url filter
  • Monitor GraphQL query costs via response headers

---

Troubleshooting

IF you see rate limit errors: → Implement exponential backoff retry logic → Switch to bulk operations for large datasets → Monitor X-Shopify-Shop-Api-Call-Limit header

IF authentication fails: → Verify the access token is still valid → Check that all required scopes were granted → Ensure OAuth flow completed successfully

IF extension is not appearing: → Verify the extension target is correct → Check that extension is published via shopify app deploy → Confirm the app is installed on the test store

IF webhook is not receiving events: → Verify the webhook URL is publicly accessible → Check HMAC signature validation logic → Review webhook logs in Partner Dashboard

IF GraphQL query fails: → Validate query against schema (use GraphiQL explorer) → Check for deprecated fields in error message → Verify you have required access scopes

---

Reference Files

For detailed implementation guides, read these files:

  • references/app-development.md - OAuth authentication flow, GraphQL mutations for products/orders/billing, webhook handlers, billing API integration
  • references/extensions.md - Checkout UI components, Admin UI extensions, POS extensions, Shopify Functions for discounts/payment/delivery
  • references/themes.md - Liquid syntax reference, theme directory structure, sections and snippets, common patterns

---

Scripts

  • scripts/shopify_init.py - Interactive project scaffolding. Run: python scripts/shopify_init.py
  • scripts/shopify_graphql.py - GraphQL utilities with query templates, pagination, rate limiting. Import: from shopify_graphql import ShopifyGraphQL

---

Official Documentation Links

  • Shopify Developer Docs: https://shopify.dev/docs
  • GraphQL Admin API Reference: https://shopify.dev/docs/api/admin-graphql
  • Shopify CLI Reference: https://shopify.dev/docs/api/shopify-cli
  • Polaris Design System: https://polaris.shopify.com

API Version: 2026-01 (quarterly releases, 12-month deprecation window)

When to Use

This skill is applicable to execute the workflow or actions described in the overview.

Limitations

  • Use this skill only when the task clearly matches the scope described above.
  • Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
  • Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

Related skills

How it compares

Choose shopify-development over generic ecommerce skills when you need Shopify-specific OAuth, GraphQL Admin API, Polaris, Liquid, and Functions patterns.

FAQ

When should I build an app versus an extension?

Apps for external integrations and billing; extensions for checkout, admin, or POS UI.

How do I start local Shopify development?

npm install -g @shopify/cli then shopify app dev for tunneled dev server.

What API is preferred for admin operations?

GraphQL Admin API alongside documented REST and webhook patterns.

Is Shopify Development safe to install?

skills.sh reports 2 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

Backend & APIsintegrationsfrontend

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.