Shopifyのテーマをローカルで編集してプレビュー/反映するためにやったこと

Shopifyのテーマをローカルで編集するためにしたことをこの記事にまとめます。

環境

• macOS Sierra

Theme Kitをインストールする

curlでダウンロードしてきてPythonで実行していますが、Pythonのバージョンは2.7系である必要があるようです。
（３系だと失敗しました。）

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

インストールされたか確認するために、バージョンを出力してみます。バージョンが出力されればインストール成功です。

$ theme version
ThemeKit 0.7.5 darwin/amd64

Private Appを作り、Apiのパスワードを取得する

まず、管理画面のAppsからManage private appsをクリックしPrivate appsへ移動します。

Create a new private appボタンを押します。

Create private appへ移動したら、Private app nameに任意の名前をつけてください。
また、Admin APIのTheme templates and theme assets をRead and Writeに変更して下さい

一番下のSaveボタンをクリックし、Appの作成を完了してください。
正常にAppが完了したら、Apiのパスワードが表示されます*。そのパスワードは後で使用します。*

Theme IDを取得する

管理画面から編集するテーマのActionからEdit codeをクリックします。
遷移先のURLの後ろの数字がTheme IDとなります。
例えばURLがhttps://myshop.myshopify.com/admin/themes/123456789であればTheme IDは123456789です。

作業ディレクトリを作成し、テーマを編集する

任意のディレクトリを作成し、そのディレクトリに移動した後、theme configureコマンドでShopifyのテーマを編集するための設定をします。
your-store.myshopify.comは自分のShopifyのStoreのURLを貼って下さい。

$ theme configure --password=[ApiのPassword] --store=[your-store.myshopify.com] --themeid=[Theme ID]

これを実行するとconfig.ymlが生成されます。
以下のコマンドでテーマをダウンロードすることができます。

$ theme download

テーマをアップロードする

編集したテーマを手動でShopifyにアップロードするには以下のコマンドを実行します。

$ theme upload

テーマをプレビューする

テーマをプレビューするには、以下のコマンドでブラウザが開きプレビューされます。

$ theme open

テーマをリアルタイムで反映させる

以下のコマンドを実行させておくことで、テーマをローカルで編集しセーブするたびにShopifyにリアルタイムで反映させることができます。
Ctrl+Cで終了できます。

$ theme watch

参考