【簡単】ShopifyのテーマをVSCodeで編集する方法

Shopifyのテーマは管理画面でも編集できますが、使い慣れたVSCodeで作業できたほうがいいですよね。

Shopifyが提供しているTheme Kitというコマンドラインツールを使用することで、既存テーマのカスタマイズをVSCodeで行えるようになります。

今回はそのTheme Kitの導入方法を解説します。
（注：Macを使用している方向けです）

Homebrewをインストールする

Theme KitをインストールするにはHomebrewというツールを使用します。

まだHomebrewをインストールしてないよという方は下記の記事がとても参考になりますので、さっそくインストールしましょう。

Theme Kitをインストールする

Theme Kitをインストールするには、ターミナルで以下の2つのコマンドを順番に実行します。

既存テーマの情報を取得する

ローカル環境で既存テーマをカスタマイズするには「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コマンドで移動しておくと楽ですよ。

準備ができたらターミナルに以下のコマンドを実行します。

コンフィグファイルがダウンロードできました。

続いてテーマ全体のダウンロードです。以下のコマンドを実行します。

編集を反映させる

ローカル環境で作業した内容をストアに反映させるには、ターミナルで以下のコマンドを実行します。

以上で完了です。お疲れ様でした！