Shopify CLI & Developer Tools

When to use this skill

Use this skill when:

• Installing and configuring Shopify CLI
• Running theme development commands
• Running app development commands
• Using Theme Check for linting
• Configuring VS Code for Shopify development
• Debugging Liquid code
• Setting up development workflows

Installing Shopify CLI

Prerequisites

• Node.js 18+ - Required for all Shopify development
• Git - For version control
• Package manager - npm or pnpm

Installation

# Install globally via npm
npm install -g @shopify/cli @shopify/theme

# Or via Homebrew (macOS)
brew tap shopify/shopify
brew install shopify-cli

# Verify installation
shopify version

Authentication

# Log in to your Partner account
shopify auth login

# Log out
shopify auth logout

# Check current auth status
shopify auth info

Theme CLI Commands

Initialize Theme

# Clone Skeleton theme as starting point
shopify theme init my-theme

# Clone from custom repository
shopify theme init my-theme --clone-url git@github.com:org/repo.git

Development Server

# Start dev server (auto-connects to store)
shopify theme dev

# Connect to specific store
shopify theme dev --store my-store.myshopify.com

# Specify theme to work on
shopify theme dev --theme THEME_ID

# Use specific port
shopify theme dev --port 9292

# Open in default browser
shopify theme dev --open

# Live reload options
shopify theme dev --live-reload hot-reload
shopify theme dev --live-reload full-page
shopify theme dev --live-reload off

Push & Pull

# Push local changes to Shopify
shopify theme push

# Push as new unpublished theme
shopify theme push --unpublished

# Push to specific theme
shopify theme push --theme THEME_ID

# Push only specific files
shopify theme push --only templates/*.json

# Push ignoring specific files
shopify theme push --ignore config/settings_data.json

# Pull theme from Shopify
shopify theme pull

# Pull specific theme
shopify theme pull --theme THEME_ID

# Pull only specific files
shopify theme pull --only sections/*.liquid

Theme Management

# List all themes
shopify theme list

# Publish a theme
shopify theme publish --theme THEME_ID

# Rename a theme
shopify theme rename --theme THEME_ID --name "New Name"

# Delete a theme
shopify theme delete --theme THEME_ID

# Package theme for upload
shopify theme package

# Open theme in browser
shopify theme open --theme THEME_ID

Theme Check (Linting)

# Run Theme Check on current directory
shopify theme check

# Check specific path
shopify theme check --path ./sections

# Auto-fix issues
shopify theme check --auto-correct

# Output as JSON
shopify theme check --output json

# Fail on warnings (useful for CI)
shopify theme check --fail-level warning

# Show offenses inline
shopify theme check --print-offenses

Theme Info & Console

# Show theme environment info
shopify theme info

# Start Liquid REPL console
shopify theme console

# Pull metafields for local development
shopify theme metafields pull

App CLI Commands

Create App

# Initialize new app
shopify app init

# Choose template interactively:
# - Remix (recommended)
# - Node
# - Ruby
# - PHP

Development

# Start dev server with tunnel
shopify app dev

# Reset app configuration
shopify app dev --reset

# Skip tunnel (use your own)
shopify app dev --no-tunnel

# Specify port
shopify app dev --port 3000

Generate Extensions

# Generate new extension
shopify app generate extension

# Extension types available:
# - Checkout UI
# - Admin UI
# - Theme App Extension
# - Post-purchase UI
# - Shopify Function
# - Web Pixel
# - Flow Action/Trigger
# - POS UI

Deployment

# Deploy app and extensions
shopify app deploy

# List app versions
shopify app versions list

# Release specific version
shopify app release --version VERSION_ID

App Info

# Show app info
shopify app info

# Show environment variables
shopify app env show

# Pull environment variables
shopify app env pull

Functions

# Run function locally
shopify app function run --path extensions/my-function

# Generate types for function
shopify app function typegen --path extensions/my-function

VS Code Extension

Installation

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search "Shopify Liquid"
4. Install the official extension

Or install from CLI:

code --install-extension Shopify.theme-check-vscode

Features

Configuration

// .vscode/settings.json
{
  "shopifyLiquid.formatterDevPreview": true,
  "shopifyLiquid.themeCheckNextDevPreview": true,
  "editor.formatOnSave": true,
  "[liquid]": {
    "editor.defaultFormatter": "Shopify.theme-check-vscode"
  },
  "files.associations": {
    "*.liquid": "liquid"
  }
}

Theme Check Configuration

.theme-check.yml

# Extends default configuration
extends: :default

# Enable/disable specific checks
SyntaxError:
  enabled: true
  severity: error

DeprecatedFilter:
  enabled: true
  severity: warning

MissingTemplate:
  enabled: true

UnusedAssign:
  enabled: true

UnusedSnippet:
  enabled: false

ImgWidthAndHeight:
  enabled: true

AssetSizeCSS:
  enabled: true
  threshold_in_bytes: 100000

AssetSizeJavaScript:
  enabled: true
  threshold_in_bytes: 50000

# Ignore specific files
ignore:
  - vendor/**/*
  - assets/vendor.js

Common Theme Check Errors

Development Workflow

Theme Development

# 1. Clone starter theme
shopify theme init my-theme
cd my-theme

# 2. Start development
shopify theme dev --store my-store.myshopify.com

# 3. Make changes (auto-synced)
# Edit files in your editor

# 4. Run linter
shopify theme check

# 5. Push when ready
shopify theme push --theme THEME_ID

# 6. Publish live
shopify theme publish --theme THEME_ID

App Development

# 1. Create app
shopify app init

# 2. Add extensions
shopify app generate extension

# 3. Start development
shopify app dev

# 4. Test locally
# App runs at http://localhost:3000

# 5. Deploy
shopify app deploy

Environment Configuration

.shopify-cli.yml (Theme)

shop: my-store.myshopify.com
theme: THEME_ID
path: .
ignore:
  - config/settings_data.json
  - .git/*

.env (App)

SHOPIFY_API_KEY=your-api-key
SHOPIFY_API_SECRET=your-api-secret
SHOPIFY_APP_URL=https://your-app.com
SCOPES=read_products,write_products
HOST=https://tunnel.ngrok.io

CI/CD Integration

GitHub Actions (Theme Check)

# .github/workflows/theme-check.yml
name: Theme Check

on: [push, pull_request]

jobs:
  theme-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: "18"

      - name: Install Shopify CLI
        run: npm install -g @shopify/cli @shopify/theme

      - name: Run Theme Check
        run: shopify theme check --fail-level error

GitHub Actions (App Deploy)

# .github/workflows/deploy.yml
name: Deploy App

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: "18"

      - name: Install dependencies
        run: npm ci

      - name: Deploy
        env:
          SHOPIFY_CLI_PARTNERS_TOKEN: ${{ secrets.SHOPIFY_CLI_PARTNERS_TOKEN }}
        run: npm run deploy

Troubleshooting

Common Issues

CLI not found after install:

# Check Node.js path
which node

# Reinstall globally
npm install -g @shopify/cli

Authentication issues:

# Clear auth and re-login
shopify auth logout
shopify auth login --reset

Theme dev not syncing:

# Check .shopify-cli.yml configuration
# Ensure correct store URL
# Check file permissions

Port already in use:

# Use different port
shopify theme dev --port 9293
shopify app dev --port 3001

Quick Reference

Theme Commands

App Commands

Resources

• Shopify CLI Reference
• Theme Check Docs
• VS Code Extension
• Language Server
• Dawn Theme Reference
• GitHub Actions Integration

For theme development, see the theme-development skill. For app development, see the app-development skill.