Shopify Development
Comprehensive guide for building on Shopify platform: apps, extensions, themes, and API integrations.
Platform Overview
Core Components:
Shopify CLI - Development workflow tool GraphQL Admin API - Primary API for data operations (recommended) REST Admin API - Legacy API (maintenance mode) Polaris UI - Design system for consistent interfaces Liquid - Template language for themes
Extension Points:
Checkout UI - Customize checkout experience Admin UI - Extend admin dashboard POS UI - Point of Sale customization Customer Account - Post-purchase pages Theme App Extensions - Embedded theme functionality Quick Start Prerequisites
Install Shopify CLI
npm install -g @shopify/cli@latest
Verify installation
shopify version
Create New App
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
Theme Development
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
Development Workflow 1. App 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
- Extension Development
Available Types:
Checkout UI - checkout_ui_extension Admin Action - admin_action Admin Block - admin_block POS UI - pos_ui_extension Function - function (discounts, payment, delivery, validation)
Workflow:
shopify app generate extension
Select type, configure
shopify app dev # Test locally shopify app deploy # Publish
- Theme Development
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
When to Build What Build an App When: Integrating external services Adding functionality across multiple stores Building merchant-facing admin tools Managing store data programmatically Implementing complex business logic Charging for functionality Build an Extension When: Customizing checkout flow Adding fields/features to admin pages Creating POS actions for retail Implementing discount/payment/shipping rules Extending customer account pages Build a Theme When: Creating custom storefront design Building unique shopping experiences Customizing product/collection pages Implementing brand-specific layouts Modifying homepage/content pages Combination Approach:
App + Theme Extension:
App handles backend logic and data Theme extension provides storefront UI Example: Product reviews, wishlists, size guides Essential Patterns GraphQL Product Query query GetProducts($first: Int!) { products(first: $first) { edges { node { id title handle variants(first: 5) { edges { node { id price inventoryQuantity } } } } } pageInfo { hasNextPage endCursor } } }
Checkout Extension (React) import { reactExtension, BlockStack, TextField, Checkbox } from '@shopify/ui-extensions-react/checkout';
export default reactExtension('purchase.checkout.block.render', () =>
function Extension() { const [message, setMessage] = useState('');
return (
Liquid Product Display
{% for product in collection.products %}
{% endfor %}
Best Practices
API Usage:
Prefer GraphQL over REST for new development Request only needed fields to reduce costs Implement pagination for large datasets Use bulk operations for batch processing Respect rate limits (cost-based for GraphQL)
Security:
Store API credentials in environment variables Verify webhook signatures Use OAuth for public apps Request minimal access scopes Implement session tokens for embedded apps
Performance:
Cache API responses when appropriate Optimize images in themes Minimize Liquid logic complexity Use async loading for extensions Monitor query costs in GraphQL
Testing:
Use development stores for testing Test across different store plans Verify mobile responsiveness Check accessibility (keyboard, screen readers) Validate GDPR compliance Reference Documentation
Detailed guides for advanced topics:
App Development - OAuth, APIs, webhooks, billing Extensions - Checkout, Admin, POS, Functions Themes - Liquid, sections, deployment Scripts
shopify_init.py - Initialize Shopify projects interactively
python scripts/shopify_init.py
Troubleshooting
Rate Limit Errors:
Monitor X-Shopify-Shop-Api-Call-Limit header Implement exponential backoff Use bulk operations for large datasets
Authentication Failures:
Verify access token validity Check required scopes granted Ensure OAuth flow completed
Extension Not Appearing:
Verify extension target correct Check extension published Ensure app installed on store
Webhook Not Receiving:
Verify webhook URL accessible Check signature validation Review logs in Partner Dashboard Resources
Official Documentation:
Shopify Docs: https://shopify.dev/docs GraphQL API: https://shopify.dev/docs/api/admin-graphql Shopify CLI: https://shopify.dev/docs/api/shopify-cli Polaris: https://polaris.shopify.com
Tools:
GraphiQL Explorer (Admin → Settings → Apps → Develop apps) Partner Dashboard (app management) Development stores (free testing)
API Versioning:
Quarterly releases (YYYY-MM format) Current: 2025-01 12-month support per version Test before version updates
Note: This skill covers Shopify platform as of January 2025. Refer to official documentation for latest updates.