Shopify Theme Kitとは

Shopify Theme Kitは、Shopify Theme開発に使う、ローカル環境のソースコードの変更を検知して自動でShopifyサイトに反映したり、Shopifyサイト上のソースコードをローカル環境に引っ張ってきたりするためのミドルウェアです。

初期設定

Shopify Theme Kitの設定で手間取りましたので、メモとして設定方法を残します。
環境はMacで、既存gitレポジトリにShopify Theme Kitを追加する場合の工程を説明します。

Shopify Theme Kit 公式ドキュメント

まずはShopify Theme Kitをダウンロード＆インストールします。
本記事はRuby 2.4.1を用いた結果を記載しています。

$ curl -s https://raw.githubusercontent.com/Shopify/themekit/master/scripts/install | sudo python

APIトークンを取得

まずは下記のGIFアニの工程に従いPrivate Appを作成します。

その後、作成したPrivate AppのAPI KeyやPasswordが見れるようになります。これらを設定に使います。

ローカルとShopifyとの連携

まずはTheme IDを取得

ドキュメントには

theme configure --password=[your-password] --store=[you-store.myshopify.com] --themeid=[your-theme-id]

と書いてありますが、その結果で生成されるconfig.ymlがおかしい場合は、古い方のthemeコマンド（Shopify/shopify_theme）が有効になっている状況と思われます。

$ theme watch

設定がうまくいっていれば、下記コマンドを実行中にすることで、ローカルの変更を拾い、接続しているShopifyサイトのThemeにライブ反映される状態が整いました。

$ theme watch

うまくいかない例（こちらはほとんどの場合には関係ないと思います）

sections問題

sections/ を whitelist化したのに、アップロードできない

エラーメッセージ

'sections/static-header.liquid' is not in a valid file for theme uploadsFiles need to be in one of the following subdirectories: layout/ assets/ config/ snippets/ templates/ locales/