はじめに

Shopifyのテーマ開発には、従来の「Theme Kit」が廃止され、現在は「Shopify CLI」の使用が推奨されています。本記事では、VS Codeを使ってShopifyテーマを開発する方法 をわかりやすく解説します。

1. 必要なツールを準備

brew install shopify-cli

npm install -g @shopify/cli

Shopify CLI を使用する前に、Shopifyアカウントにログインします。

shopify login

ブラウザが開くので、Shopifyのアカウント情報でログインしてください。

開発するテーマをローカルに取得するために、以下のコマンドを実行します。

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

※ your-store.myshopify.com の部分は、ご自身のストアのURLに置き換えてください。

ダウンロードが完了すると、テーマのファイルがローカルに保存されます。

VS Code を開き、ダウンロードしたテーマのフォルダを開きます。

ローカルで編集しながら、リアルタイムプレビューを確認するには以下のコマンドを実行します。

shopify theme dev --store your-store.myshopify.com

A store is required

このエラーが出た場合は、ストアの指定が不足しているため、以下のように明示的に指定してください。

shopify theme dev --store your-store.myshopify.com

ローカルで編集が完了したら、Shopifyにアップロードして反映させます。

shopify theme push

VS Code で Shopify テーマ開発をスムーズにするために、以下の拡張機能をインストールすると便利です。

ShopifyのLiquidテンプレートをプレビューしやすくする拡張機能。
→ インストール

Liquidコードのスニペットを提供してくれる。
→ インストール

これで、VS Code を使った Shopify のテーマ開発が快適に行えます！

ぜひ試してみてください！