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

2. 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

3. 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", () => (
  <Extension />
));

function Extension() {
  const [message, setMessage] = useState("");

  return (
    <BlockStack>
      <TextField label="Gift Message" value={message} onChange={setMessage} />
    </BlockStack>
  );
}

Liquid Product Display

{% for product in collection.products %}
  <div class="product-card">
    <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
    <h3>{{ product.title }}</h3>
    <p>{{ product.price | money }}</p>
    <a href="{{ product.url }}">View Details</a>
  </div>
{% 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.