Shopify Theme Pro

Shopify Theme Development Pro

End-to-end Shopify theme development, deployment, and design system management. Covers Liquid templating, Online Store 2.0 architecture, performance optimization, deployment workflows, and CSS design systems.

When to Use

Apply this skill when:

Quick Start

Local Development

Start a local dev server with hot reload:

shopify theme dev --store=your-store.myshopify.com

Visit http://localhost:9292 to preview changes in real-time.

Deploy to Store

Push local changes to a theme:

shopify theme push --theme 

See references/deployment.md for the full pre-flight checklist and deployment workflow.

Create New Section

Generate a section scaffold:

mkdir -p sections
touch sections/my-section.liquid

See references/liquid-patterns.md for common section patterns and schemas.

Core Concepts

Theme Architecture

Directory Structure:

theme/
├── assets/          # CSS, JavaScript, images
├── config/          # Theme settings (settings_schema.json, settings_data.json)
├── layout/          # Template wrappers (theme.liquid required)
├── sections/        # Reusable, customizable content modules
├── snippets/        # Reusable code fragments
├── templates/       # Page-type templates (JSON or Liquid)
└── locales/         # Translation files (en.default.json, etc.)

Key Principles:

Online Store 2.0 Architecture

✅ DO:

❌ DON'T:

JSON Template Example:

{
  "sections": {
    "header": {
      "type": "header"
    },
    "main": {
      "type": "main-product"
    }
  },
  "order": ["header", "main"]
}

Liquid Templating Essentials

Basic Syntax:

{%- # Output variables -%}
{{ product.title }}
{{ product.price | money }}
{%- # Control flow -%}
{% if product.available %}
  Add to Cart
{% else %}
  Sold Out
{% endif %}
{%- # Loops -%}
{% for variant in product.variants limit: 10 %}
  {{ variant.title }}: {{ variant.price | money }}
{% endfor %}
{%- # Filter chaining (processes left to right) -%}
{{ product.description | strip_html | truncate: 150 | upcase }}

Performance Tips:

See references/liquid-patterns.md for advanced patterns.

Development Workflow

1. Setup

Initialize a new theme from a template:

shopify theme init

Or clone an existing theme:

shopify theme pull --theme 

2. Local Development

Run the dev server:

shopify theme dev --store=your-store.myshopify.com

Changes auto-sync to the dev theme and reload the browser.

3. Quality Checks

Run Theme Check linter:

shopify theme check

Fix any errors or warnings before deploying.

4. Deployment

See the full deployment workflow in references/deployment.md. Key steps:

shopify theme push --theme 

IMPORTANT: Never push to live theme without --allow-live flag and explicit confirmation.

5. Publish

Promote a theme to live:

shopify theme publish --theme 

Performance Optimization

See references/performance.md for detailed optimization strategies.

Quick Wins:

Avoid:

Accessibility Standards

Build accessibility from the ground up:

Example:

  {{ 'cart.add' | t }}

Design System Management

See references/design-system.md for building and maintaining a CSS design system.

Key Components:

Approach:

Merchant Customization

Enable merchants to customize themes without code:

Theme Settings (config/settings_schema.json):

{
  "name": "Colors",
  "settings": [
    {
      "type": "color",
      "id": "color_primary",
      "label": "Primary Color",
      "default": "#000000"
    },
    {
      "type": "font_picker",
      "id": "font_heading",
      "label": "Heading Font",
      "default": "helvetica_n4"
    }
  ]
}

Section Settings:

{% schema %}
{
  "name": "Featured Collection",
  "settings": [
    {
      "type": "collection",
      "id": "collection",
      "label": "Collection"
    },
    {
      "type": "range",
      "id": "products_to_show",
      "min": 2,
      "max": 12,
      "step": 1,
      "default": 4,
      "label": "Products to show"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "Heading",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Heading"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Featured Collection"
    }
  ]
}
{% endschema %}

Shopify CLI Reference

Development:

Deployment:

Quality:

Flags:

Ajax API for Interactivity

Common use cases:

Example (Add to Cart):

fetch(${window.Shopify.routes.root}cart/add.js, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    id: variantId,
    quantity: 1
  })
})
.then(response => response.json())
.then(item => {
  console.log('Added to cart:', item);
  // Update cart UI
})
.catch(error => console.error('Error:', error));

Get Cart Contents:

fetch(${window.Shopify.routes.root}cart.js)
  .then(response => response.json())
  .then(cart => console.log('Cart:', cart));

See Shopify Ajax API docs for all endpoints and response schemas.

Code Quality Standards

✅ DO:

❌ DON'T:

Testing Checklist

Before deploying to production:

Common Patterns

See references/liquid-patterns.md for detailed examples:

Resources

Navigation

Version: 1.0 (Combined from shopify-theme-dev + shopify-theme-push) Last Updated: 2026-03-13

Local Development

Start a local dev server with hot reload:

shopify theme dev --store=your-store.myshopify.com

Visit http://localhost:9292 to preview changes in real-time.

Deploy to Store

Push local changes to a theme:

shopify theme push --theme 

See references/deployment.md for the full pre-flight checklist and deployment workflow.

Create New Section

Generate a section scaffold:

mkdir -p sections
touch sections/my-section.liquid

See references/liquid-patterns.md for common section patterns and schemas.