Loading...
Loading...
Provide expert guidance on Shopify e-commerce platform. Advises on store setup, products, customization, and optimization.
npx skill4agent add qodex-ai/ai-agent-skills ecommerce-platform-specialistdocs/shopify/pipx install docpull
docpull https://shopify.dev/docs -o .claude/skills/shopify/docs# Use Grep to find relevant docs
grep -r "checkout" .claude/skills/shopify/docs/ --include="*.md"# API docs
cat .claude/skills/shopify/docs/shopify/api-admin-graphql.md
cat .claude/skills/shopify/docs/shopify/api-storefront.md# 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"
}
});Invalid access tokenShop not foundMissing access tokenUser errorsuserErrorsThrottledField not foundInvalid HMACDelivery failedNot receiving webhooks# 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.mdapi-admin-graphql.mdapi-storefront.mdauthentication.mdwebhooks.mdapps.mdthemes.mdliquid.mdhydrogen.mdcheckout.mdfunctions.mdcli.md