메뉴
Provide expert guidance on Shopify e-commerce platform. Advises on store setup, products, customization, and optimization.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | ecommerce-platform-specialist |
| description | Provide expert guidance on Shopify e-commerce platform. Advises on store setup, products, customization, and optimization. |
| license | Proprietary. LICENSE.txt has complete terms |
Provide comprehensive, accurate guidance for building on Shopify's platform based on 24+ official documentation files. Cover all aspects of app development, theme customization, API integration, checkout extensions, and e-commerce features.
Full access to official Shopify documentation (when available):
docs/shopify/Note: Documentation must be pulled separately:
pipx install docpull
docpull https://shopify.dev/docs -o .claude/skills/shopify/docs
Major Areas:
Invoke when user mentions:
When answering questions:
Search for specific topics:
# Use Grep to find relevant docs
grep -r "checkout" .claude/skills/shopify/docs/ --include="*.md"
Read specific documentation:
# API docs
cat .claude/skills/shopify/docs/shopify/api-admin-graphql.md
cat .claude/skills/shopify/docs/shopify/api-storefront.md
Find implementation guides:
# List all guides
ls .claude/skills/shopify/docs/shopify/
// Redirect to Shopify OAuth
const authUrl = `https://${shop}/admin/oauth/authorize?` +
`client_id=${process.env.SHOPIFY_API_KEY}&` +
`scope=read_products,write_products&` +
`redirect_uri=${redirectUri}&` +
`state=${nonce}`;
// Exchange code for access token
const response = await fetch(
`https://${shop}/admin/oauth/access_token`,
{
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
client_id: process.env.SHOPIFY_API_KEY,
client_secret: process.env.SHOPIFY_API_SECRET,
code
})
}
);
const { access_token } = await response.json();
import { shopifyApi } from '@shopify/shopify-api';
const shopify = shopifyApi({
apiKey: process.env.SHOPIFY_API_KEY,
apiSecretKey: process.env.SHOPIFY_API_SECRET,
scopes: ['read_products', 'write_products'],
hostName: process.env.HOST,
isEmbeddedApp: true,
});
query {
products(first: 10) {
edges {
node {
id
title
handle
priceRange {
minVariantPrice {
amount
currencyCode
}
}
variants(first: 5) {
edges {
node {
id
sku
inventoryQuantity
}
}
}
}
}
}
}
mutation {
productCreate(input: {
title: "New Product"
vendor: "My Store"
productType: "Apparel"
variants: [{
price: "29.99"
sku: "PROD-001"
}]
}) {
product {
id
title
}
userErrors {
field
message
}
}
}
query {
orders(first: 25, query: "fulfillment_status:unfulfilled") {
edges {
node {
id
name
createdAt
totalPriceSet {
shopMoney {
amount
currencyCode
}
}
customer {
email
}
lineItems(first: 10) {
edges {
node {
title
quantity
}
}
}
}
}
}
}
mutation {
cartCreate(input: {
lines: [{
merchandiseId: "gid://shopify/ProductVariant/123"
quantity: 1
}]
}) {
cart {
id
checkoutUrl
cost {
totalAmount {
amount
currencyCode
}
}
}
}
}
mutation {
cartLinesUpdate(
cartId: "gid://shopify/Cart/xyz"
lines: [{
id: "gid://shopify/CartLine/abc"
quantity: 2
}]
) {
cart {
id
lines(first: 10) {
edges {
node {
quantity
}
}
}
}
}
}
// Register webhook via API
const webhook = await shopify.webhooks.register({
topic: 'ORDERS_CREATE',
address: 'https://your-app.com/webhooks/orders-create',
format: 'json'
});
import crypto from 'crypto';
function verifyWebhook(body, hmacHeader, secret) {
const hash = crypto
.createHmac('sha256', secret)
.update(body, 'utf8')
.digest('base64');
return hash === hmacHeader;
}
// In webhook handler
app.post('/webhooks/orders-create', async (req, res) => {
const hmac = req.headers['x-shopify-hmac-sha256'];
const body = await req.text();
if (!verifyWebhook(body, hmac, process.env.SHOPIFY_API_SECRET)) {
return res.status(401).send('Invalid HMAC');
}
const order = JSON.parse(body);
// Process order...
res.status(200).send('OK');
});
<!-- Output product title -->
{{ product.title }}
<!-- Conditional logic -->
{% if product.available %}
<button>Add to Cart</button>
{% else %}
<span>Sold Out</span>
{% endif %}
<!-- Loop through variants -->
{% for variant in product.variants %}
<option value="{{ variant.id }}">
{{ variant.title }} - {{ variant.price | money }}
</option>
{% endfor %}
{% schema %}
{
"name": "Featured Product",
"settings": [
{
"type": "product",
"id": "product",
"label": "Product"
}
]
}
{% endschema %}
{% if section.settings.product %}
{% assign product = section.settings.product %}
<div class="featured-product">
<img src="{{ product.featured_image | img_url: '500x' }}" alt="{{ product.title }}">
<h2>{{ product.title }}</h2>
<p>{{ product.price | money }}</p>
</div>
{% endif %}
// Function to apply volume discount
export default (input) => {
const quantity = input.cart.lines.reduce((sum, line) => sum + line.quantity, 0);
let discountPercentage = 0;
if (quantity >= 10) discountPercentage = 20;
else if (quantity >= 5) discountPercentage = 10;
if (discountPercentage > 0) {
return {
discounts: [{
message: `${discountPercentage}% volume discount`,
targets: [{
orderSubtotal: {
excludedVariantIds: []
}
}],
value: {
percentage: {
value: discountPercentage.toString()
}
}
}]
};
}
return { discounts: [] };
};
// Hide specific delivery options
export default (input) => {
const operations = [];
// Hide express shipping for orders under $100
const cartTotal = parseFloat(input.cart.cost.subtotalAmount.amount);
if (cartTotal < 100) {
const expressOptions = input.cart.deliveryGroups[0].deliveryOptions
.filter(option => option.title.toLowerCase().includes('express'));
expressOptions.forEach(option => {
operations.push({
hide: {
deliveryOptionHandle: option.handle
}
});
});
}
return { operations };
};
// app/routes/products.$handle.tsx
import {json, LoaderFunctionArgs} from '@shopify/remix-oxygen';
import {useLoaderData} from '@remix-run/react';
export async function loader({params, context}: LoaderFunctionArgs) {
const {product} = await context.storefront.query(PRODUCT_QUERY, {
variables: {handle: params.handle},
});
return json({product});
}
export default function Product() {
const {product} = useLoaderData<typeof loader>();
return (
<div>
<h1>{product.title}</h1>
<img src={product.featuredImage.url} alt={product.title} />
<p>{product.description}</p>
<AddToCartButton productId={product.id} />
</div>
);
}
const PRODUCT_QUERY = `#graphql
query Product($handle: String!) {
product(handle: $handle) {
id
title
description
featuredImage {
url
altText
}
variants(first: 10) {
nodes {
id
price {
amount
currencyCode
}
}
}
}
}
`;
# Create new app
shopify app init
# Start development server
shopify app dev
# Deploy app
shopify app deploy
# Create extension
shopify app generate extension
# Create theme
shopify theme init
# Serve theme locally
shopify theme dev --store=your-store.myshopify.com
# Push theme
shopify theme push
# Pull theme
shopify theme pull
// Create test product
const product = await shopify.rest.Product.save({
session,
title: "Test Product",
body_html: "<strong>Test description</strong>",
vendor: "Test Vendor",
product_type: "Test Type",
variants: [{
price: "19.99",
sku: "TEST-001"
}]
});
// Create test order
const order = await shopify.rest.Order.save({
session,
line_items: [{
variant_id: 123456789,
quantity: 1
}],
customer: {
email: "test@example.com"
}
});
API Keys:
Webhooks:
Access Scopes:
Rate Limits:
Invalid access token - Check token is valid and has correct scopesShop not found - Verify shop domain formatMissing access token - Include X-Shopify-Access-Token headerUser errors - Check userErrors field in responseThrottled - Reduce request rateField not found - Verify API version supports fieldInvalid HMAC - Check webhook secret and verification logicDelivery failed - Ensure endpoint returns 200 within timeoutNot receiving webhooks - Check webhook registration and endpoint URLNeed to find something specific?
# Search all docs
grep -r "search term" .claude/skills/shopify/docs/
# Find specific topics
ls .claude/skills/shopify/docs/shopify/
# Read specific guide
cat .claude/skills/shopify/docs/shopify/webhooks.md
Common doc files:
api-admin-graphql.md - GraphQL Admin APIapi-storefront.md - Storefront APIauthentication.md - OAuth and auth flowswebhooks.md - Webhook handlingapps.md - App developmentthemes.md - Theme developmentliquid.md - Liquid referencehydrogen.md - Headless commercecheckout.md - Checkout customizationfunctions.md - Shopify Functionscli.md - CLI commandsBuild autonomous game-playing agents using AI and reinforcement learning. Covers game environments, agent decision-making, strategy development, and performance optimization. Use when creating game-playing bots, testing game AI, strategic decision-making systems, or game theory applications.
Build interactive chat agents for exploring and discussing academic research papers from ArXiv. Covers paper retrieval, content processing, question-answering, and research synthesis. Use when building research assistants, paper summarization tools, academic knowledge bases, or scientific literature chatbots.
Build agents that generate creative content including music, memes, podcasts, and multimedia. Covers generative models, content synthesis, style transfer, and creative control. Use when building creative assistants, automated content creators, multimedia generators, or artistic AI systems.
Build agents specialized in conducting thorough research, gathering information from multiple sources, and synthesizing findings. Covers research planning, source evaluation, and report generation. Use when automating market research, competitive analysis, literature reviews, or intelligence gathering.
Build chat interfaces for querying documents using natural language. Extract information from PDFs, GitHub repositories, emails, and other sources. Use when creating interactive document Q&A systems, knowledge base chatbots, email search interfaces, or document exploration tools.
Create agents for financial analysis, investment research, and portfolio management. Covers financial data processing, risk analysis, and recommendation generation. Use when building investment analysis tools, robo-advisors, portfolio trackers, or financial intelligence systems.