Shopify CLI を使って VS Code でテーマ開発する方法

Last updated at 2025-10-19Posted at 2025-03-01

はじめに

Shopifyのテーマ開発は、旧「Theme Kit」から「Shopify CLI」に完全移行されました。
この記事では、最新のCLI環境（npm版）を使用して、Shopifyストアのテーマをローカルで開発・プレビュー・反映するまでの手順を解説します。

Shopify CLIは現在npm経由で提供されています。
Homebrew版は廃止されています。

npm install -g @shopify/cli @shopify/theme

Node.jsのバージョンが古い場合は、以下で更新します。

node -v
nvm install --lts
nvm use --lts

CLIからShopifyにログインします。

shopify auth login

ブラウザが開いたら、対象ストア（例：your-store.myshopify.com）にアクセスできるアカウントでログインします。
ログインが成功すると、ターミナルに次のような表示が出ます。

✔ Logged in.
✔ Current account: yourname@example.com

プロジェクト直下に、ストア情報を紐づける設定ファイルを作成します。

printf "shop: your-store.myshopify.com\n" > .shopify-cli.yml

これにより、以降のコマンドで毎回 --store を指定する必要がなくなります。

既存のテーマをローカルにダウンロードします。

shopify theme pull -s your-store.myshopify.com

ダウンロードが完了すると、/templates や /sections など、Shopifyテーマの基本構造がローカルに展開されます。

テーマを編集しながらリアルタイムでプレビューします。

shopify theme dev

出力例:

Preview your theme:
→ http://127.0.0.1:9292

Shareable preview:
→ https://your-store.myshopify.com/?preview_theme_id=XXXXXX

この状態でVS Codeなどでテーマを編集すると、変更が自動的にShopifyのプレビュー環境に反映されます。

ローカルで編集した内容をShopify本番環境に反映します。

shopify theme push

CLIが変更内容を確認し、アップロード前に差分を表示します。

エラー内容	原因	対処法
A store is required	ストア未指定	`.shopify-cli.yml` に `shop:` を設定
401: Service is not valid for authentication	認証セッション切れ	`shopify auth logout --all` → `shopify auth login`
You are not authorized to use the CLI	権限不足	管理画面で「テーマ編集」権限を付与

拡張機能名	説明	インストール
Shopify Liquid Preview	Liquidテンプレートをプレビュー表示	https://marketplace.visualstudio.com/items?itemName=Shopify.theme-check-vscode
Shopify Liquid Snippets	Liquid構文のスニペット補完	https://marketplace.visualstudio.com/items?itemName=killalau.vscode-liquid-snippets

目的	コマンド
ログイン	`shopify auth login`
ストア設定	`printf "shop: your-store.myshopify.com" > .shopify-cli.yml`
テーマ取得	`shopify theme pull`
ローカル開発	`shopify theme dev`
本番反映	`shopify theme push`
ログアウト	`shopify auth logout --all`