Master Shopify CLI and developer tools. Use this skill for using Shopify CLI commands, theme development workflow, app development workflow, debugging with Theme Check, using the Liquid language server, and configuring development environments. Covers VS Code extension and development best practices.
Use this skill when:
# 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
# Log in to your Partner account
shopify auth login
# Log out
shopify auth logout
# Check current auth status
shopify auth info
# Clone Skeleton theme as starting point
shopify theme init my-theme
# Clone from custom repository
shopify theme init my-theme --clone-url [email protected]:org/repo.git
# 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 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
# 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
# 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
# Show theme environment info
shopify theme info
# Start Liquid REPL console
shopify theme console
# Pull metafields for local development
shopify theme metafields pull
# Initialize new app
shopify app init
# Choose template interactively:
# - Remix (recommended)
# - Node
# - Ruby
# - PHP
# 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 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
# Deploy app and extensions
shopify app deploy
# List app versions
shopify app versions list
# Release specific version
shopify app release --version VERSION_ID
# Show app info
shopify app info
# Show environment variables
shopify app env show
# Pull environment variables
shopify app env pull
# Run function locally
shopify app function run --path extensions/my-function
# Generate types for function
shopify app function typegen --path extensions/my-function
Or install from CLI:
code --install-extension Shopify.theme-check-vscode
| 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 |
// .vscode/settings.json
{
"shopifyLiquid.formatterDevPreview": true,
"shopifyLiquid.themeCheckNextDevPreview": true,
"editor.formatOnSave": true,
"[liquid]": {
"editor.defaultFormatter": "Shopify.theme-check-vscode"
},
"files.associations": {
"*.liquid": "liquid"
}
}
# Extends default configuration