Theme Kitとは？
Shopifyが提供している、開発者用のコマンドラインツールです。
https://shopify.github.io/themekit/
Theme Kitをダウンロード
「Installation」のセクションから、お使いの環境に合ったTheme Kitをダウンロードします。
コマンドラインに慣れている素敵な貴方はコマンドラインから。
お願いだからexeファイルください…とヨボヨボな貴方と私は「Manual Installation」しましょうね。
Theme Kitのインスコ
管理人はWindowsユーザーなので、Windowsの解説しますよー。
- program filesフォルダの中に「Theme Kit」フォルダ作ります。名前はなんでも大丈夫だよ。
- さっきダウンロードしたtheme.exeを作ったフォルダにぶち込みます。
- パスを通します。環境変数ってやつだね。英語だけどここがスクショ付きで説明しているのでわかりやすいです。
pathのところに「C:\Program Files\Theme Kit」が追加されれば大丈夫！ - Powershell（かコマンドプロンプト）を立ち上げて、下記コマンドを打ってみましょう。
theme
theme kitの説明がずら～と表示されればインスコ成功です！
macやlinuxの方は下記を参照にがんばって。
Linux & macOS
Download the themekit binary that works for your system.
Compare checksums of the binary by running md5 theme
Put the binary on your path. We recommend somewhere like /usr/local/bin
Ensure that it works as expected by running theme version
APIアクセス権をもらうよ
Shopifyの管理画面から、APIでアクセスするための設定をします。
Theme Kitのページに、すんごいわかりやすいgifがあるので参考にしてね。
- 管理画面から「Apps ＞ Manage private apps」
- 「Create a new private app」をクリック、下の方に小さくあるよ。
- Private App Name（なんでもいいです。Theme Kit Accessとかでいんじゃない。）と自分のメアドを入力。
- 「Theme templates and theme assets」の権限を「Read and write」に設定
- 「Save」を押下。
Shopifyとローカルをつなげちゃうよ
- Shopifyのテーマを保存したい場所にフォルダを作ります。
- そのフォルダでPowershellを立ち上げます。フォルダ上で「shift+右クリック＞この場所でpowershellを開く」で開けるよ。
- つなげてみましょう。下記コマンドを打つよ！
theme configure --password=[APIのパスワード] --store=[shopifyストアのURL（hoge.myshopify.com）] --themeid=[テーマのID（※）]
※ テーマのIDは管理画面でテーマのカスタマイズ開いたときのURLでわかります。数字が並んでいる箇所がテーマIDだよ。 - config.ymlファイルができているはずです。
Shopifyからテーマをダウンロードしてみよう
- 下記コマンドを打つよ。
theme download - テーマのダウンロードが始まります。
- パーセンテージが100%になったらフォルダを確認してみよう。Shopifyからテーマファイルがダウンロードされているはず。
Shopifyと同期してみよう
この機能がマジ神です。
ローカルでファイルを変更すると、Shopifyにダイレクトに反映されます。
- 下記コマンドを打つよ。
theme watch - ローカルでなにかファイルを変更してみましょう。
- ファイルを保存すると、自動でファイルがアップロードされます。Powershellにもログが出ているよ。
- Shopify上で表示を確認してみましょう。変更されたかな？
- 同期の終了は「ctrl+c」です。
神動画
イケメンがShopify Theme Kitの使い方を手取り足取り教えてくれます。
この人若いっぽいのに有能…すごい…！！