sotono.dev

【Shopify CLI】VScodeからShopify開発できるようにする

作成日: , 更新日: 2025年1月14日

あらすじ

下記を参照して行う。

Shopify CLI

前提環境

  • WSL (Ubuntu)
  • Windows 11
  • VScode (cursor)
  • Homebrew

あとは適当でお願いします。

インストール

いつものをしておきましょう。

sudo apt update
sudo apt upgrade
brew tap shopify/shopify
brew install shopify-cli

インストールしたら version を叩いて動作確認。

shopify version

テーマをいじる

基本的に下記を見れば解決すると思います。

Shopify-cli theme

  • インポート
  • いじる
  • ショップに反映(push)
  • ショップでいじったものを逆に反映(pull)

テーマのインポート

shopify theme pull

で行けるんですが、 --store= オプションを付けないと怒られるので設定しましょう。 また、環境変数で SHOPIFY_FLAG_STORE を指定することで回避することができます。 環境変数に固定する場合、開発時に切り替えるのがめんどくさくなるかもなので個人的には非推奨です。

╭─ error ──────────────────────────────────────────────────────────────────────╮
│                                                                              │
│  A store is required                                                         │
│                                                                              │
│  Specify the store passing `--store={your_store_url}` or set the             │
│  `SHOPIFY_FLAG_STORE` environment variable.                                  │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯

コマンドを実行すると、ログインを求められるのでログインします。 そうしたらテーマを選択します。

╭─ warning ────────────────────────────────────────────────────────────────────╮
│                                                                              │
│  It doesn't seem like you're running this command in a theme directory.      │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯

なんか言われますが無視して続行します。

続行するとテーマがpullされます。

テーマをいじる

単純にいじってpushして確認、もいいんですが、 ローカルでストアをカスタマイズしてテストする方法があるのでこれで弄りましょう。

shopify theme dev

を実行します。

パスワードでストアを保護している場合、ストアにかけているパスワードを求められるのでこれを入力します。

そうしたらローカルで開発する環境ができるので表示に従います。

╭─ success ────────────────────────────────────────────────────────────────────╮
│                                                                              │
│  Preview your theme                                                          │
│    • http://127.0.0.1:9292 [1]                                               │
│                                                                              │
│  Next steps                                                                  │
│    • Preview your gift cards [2]                                             │
│    • Customize your theme at the theme editor [3]                            │
│    • Share your theme preview [4]                                            │

毎回 shopify theme devをタイプするのが大変だと思うので、vscodeでlaunch.jsonを書いておくと便利だと思います。

今回brewで入れましたが、 which shopify で場所を確認してjsonを記述しておきます。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Shopify Theme Dev",
      "type": "node",
      "request": "launch",
      "program": "{which shopifyで出たパス}",
      "args": [
        "theme",
        "dev"
      ],
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

これでF5を押せばデバッグできるようになりました。 好きなようにテーマをいじってください。

push

テーマをいじったら、shopify側にテーマを反映させます。 pullの反対はpushなのでpushします。

shopify theme push

個人的な使い方

devで自動生成されるテーマだけで開発するのもいいんですが、 僕のやり方が悪いのか反映されないことが多々あり何度かやり直しを喰らいました。

ので、開発用のテーマを明示的に作っておいて それをpushしたりpullしたりするのが確実かなと思います。