sunztech-theme

CLI tool for SunzTech theme development. Edit Liquid templates locally, see changes instantly on your store.

Installation

npm install -g sunztech-theme

Requires Node.js 18 or higher.

Quick Start

# 1. Scaffold a new theme
sunztech-theme init my-theme

# 2. Connect to your store
cd my-theme
sunztech-theme auth

# 3. Start developing
sunztech-theme dev

Commands

sunztech-theme init [name]

Creates a new theme directory with all required files:

• layout/theme.liquid — Main layout wrapper
• templates/*.liquid — All 15 page templates (index, product, collection, cart, checkout, etc.)
• assets/style.css — Starter stylesheet
• assets/app.js — Starter JavaScript
• config/settings_schema.json — Theme settings schema
• snippets/ — Directory for reusable Liquid partials
• sunztech.config.json — CLI configuration (placeholder values)

sunztech-theme auth

Interactive setup that connects your local theme to a store:

1. Asks for your store URL (e.g. https://ahmad.com)
2. Asks for your developer token
3. Verifies the connection
4. Lets you pick an existing theme or create a new one
5. Writes sunztech.config.json with the correct values

sunztech-theme dev

Starts development mode:

1. Reads sunztech.config.json from the current directory
2. Verifies the server connection and theme
3. Pushes all local files to the server (full sync)
4. Watches for file changes and pushes them instantly
5. Prints a preview URL to open in your browser

$ sunztech-theme dev
Connecting to server...
Connected. Theme: "my-theme" (019abc...)

Syncing all files...
  [synced] layout/theme.liquid
  [synced] templates/index.liquid
  ...

Sync complete: 19 files pushed, 0 failed

Watching for changes... (press Ctrl+C to stop)
Preview: https://ahmad.com/storefront/?_themeId=019abc...

[pushed] templates/index.liquid
[pushed] assets/style.css

Configuration

sunztech.config.json is created by sunztech-theme auth or manually:

{
  "server": "https://ahmad.com",
  "token": "your-developer-token",
  "themeId": "your-theme-id"
}

| Field | Description | |-------|-------------| | server | Your store's URL | | token | Developer token (created in the admin panel) | | themeId | ID of the theme to sync files to |

Theme Structure

my-theme/
├── layout/
│   └── theme.liquid
├── templates/
│   ├── index.liquid
│   ├── product.liquid
│   ├── collection.liquid
│   ├── page.liquid
│   ├── cart.liquid
│   ├── checkout.liquid
│   ├── thank-you.liquid
│   ├── 404.liquid
│   └── account/
│       ├── login.liquid
│       ├── register.liquid
│       ├── dashboard.liquid
│       ├── orders.liquid
│       ├── order-detail.liquid
│       └── profile.liquid
├── snippets/
├── assets/
│   ├── style.css
│   └── app.js
├── config/
│   └── settings_schema.json
└── sunztech.config.json

Developer Token

A developer token is required to authenticate CLI requests. Create one from the admin panel:

POST /shops/:shopId/developer-tokens

The token is sent as the X-Developer-Token header on every request.

Workflow

1. Admin creates a developer token in the store dashboard
2. Developer runs sunztech-theme init my-theme to scaffold files
3. Developer runs cd my-theme && sunztech-theme auth to connect
4. Developer runs sunztech-theme dev to start watching
5. Edit any .liquid, .css, or .js file — changes push automatically
6. Refresh the browser to see updates
7. When done, zip the theme and upload as a production theme

License

MIT