Platform Development7 min read

Shopify Theme & App Development

Build Shopify themes with Liquid and Dawn, and develop Shopify apps with the Shopify CLI, Admin API, and Remix app framework.

shopifyliquidecommercejavascript

Shopify powers 10%+ of global ecommerce. Shopify development splits into theme development (customizing storefronts with Liquid) and app development (extending the Shopify admin and adding functionality). Both have significant app-store distribution potential.

Use Dawn as your theme base - it's Shopify's reference theme with Online Store 2.0 features (app blocks, metafields). Use Shopify CLI + Remix for apps - it's Shopify's recommended stack. Test with a development store.

Workflow

Set up Shopify theme developmentShopify's CLI provides a development server with hot reload and theme push automation.
Write Liquid templates and sectionsLiquid is Shopify's templating language - it accesses product, cart, and customer data server-side.
Scaffold a Shopify app with RemixShopify CLI generates a Remix app with OAuth, session management, and Polaris UI configured.
Use the Shopify Admin APIThe Admin API lets your app read and write Shopify store data: products, orders, customers, metafields.
Handle webhooks for event-driven commercePolling is expensive; webhooks push events (order created, product updated) to your app in real time.

Output Format

Dawn-based Liquid theme with custom sections, Remix app with Admin API integration, webhook handlers including GDPR mandatory ones, tested on dev store.

Examples

Liquid section: `{% schema %}{ "name": "Featured Product", "settings": [{ "type": "product", "id": "product", "label": "Select Product" }] }{% endschema %}
<h2>{{ section.settings.product.title }}</h2>
<p>{{ section.settings.product.price | money }}</p>`

Admin API: `const products = await admin.graphql(`query { products(first: 5, query: "status:active") { nodes { id title variants(first: 1) { nodes { price } } } } }`)`

Webhook GDPR: `export const action = async ({ request }) => { const { topic, shop, payload } = await shopify.authenticate.webhook(request); if (topic === "CUSTOMERS_DATA_REQUEST") { await scheduleDataExport(shop, payload.customer.id) } }`

Edge Cases & Gotchas

Theme app extensions: app blocks in the Customizer require section schema changes; submit for review in the Partner Dashboard
Shopify API versioning: Shopify deprecates API versions; pin to a specific version in shopify.server.ts and update quarterly
Offline access: most apps use per-request auth; for background jobs needing store access, request offline access tokens separately and store securely

When to Break These Rules

For simple one-page storefronts or landing pages hosted outside Shopify, use the Storefront API + headless approach with Next.js - more flexibility at the cost of losing the Shopify Customizer.

Reference Files

Shopify CLI: https://shopify.dev/docs/apps/tools/cli
Liquid reference: https://shopify.dev/docs/api/liquid
Shopify Admin API: https://shopify.dev/docs/api/admin-graphql
Polaris design system: https://polaris.shopify.com/