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

Shopify

aia-11-hn-mib/mib-mockinterviewaibot

  • 4 installs
  • 1 repo stars
  • Updated November 15, 2025
  • aia-11-hn-mib/mib-mockinterviewaibot

shopify is a Claude Code skill for building Shopify apps, extensions, and themes using the GraphQL/REST Admin APIs, Shopify CLI, Polaris UI, and Liquid templating.

About

This skill guides building on the Shopify platform: apps, checkout and admin extensions, POS extensions, and themes. It uses the GraphQL and REST Admin APIs, Shopify CLI, Polaris UI components, and Liquid templating. A developer uses it when building Shopify apps, customizing checkout, or managing store data via APIs. It documents CLI commands, access scopes, extension types, and when to build an app versus an extension or theme.

  • Builds Shopify apps, extensions, and themes
  • Uses GraphQL/REST Admin APIs, Shopify CLI, Polaris, and Liquid
  • Covers checkout, admin, and POS UI extensions plus webhooks and billing

Shopify by the numbers

  • 4 all-time installs (skills.sh)
  • Ranked #3,692 of 4,348 Backend & APIs skills by installs in the Skillselion catalog
  • Data as of Jul 28, 2026 (Skillselion catalog sync)
At a glance

shopify capabilities & compatibility

Free skill; requires a Shopify partner/store account and API credentials.

Capabilities
shopify app development · checkout customization · theme development · api integration
Use cases
api development · frontend
Pricing
Bring your own API key
Requires keys
SHOPIFYAPPACCESSSCOPESOAUTHCREDENTIALS
From the docs

What shopify says it does

Comprehensive guide for building on Shopify platform: apps, extensions, themes, and API integrations.
SKILL.md
GraphQL Admin API** - Primary API for data operations (recommended)
SKILL.md
npx skills add https://github.com/aia-11-hn-mib/mib-mockinterviewaibot --skill shopify

Add your badge

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

Listed on Skillselion
Installs4
repo stars★ 1
Last updatedNovember 15, 2025
Repositoryaia-11-hn-mib/mib-mockinterviewaibot ↗

What it does

Build Shopify apps, extensions, and themes using the Admin GraphQL/REST APIs, Shopify CLI, Polaris, and Liquid.

Who is it for?

Building Shopify apps, checkout/admin/POS extensions, and themes

When should I use this skill?

Building Shopify apps, customizing checkout, developing themes, or managing store data via APIs

What you get

A working Shopify app, extension, or theme integrated with store data.

  • Shopify app
  • Checkout/admin/POS extension
  • Shopify theme

By the numbers

  • 3 build targets (apps, extensions, themes)
  • 5 extension points (Checkout, Admin, POS, Customer Account, Theme App)

Files

SKILL.mdMarkdownGitHub ↗

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](references/app-development.md) - OAuth, APIs, webhooks, billing
  • [Extensions](references/extensions.md) - Checkout, Admin, POS, Functions
  • [Themes](references/themes.md) - Liquid, sections, deployment

Scripts

[shopify_init.py](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.

Related skills

open.feishu.cnLark Openapi ExplorerInstantly explore, test, and generate calls against the full Lark (Feishu) OpenAPI surface without leaving their agent workflow.493klarksuiteLark EventConsume real-time events from Lark/Feishu as structured NDJSON streams inside AI agent workflows.387k16klarksuiteLark Openapi ExplorerWhen an existing Lark/Feishu skill or CLI command cannot fulfill a specific requirement and they need to discover and invoke the exact native OpenAPI endpoint.386k16kscrapegraphaiJust ScrapeQuickly search, crawl, extract structured JSON, or monitor web pages without writing custom scraping code.245k41larksuiteLark AppsQuery the current visibility and permission scope of a Lark (Feishu) app without writing HTTP client code.235k16kmattpocockDesign An InterfaceGenerate multiple radically different interface or API designs in parallel before committing to one.188k198k

FAQ

Which Shopify API should I use?

The GraphQL Admin API is the recommended primary API; the REST Admin API is legacy and in maintenance mode.

When should I build an app versus an extension?

Build an app for integrating external services or cross-store functionality; build an extension to customize checkout, admin pages, or POS.

Backend & APIsecommercepayments
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

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

unsubscribe anytime.