Build Shopify applications, extensions, and themes using GraphQL/REST APIs, Shopify CLI, Polaris UI components, and Liquid templating. Capabilities include app development with OAuth authentication, checkout UI extensions for customizing checkout flow, admin UI extensions for dashboard integration, POS extensions for retail, theme development with Liquid, webhook management, billing API integration, product/order/customer management. Use when building Shopify apps, implementing checkout customizations, creating admin interfaces, developing themes, integrating payment processing, managing store data via APIs, or extending Shopify functionality.
/plugin marketplace add GGPrompts/TabzBeads/plugin install specialized@tabz-beadsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/app-development.mdreferences/extensions.mdreferences/themes.mdComprehensive guide for building on Shopify platform: apps, extensions, themes, and API integrations.
Core Components:
Extension Points:
# Install Shopify CLI
npm install -g @shopify/cli@latest
# Verify installation
shopify version
# 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
# 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
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
Available Types:
checkout_ui_extensionadmin_actionadmin_blockpos_ui_extensionfunction (discounts, payment, delivery, validation)Workflow:
shopify app generate extension
# Select type, configure
shopify app dev # Test locally
shopify app deploy # Publish
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
App + Theme Extension:
query GetProducts($first: Int!) {
products(first: $first) {
edges {
node {
id
title
handle
variants(first: 5) {
edges {
node {
id
price
inventoryQuantity
}
}
}
}
}
pageInfo {
hasNextPage
endCursor
}
}
}
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>
);
}
{% 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 %}
API Usage:
Security:
Performance:
Testing:
Detailed guides for advanced topics:
shopify_init.py - Initialize Shopify projects interactively
python scripts/shopify_init.py
Rate Limit Errors:
X-Shopify-Shop-Api-Call-Limit headerAuthentication Failures:
Extension Not Appearing:
Webhook Not Receiving:
Official Documentation:
Tools:
API Versioning:
Note: This skill covers Shopify platform as of January 2025. Refer to official documentation for latest updates.
This skill should be used when the user asks about libraries, frameworks, API references, or needs code examples. Activates for setup questions, code generation involving libraries, or mentions of specific frameworks like React, Vue, Next.js, Prisma, Supabase, etc.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.