Shopifyのテーマは管理画面でも編集できますが、使い慣れたVSCodeで作業できたほうがいいですよね。
Shopifyが提供しているTheme Kitというコマンドラインツールを使用することで、既存テーマのカスタマイズをVSCodeで行えるようになります。
今回はそのTheme Kitの導入方法を解説します。
(注:Macを使用している方向けです)
Homebrewをインストールする
Theme KitをインストールするにはHomebrewというツールを使用します。
まだHomebrewをインストールしてないよという方は下記の記事がとても参考になりますので、さっそくインストールしましょう。
Theme Kitをインストールする
Theme Kitをインストールするには、ターミナルで以下の2つのコマンドを順番に実行します。
brew tap shopify/shopify
brew install themekit
既存テーマの情報を取得する
ローカル環境で既存テーマをカスタマイズするには「APIパスワード」、「ストア名」、「テーマID」が必要になります。それぞれの取得方法は以下の通りです。
(今回はあくまで既存テーマをカスタマイズする場合なので、ストアをまだ作成してないかたは先に作成をお願いします。)
APIパスワード
管理画面の「アプリ管理」から「プライベートアプリを管理する」をクリックします。

アプリを作成したことがなければ「新しいプライベートアプリを作成する」をクリックします。
プライベートアプリ名」と「緊急連絡用開発者メール」を何でもいいので入力します。
Admin API欄の「非アクティブなAdmin API権限を表示する」をクリックすると項目がずらっと表示されます。

「テーマ」のところがアクセスなしになっていると思うので、読み取りおよび書き込みに変更します。

「保存する」をクリックします。
アプリが作成されてAdmin API欄にパスワードが入力されてますよね。コピーしてメモアプリ等に保存しておいてください。後ほど使います。
ストア名
管理画面URLが「〇〇.myshopify.com」になっていると思うので、これがそのままストア名になります。
テーマID
テーマIDも管理画面から確認できます。
「オンラインストア」→「テーマ」と選択し、「カスタマイズ」をクリックします。

URLが「〇〇.myshopify.com/admin/themes/106703650974/editor」みたいになってると思います。themesとeditorの間の数字がテーマIDです。
テーマファイルをダウンロードする
必要情報が揃ったらファイルをダウンロードします。
あらかじめフォルダを作成しておいて、cdコマンドで移動しておくと楽ですよ。
準備ができたらターミナルに以下のコマンドを実行します。
theme get -p=[your-password] -s=[you-store.myshopify.com] -t=[your-theme-id]
先ほど調べた必要情報をそれぞれ入力します。
- [your-password] にAPIパスワード
- [you-store.myshopify.com]にストア名
- [your-theme-id]にテーマID
例:theme get -p=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 -s=sample.myshopify.com] -t=06703650921
コンフィグファイルがダウンロードできました。
続いてテーマ全体のダウンロードです。以下のコマンドを実行します。
theme download
編集を反映させる
ローカル環境で作業した内容をストアに反映させるには、ターミナルで以下のコマンドを実行します。
theme watch
以上で完了です。お疲れ様でした!