あらすじ
下記を参照して行う。
Shopify CLI
前提環境
- WSL (Ubuntu)
- Windows 11
- VScode (cursor)
- Homebrew
あとは適当でお願いします。
インストール
いつものをしておきましょう。
インストールしたら version
を叩いて動作確認。
テーマをいじる
基本的に下記を見れば解決すると思います。
Shopify-cli theme
- インポート
- いじる
- ショップに反映(push)
- ショップでいじったものを逆に反映(pull)
テーマのインポート
で行けるんですが、 --store=
オプションを付けないと怒られるので設定しましょう。
また、環境変数で SHOPIFY_FLAG_STORE
を指定することで回避することができます。
環境変数に固定する場合、開発時に切り替えるのがめんどくさくなるかもなので個人的には非推奨です。
コマンドを実行すると、ログインを求められるのでログインします。
そうしたらテーマを選択します。
なんか言われますが無視して続行します。
続行するとテーマがpullされます。
テーマをいじる
単純にいじってpushして確認、もいいんですが、
ローカルでストアをカスタマイズしてテストする方法があるのでこれで弄りましょう。
を実行します。
パスワードでストアを保護している場合、ストアにかけているパスワードを求められるのでこれを入力します。
そうしたらローカルで開発する環境ができるので表示に従います。
毎回 shopify theme dev
をタイプするのが大変だと思うので、vscodeでlaunch.jsonを書いておくと便利だと思います。
今回brewで入れましたが、 which shopify
で場所を確認してjsonを記述しておきます。
これでF5を押せばデバッグできるようになりました。
好きなようにテーマをいじってください。
push
テーマをいじったら、shopify側にテーマを反映させます。
pullの反対はpushなのでpushします。
個人的な使い方
devで自動生成されるテーマだけで開発するのもいいんですが、
僕のやり方が悪いのか反映されないことが多々あり何度かやり直しを喰らいました。
ので、開発用のテーマを明示的に作っておいて
それをpushしたりpullしたりするのが確実かなと思います。