MACに元々入っているターミナルを使用します。
こんなアイコンのやつです！
初めてshopを接続する時
ストアにログインする
$ shopify login --store xxxxx.myshopify.com
パートナーアカウントが複数存在する場合は、以下も表示されますので上下キーで選択してEnterキーで決定します。
`$ shopify login --store xxxxx.myshopify.com ? Select partner organization (Choose with ↑ ↓ ⏎, filter with 'f')
> 1. test1 (1111111)
2. test2 (1234567)`
既存のテーマを使用する場合
新しいテーマを作成するのではなく、開発ストアにある既存のテーマを編集したい場合は、ファイルを同期（格納）したいフォルダを作成し、そのフォルダに移動します。
例えば
/Users/username/Shopify/Dawn
にファイルを置きたい場合、上記フォルダを作成（中身は空）し、そのフォルダに移動してから、以下のコマンドを実行します。
$ shopify theme pull
複数のテーマが存在する場合は、以下のように表示されるため、上下キーで選択してEnterを押します。
? Select a theme to pull from (Choose with ↑ ↓ ⏎, filter with 'f')
> 1. Dawn/master [live]
2. Dawn [unpublished]
これでテーマがpullされますので100％になるまでしばらく待ちます。
テーマをプレビューする
テーマを作成または既存のテーマを同期した後は、編集したテーマをプレビューするために、そのフォルダがカレントディレクトリの状態で、以下のコマンドを実行します。
$ shopify theme serve
しばらく待って100％になると、以下の表示になります。
┏━━ Viewing theme… ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃ * Syncing theme #111111111111 on xxxxx.myshopify.com
┃ 100%
┃
┃ Serving .
┃
┃ Please open this URL in your browser:
┃ <http://127.0.0.1:9292>
┃
┃ Customize this theme in the Online Store Editor:
┃ <https://xxxxx.myshopify.com/admin/themes/111111111111/editor>
┃
┃ Share this theme preview:
┃ <https://xxxxx.myshopify.com/?preview_theme_id=111111111111>
┃
┃ (Use Ctrl-C to stop)
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (56.64s) ━━
これでローカルで編集し保存したものが上記の通り http://127.0.0.1:9292 にてホットリロードされます。このプレビューはGoogleChromeでのみ利用できます。
「Share this theme preview:」の下に記載されているURLは、プレビューを共有するときに利用します。こちらはホットリロードされません。
テーマのプレビューを終了する
プレビューを終了する場合は、Ctrl+Cを押して終了します。
テーマをプッシュする
テーマをプッシュするためには、以下のコマンドを実行します。
新しい未公開のテーマをpushする場合は以下。
$ shopify theme push --unpublished
すでにアップロードしているテーマを更新する場合は以下。
$ shopify theme push
実行すると、どのテーマにpushするのかを聞かれるため、上書きするテーマを上下キーで選択してEnterを押します。
Select theme to push to (Choose with ↑ ↓ ⏎, filter with 'f')
> 1. Dawn/master [live]
2. Dawn [unpublished]
もし公開中のliveテーマを選択した場合は以下が表示されるため、確認して問題なければYesを選択します。（公開中のテーマが即時変更されます）
? Select theme to push to (You chose: Dawn/master [live])
? Are you sure you want to push to your live theme? (Choose with ↑ ↓ ⏎)
> 1. yes
2. no
これでテーマがpushされますので100％になるまでしばらく待ちます。
pushしたテーマが公開中でない場合は、この時点ではまだそのテーマは公開されていません。
テーマを公開する
非公開のテーマを公開するためには、以下のコマンドを実行します。
$ shopify theme publish
実行すると、以下のようにまだ非公開のテーマのみが表示されるため、公開するテーマを上下キーで選択してEnterを押します。
? Select theme to push to (Choose with ↑ ↓ ⏎, filter with 'f')
> 1. Dawn [unpublished]
次に以下のように、本当に公開するかを聞かれるため、yesを選択すれば公開されます。
? Select theme to push to (You chose: Dawn/master [unpublished])
? Are you sure you want to make Dawn/master the new live theme on xxxxx.myshopify.com? (Choose with ↑ ↓ ⏎)
1. no
> 2. yes
この作業は、管理画面の「オンラインストア」で行うものと全く同じです。
ショップからログアウトする
最後に作業が完了したら、ショップからログアウトを忘れずに。
$ shopify logout
Shopify CLIで利用できるテーマコマンド一覧
サンプルデータを追加する
開発ストアにサンプルデータを追加する場合は、以下のコマンドを実行します。
$ shopify populate customers
上記は顧客データですが、顧客の他にも商品・下書き注文が追加できます。
$ shopify populate products
$ shopify populate draftorders
実行すると確認が表示されるため、yesを選択します。
$ shopify populate customers
? You are currently logged into shopshopshoptokyo.myshopify.com. Do you want to proceed using this store? (Choose with ↑ ↓ ⏎)
1. no
> 2. yes
以下のように–count=をつければ数の指定も可能です。
shopify populate products --count=2
これで管理画面にサンプルデータが追加されました。
※ただしどれも最低限すぎるデータしか入らないため、あまり使えないかも・・・
テーマのエラーチェックをする
テーマのコードをチェックするためには、以下のコマンドを実行します。
$ shopify theme check
テーマのチェックは、特定のエラーまたはベストプラクティスに従わないコード内の場所をチェックします。
テーマチェックが実行するチェックの詳細はこちらに記載されています。
別の開発ストアに切り替える
現在ログインしているストアとは別のストアに切り替えたい場合は、ログアウト→ログインをしなくても、以下よりスイッチできます。
$ shopify switch
次にログインしているアカウントに紐づくストアが表示されるため、選択します。
$ shopify switch
? Select a development store (Choose with ↑ ↓ ⏎, filter with 'f')
> 1. xxxxx.myshopify.com
2. yyyyy.myshopify.com
3. zzzzz.myshopify.com
現在ログインしているストアとユーザーを確認する
現在ログインしているパートナーアカウントと、開発ストアを確認するためには、以下のコマンドを実行します。
$ shopify whoami
すると以下のように表示されます。
$ shopify whoami
Logged into store xxxxx.myshopify.com in partner organization Taro Yamada
Shopify CLIのバージョンを確認する
バージョンを確認する場合は以下のコマンドを実行します。
$ shopify version
コマンド一覧を参照する
他にもあるため、helpコマンドで調べてみてください。
$ shopify help
Shopify CLIをアップデートする方法
Shopify CLIにアップデートがある場合は、以下のように表示されるため、
$ shopify login --store xxxxx.myshopify.com
⭑ A new version of Shopify CLI is available! You have version 2.0.1 and the latest version is 2.0.2.
To upgrade, follow the instructions for the package manager you’re using:
<https://shopify.dev/tools/cli/troubleshooting#upgrade-shopify-cli>
上記のURLの通りに実行します。
Homebrew(MacOS)の場合は以下です。
$ brew update
$ brew upgrade shopify-cli
以上です！
