【Shopify】ThemeKitの導入方法

公式ページが英語だったので日本語に変換したものです。
毎回忘れてしまう自分のための記事。わかりやすいように加筆している箇所もあります。

Getting started with Theme Kit

ThemeKitをインストールする

Mac OS
【前提】
Homebrewを使用します。
インストールしていない場合は下記をターミナルで実行。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Homebrewがインストールできたら下記をターミナルで実行。

brew tap shopify/shopify
brew install themekit

Linux

curl -s https://shopify.dev/themekit.py | sudo python

Windows
Chocolateyを使用。

choco install themekit

プライベートアプリを作成する

1. Shopify管理者から、[アプリ管理]をクリックします。
2. ページの下部にある[プライベートアプリを管理する]をクリックします。
3. プライベートアプリ開発が無効になっている場合は、[プライベートアプリ開発を有効にする]をクリックします。
※できるのはストアの所有者だけです。
4. [新しいプライベートアプリを作成する]をクリックします。
5. [アプリの詳細]で、アプリ名（ThemeKitなど）とメールアドレスを入力します。
6. [非アクティブなAdmin API権限を表示する]をクリックします。
7. [テーマ]までスクロールし、ドロップダウンから[読み取りおよび書き込み]を選択します。
8. [保存]をクリックします。
9. プライベートアプリの確認ダイアログを読み、[アプリの作成]をクリックします。

テーマIDを確認する

【前提】
テーマIDを使用するので連携するテーマを使用できる状態にしておいてください。（有料テーマであれば購入する。）

ターミナルを使用する場合
作成したプライベートアプリの[Admin API]にあるパスワードを使用します。
このtheme getコマンドは、ストアに存在するテーマとIDのリストを返します。

theme get --list --password=APIパスワード --store=ストアドメイン.myshopify.com

アナログに確認する場合
1. Shopify管理者から、[オンラインストア｜テーマ]をクリックします。
2. 連携したいテーマの[カスタマイズ]をクリックします。
3. アドレスバーを確認（数字の部分）

ストアドメイン.myshopify.com/admin/themes/123456789012/editor

設定ファイルを作成する

【前提】
ターミナルで作業します。

1. テーマのディレクトリを作成します。
このとき、必要であれば階層も指定してあげましょう。

mkdir [your-theme-name]

例）Desktopに置きたいなら
mkdir Desktop/[your-theme-name]

2. 作成した新しいディレクトリに移動します。

cd [your-theme-name]

例）Desktopに作成していたら
cd Desktop/[your-theme-name]

3. テーマをダウンロードし、ローカルで接続するための設定ファイルconfig.ymlを作成するには、次のコマンドを実行します。

theme get -p=[APIパスワード] -s=[ストアドメイン.myshopify.com] -t=[テーマID]

テーマをローカル環境からライブ編集する

ローカルでの変更保存を継続的に検知して、自動でサーバーへアップしてくれるようになります。
作業開始時に実行するようにしましょう。

注意点
公開中のテーマにはこのコマンドは実行できません。
ライブ編集をするテーマのディレクトリに移動してから（cdコマンド）実行してください。

theme watch

テーマのライブ編集を解除する

作業終了時やライブ反映したくない場合に実行するようにしましょう。

Control + C