96 lines
2.7 KiB
Markdown
96 lines
2.7 KiB
Markdown
---
|
|
name: ck-shopify
|
|
description: Build Shopify apps, extensions, and themes with Shopify CLI. Use for GraphQL/REST Admin API, Polaris UI components, Liquid templates, checkout customization, webhooks, and billing integration.
|
|
---
|
|
|
|
# Shopify Development
|
|
|
|
Build Shopify apps, extensions, and themes for the Shopify platform.
|
|
|
|
## When to Use
|
|
|
|
- Building Shopify apps (OAuth, Admin API, webhooks, billing)
|
|
- Creating checkout UI, admin, or POS extensions
|
|
- Developing Liquid-based themes
|
|
- Integrating with GraphQL Admin API
|
|
- Setting up Shopify CLI workflows
|
|
|
|
## Don't Use When
|
|
|
|
- Building for non-Shopify e-commerce platforms
|
|
- Simple storefront customizations that don't need an app or extension
|
|
|
|
## Quick Start
|
|
|
|
```bash
|
|
npm install -g @shopify/cli@latest
|
|
|
|
# App development
|
|
shopify app init
|
|
shopify app dev # Starts local server with tunnel
|
|
shopify app deploy
|
|
|
|
# Theme development
|
|
shopify theme init
|
|
shopify theme dev # Preview at localhost:9292
|
|
shopify theme push --development
|
|
```
|
|
|
|
## Build Decision Guide
|
|
|
|
| Build | When |
|
|
|-------|------|
|
|
| **App** | External service integration, multi-store functionality, complex logic, charging for features |
|
|
| **Extension** | Customize checkout, extend admin pages, POS actions, discount/shipping rules |
|
|
| **Theme** | Custom storefront design, brand-specific layouts, product/collection pages |
|
|
|
|
## Essential Patterns
|
|
|
|
**GraphQL Product Query:**
|
|
```graphql
|
|
query GetProducts($first: Int!) {
|
|
products(first: $first) {
|
|
edges {
|
|
node { id title handle variants(first: 5) { edges { node { id price } } } }
|
|
}
|
|
pageInfo { hasNextPage endCursor }
|
|
}
|
|
}
|
|
```
|
|
|
|
**Checkout Extension (React):**
|
|
```javascript
|
|
import { reactExtension, BlockStack, TextField } from '@shopify/ui-extensions-react/checkout';
|
|
export default reactExtension('purchase.checkout.block.render', () => <Extension />);
|
|
```
|
|
|
|
**Liquid Product Display:**
|
|
```liquid
|
|
{% for product in collection.products %}
|
|
<h3>{{ product.title }}</h3>
|
|
<p>{{ product.price | money }}</p>
|
|
{% endfor %}
|
|
```
|
|
|
|
## Best Practices
|
|
|
|
- Prefer GraphQL over REST for new development
|
|
- Store API credentials in environment variables — never hardcode
|
|
- Verify webhook HMAC signatures before processing
|
|
- Request minimal OAuth scopes
|
|
- Use bulk operations for large datasets
|
|
- Implement exponential backoff for rate limit errors
|
|
|
|
## Reference Files
|
|
|
|
- `references/app-development.md` — OAuth, APIs, webhooks, billing
|
|
- `references/extensions.md` — Checkout, Admin, POS, Functions
|
|
- `references/themes.md` — Liquid, sections, deployment
|
|
|
|
## Resources
|
|
|
|
- Shopify Dev Docs: https://shopify.dev/docs
|
|
- GraphQL API: https://shopify.dev/docs/api/admin-graphql
|
|
- Polaris: https://polaris.shopify.com
|
|
- Current API version: 2025-01
|