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

Feature	Description
Syntax Highlighting	Liquid, HTML, CSS, JS highlighting
Code Completion	Objects, filters, tags, schema
Documentation on Hover	Inline docs for Liquid code
Theme Check Integration	Real-time linting
Schema Completion	JSON schema in sections
Go to Definition	Navigate to snippets/sections
Auto-closing Pairs	Liquid tags and braces
Code Formatting	Format Liquid code

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

Error	Solution
MissingTemplate	Create missing template file
DeprecatedFilter	Update to new filter syntax
UnusedAssign	Remove or use the variable
SyntaxError	Fix Liquid syntax
AssetSizeCSS	Reduce CSS file size
ImgWidthAndHeight	Add width/height to images

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

Command	Description
theme init	Initialize theme
theme dev	Start dev server
theme push	Upload to store
theme pull	Download from store
theme check	Run linter
theme list	List themes
theme publish	Publish theme

App Commands

Command	Description
app init	Create app
app dev	Start dev server
app deploy	Deploy app
app generate extension	Add extension
app info	Show app info
app function run	Test function

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.