Shopify CLI での作業手順 (Windows)

Shopify CLI をでの編集が推奨 (2.0の場合 )

ShopifyのOnline Store2.0で、Shopify CLIの使用が推奨されています。

https://shopify.dev/themes/tools/cli

Shopify CLI を使用する準備

• Visual Studio Code インストール　(説明は省略しています)
• Ruby2.7以上のインストール

Ruby インストール (バージョン2.7以上)

>> Ruby ダウンロード

Ruby 起動 (Windows10環境)

Ruby 画面

CLIインストール

gem install shopify-cli

結果

正しくインストールできてるかShopify CLIのバージョン確認

shopify version

ストアと接続

shopify login --store [ストアのドメイン]

honyakushitai.myshopify.com

の作業の仮環境でテスト

※URLが判っていても管理画面にログインが出来ないと取得は出来ません。

結果

自分のPCの保存したいフォルダに移動

cd [移動先]

Cドライブの場合は上記で出来るのですが、私の場合Dドライブの為うまく行かないので下記で対応

cd /d [移動先]

私の場合は　Cドライブじゃ無くてDドライブの中にある「honyakushitai」って言うフォルダに保存＆作業だったので、　cd だけでは移動がうまく動かなかったので　cd/d で対応。

※ruby でフォルダを作る方法もありますがフォルダは先に作っています。

フォルダの移動は、ストアとの接続前でも接続後でもどちらでも大丈夫です。

自分のPCのフォルダの確認の仕方

1. 保存したいフォルダに移動
2. フォルダの中央部分で右クリック
3. プロパティ

①￥②　が作業するフォルダになります。

※PCよって違うので、複数PCがある場合は各PCごとに確認が必要です。

テーマのダウンロード

インストールしてあるテーマの一覧を取得

shopify theme pull

未契約アカウントでは権限が無いと言うエラーで動かせず…

ここで問題が…エラー発生

未契約のアカウントでは「編集の権限が無い」と言うエラーでダウンロードが出来ず、既に契約しているShopify アカウントでは正常に動いたので、謎です。

ここから契約済みのテスト環境で検証。

契約済みアカウントでテスト

テスト環境のサイトでCLIが使えなかったら意味がない気がするけど。

有料契約済みサイトでは正常に動作

テーマの一覧が表示されるので、ダウンロードしたいテーマの番号を記入

※2番なら　「2」と押したらOK!

ダウンロードスタート！

指定したPC内のフォルダにダウンロード完了！

Visual studio code でダウンロードしたフォルダを開く

開発環境とストアのShopify CLIを接続 (プレビュー)

shopify theme serve

3つのURLが表示

①　 開発テーマへのプレビュー

②　管理画面のエディターのプレビュー

③　他の開発者と共有できるプレビュー

VSでフォルダを開いたら編集!

プレビューストップ

ctrl ＋ C

本番サイトにアップなどはプレビューをストップして対応

主要なコマンド

shopify login --store [ストアのドメイン]

cd [移動先]

dフォルダの場合

cd /d [移動先]

shopify theme pull

shopify theme pull -i [テーマのID]

shopify theme serve

shopify theme push

shopify logout

追記

プレビュー画面は　VS で　Ctrl ＋ S 【保存】してブラウザを更新すると編集済みのプレビューになります。

Follow me!

@cuebko