Edited at

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

More than 1 year has passed since last update.

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


環境


  • macOS Sierra


Theme Kitをインストールする

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

(3系だと失敗しました。)

$ 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 APITheme templates and theme assetsRead 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


参考

https://www.shopify.com/partners/blog/95401862-3-simple-steps-for-setting-up-a-local-shopify-theme-development-environment