Spwig Theme Development
Build professional themes for Spwig eCommerce with IntelliSense, snippets, and integrated CLI commands.
Features
JSON Schema Validation
- Real-time validation for theme manifests
- Autocomplete for all theme configuration files
- Hover documentation for fields
Code Snippets
- 50+ snippets for common patterns
- Manifest templates
- Component settings
- Django/Jinja2 template blocks
Built-in Validation
- Standalone theme validation (no CLI required)
- Rich validation reports with errors and warnings
- VS Code diagnostics integration
CLI Integration
- Create new themes
- Add components
- Package themes for distribution
- Start dev server for live development
Theme Explorer
- Sidebar view of theme structure
- Quick access to components and pages
- One-click actions
Commands
| Command |
Shortcut |
Description |
Spwig: Create New Theme |
- |
Create a new theme project |
Spwig: Add Component |
Ctrl+Alt+C |
Add a new component |
Spwig: Validate Theme |
Ctrl+Alt+V |
Validate theme structure |
Spwig: Package Theme |
Ctrl+Alt+P |
Create distributable package |
Spwig: Start Dev Server |
Ctrl+Alt+D |
Connect to shop for live development |
Snippets
Manifests
spwig-manifest - Theme manifestspwig-component-manifest-* - Component manifests
Settings
spwig-setting-text - Text inputspwig-setting-color - Color pickerspwig-setting-select - Dropdownspwig-setting-checkbox - Toggle
Templates
spwig-product-card - Product cardspwig-hero - Hero sectionspwig-header - Site headerspwig-footer - Site footer
Design Tokens
spwig-tokens - Complete design tokensspwig-color-palette - Colorsspwig-typography - Typography
Settings
| Setting |
Default |
Description |
spwig.autoValidate |
true |
Validate on save |
spwig.devServer.shopUrl |
http://localhost:8000 |
Shop URL for dev server |
spwig.devServer.autoOpen |
true |
Open browser on dev start |
spwig.cli.path |
spwig |
Path to CLI |
Requirements
Installation
Extension Only (Validation & Development)
- Install from VS Code Marketplace: search "Spwig Theme Development"
- Create theme:
Ctrl+Shift+P → "Spwig: Create New Theme"
With CLI (Packaging & Dev Server)
The CLI requires Node.js 20+. If you need to install or upgrade Node.js:
# Install nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc # or ~/.zshrc
# Install and use Node.js 20
nvm install 20
nvm use 20
Then install the CLI:
npm install -g @spwig/theme-cli
Note: Theme validation works out of the box without the CLI. The CLI is only required for packaging themes and running the dev server.
Links
License
Apache-2.0
| |
