Guide for implementing Shopify apps, extensions, themes, and integrations using GraphQL/REST APIs, Shopify CLI, Polaris UI, and various extension types (Checkout, Admin, POS)...
This skill provides comprehensive guidance for building on the Shopify platform, including apps, extensions, themes, and API integrations.
Use this skill when you need to:
Installation:
npm install -g @shopify/cli@latest
Essential Commands:
shopify app init - Create new appshopify app dev - Start local development servershopify app deploy - Deploy app to Shopifyshopify app generate extension - Add extension to appshopify theme dev - Preview theme locallyshopify theme pull/push - Sync theme filesFor detailed CLI reference, see reference/cli-commands.md
Primary API for new development. Efficient, type-safe, flexible.
Endpoint:
https://{shop-name}.myshopify.com/admin/api/2025-01/graphql.json
Authentication:
headers: {
'X-Shopify-Access-Token': 'your-access-token',
'Content-Type': 'application/json'
}
Common Operations:
For comprehensive GraphQL reference, see reference/graphql-admin-api.md
Use only for legacy systems. Shopify recommends GraphQL for all new development.
Base URL:
https://{shop-name}.myshopify.com/admin/api/2025-01/{resource}.json
Rate Limits:
Design system for consistent Shopify UI:
npm install @shopify/polaris
Framework-agnostic components:
<script src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>
Customize checkout experience with native-rendered components.
Generate:
shopify app generate extension --type checkout_ui_extension
Configuration: shopify.extension.toml
Common Components: View, BlockStack, InlineLayout, Button, TextField, Checkbox, Banner
For detailed extension reference, see reference/ui-extensions.md
Extend Shopify admin interface.
Types:
Customize Point of Sale experience.
Types:
Upsell offers after checkout completion.
Target: purchase.thank-you.block.render
Customize post-purchase account pages.
Targets: Account overview, order status/index
Serverless backend customization running on Shopify infrastructure.
Function Types:
Languages: JavaScript, Rust, AssemblyScript
Generate:
shopify app generate extension --type function
Core Concepts:
{{ product.title }} - Output dynamic content{{ product.price | money }} - Transform data{% if %} {% for %} {% case %} - Control flowCommon Objects:
product - Product datacollection - Collection datacart - Shopping cartcustomer - Customer accountshop - Store informationArchitecture:
Development:
shopify theme dev # Local preview
shopify theme pull # Download from store
shopify theme push # Upload to store
For public apps accessing merchant stores:
Request minimum permissions needed:
read_products - View productswrite_products - Modify productsread_orders - View orderswrite_orders - Modify ordersFull scope list: https://shopify.dev/api/usage/access-scopes
For embedded apps in Shopify admin using App Bridge.
Real-time event notifications from Shopify.
Configuration: shopify.app.toml
Common Topics:
orders/create, orders/updated, orders/paidproducts/create, products/update, products/deletecustomers/create, customers/updateapp/uninstalledGDPR Mandatory Webhooks:
customers/data_requestcustomers/redactshop/redactCustom data storage for extending Shopify resources.
Owners: Products, variants, customers, orders, collections, shop
Types: text, number, date, URL, JSON, file_reference
Access: Admin API, Storefront API, Liquid templates
Initialize App:
shopify app init
Configure Access Scopes:
Edit shopify.app.toml:
[access_scopes]
scopes = "read_products,write_products"
Start Development Server:
shopify app dev
Generate Extensions:
shopify app generate extension
Test in Development Store: Install app on test store
Deploy to Production:
shopify app deploy
query {
products(first: 10) {
edges {
node {
id
title
handle
variants(first: 5) {
edges {
node {
id
price
inventoryQuantity
}
}
}
}
}
pageInfo {
hasNextPage
endCursor
}
}
}
mutation {
productCreate(input: {
title: "New Product"
productType: "Clothing"
variants: [{
price: "29.99"
sku: "SKU123"
}]
}) {
product {
id
title
}
userErrors {
field
message
}
}
}
import { useState } from 'react';
import {
render,
BlockStack,
TextField,
Checkbox,
useApi
} from '@shopify/ui-extensions-react/checkout';
function Extension() {
const { extensionPoint } = useApi();
const [checked, setChecked] = useState(false);
return (
<BlockStack>
<TextField label="Gift Message" />
<Checkbox checked={checked} onChange={setChecked}>
This is a gift
</Checkbox>
</BlockStack>
);
}
render('Checkout::Dynamic::Render', () => <Extension />);
This skill includes detailed reference documentation:
Rate Limit Errors:
X-Shopify-Shop-Api-Call-Limit headerAuthentication Failures:
Webhook Not Receiving Events:
Extension Not Appearing:
Shopify uses quarterly API versioning (YYYY-MM format):
Single merchant installation, no review required.
App Store listing with Shopify review:
Note: This skill covers the Shopify platform as of January 2025. Always refer to official Shopify documentation for the latest updates and API versions.