Shopifyテーマ開発環境構築メモ（Shopify CLI）

こっちが主流っぽい？みたい。

どういうアレか

shopify自体の説明は割愛して、独自テーマ（デザイン）をやりたい場合、開発環境の用意が必要で非常に面倒くさい。用意しなくても作れる上、zipでアップもできるんだけど、ツールを使わずに作ると更に訳が分からないことになる。

要するにはgitやらnode的なアレがテーマのフォーマットになってるんでそれを使ってどうのこうのすることになる。流れ的には必要なものをインストールしてストアと連携させましょうという感じになる。

で、Theme Kitというものがあるのだけど、今はShopify CLIに移行してるっぽい。ざっくり言って環境が2つある。Theme Kitは前の記事で書いたのでShopifyCLIの話。

現在のバージョンはShopify CLI3。

とりあえず開発するなら無料でやれたほうが良いんで、パートナーアカウントを作ってストアを用意する。アカウント作成～ストア開設までは前の記事の初めの方で書いた。

といっても大したことは書いてなかったんで以下のページの右上からアカウントを作って案内に沿って進めていく感じ。

Shopify CLIはTheme Kitと違って、まず以下のものをインストールする必要がある。

インストールファイルの案内、インストールの確認方法等は以下のページが参考になる。というか、諸々はこれで完了した。

作業自体に付け加えることはない。

一応、普段こういう作業をしない人はPowerShellの権限をいじってない場合があって、設定してなければセキュリティの云々でコマンドを弾かれる。

このあたりも前項の記事でカバーされてるんだけど。

とりあえずTheme Kitと違ってパスワードを入れ込んだログインは必要ない。ストアドメインを入れ込んだコマンドを叩いたときにWEBブラウザでログインしろって内容が出て、アクセスしたら連携される。一回やっとけば済むのだけど、ログアウト状態だと都度連携のためにログインを求められる。

Shopify CLIにはローカルでサーバーを立ててやっていく機能がある。

テーマフォルダを開いた状態で以下の内容を叩く。フォルダを間違えるとめんどいことになる。

shopify theme dev --store 【ドメイン】.myshopify.com

叩くとサーバーが立ち上がる。ちょっと待つことになるので慌てない。終了したい場合は「Ctrl + C」。「serve」でもいけるんだけどよくわかんない。

追記：「serve」は古いアレなんで、入力すると「dev」に置換して処理されるっぽい。

確認用のURLはIP（http://127.0.0.1:9292）で案内される。編集するたびに自動更新が掛かってすぐに反映してくれる。嬉しいけど処理が重くなるようなら切ったほうが良いかも。

新規でアップ（push）する場合はこう。

shopify theme push --unpublished

すでにアップしてあるものを更新（上書き）する場合はこう。

shopify theme push

設定項目多すぎてざっくりで済ませるほうが火傷しないで良さそうなのでここらへんで。