はじめに
Shopifyのテーマ開発には、従来の「Theme Kit」が廃止され、現在は「Shopify CLI」の使用が推奨されています。本記事では、VS Codeを使ってShopifyテーマを開発する方法 をわかりやすく解説します。
1. 必要なツールを準備
Shopify CLI のインストール
Mac (Homebrew経由)
brew install shopify-cli
npm 経由 (Windows, Mac, Linux)
npm install -g @shopify/cli
VS Code のインストール
- すでにインストール済みの場合はスキップしてください。
- まだの場合は、公式サイトからダウンロードしてインストールします。
2. Shopify ストアにログイン
Shopify CLI を使用する前に、Shopifyアカウントにログインします。
shopify login
ブラウザが開くので、Shopifyのアカウント情報でログインしてください。
3. テーマのセットアップ
既存のテーマをローカルにダウンロード
開発するテーマをローカルに取得するために、以下のコマンドを実行します。
shopify theme pull --store your-store.myshopify.com
※ your-store.myshopify.com の部分は、ご自身のストアのURLに置き換えてください。
ダウンロードが完了すると、テーマのファイルがローカルに保存されます。
4. VS Code でテーマを編集する
VS Code を開き、ダウンロードしたテーマのフォルダを開きます。
リアルタイムプレビューを開始
ローカルで編集しながら、リアルタイムプレビューを確認するには以下のコマンドを実行します。
shopify theme dev --store your-store.myshopify.com
エラーが発生した場合
A store is required
このエラーが出た場合は、ストアの指定が不足しているため、以下のように明示的に指定してください。
shopify theme dev --store your-store.myshopify.com
5. 変更をShopifyに反映する
ローカルで編集が完了したら、Shopifyにアップロードして反映させます。
shopify theme push
6. おすすめの VS Code 拡張機能
VS Code で Shopify テーマ開発をスムーズにするために、以下の拡張機能をインストールすると便利です。
① Shopify Liquid Preview
ShopifyのLiquidテンプレートをプレビューしやすくする拡張機能。
→ インストール
② Shopify Liquid Snippets
Liquidコードのスニペットを提供してくれる。
→ インストール
まとめ
- Shopify CLI をインストール
-
shopify loginでShopifyにログイン -
shopify theme pullでテーマを取得 -
shopify theme devでローカル開発開始 -
shopify theme pushで変更を反映 - VS Code の拡張機能を活用
これで、VS Code を使った Shopify のテーマ開発が快適に行えます！
ぜひ試してみてください！