- 1. Shopify CLI をでの編集が推奨 (2.0の場合 )
- 2. Shopify CLI を使用する準備
- 3. Ruby インストール (バージョン2.7以上)
- 4. Ruby 起動 (Windows10環境)
- 5. Ruby 画面
- 6. CLIインストール
- 7. ストアと接続
- 8. 自分のPCの保存したいフォルダに移動
- 9. 自分のPCのフォルダの確認の仕方
- 10. テーマのダウンロード
- 10.1. インストールしてあるテーマの一覧を取得
- 10.1.1. 未契約アカウントでは権限が無いと言うエラーで動かせず…
- 10.1.2. 契約済みアカウントでテスト
- 10.2. 指定したPC内のフォルダにダウンロード完了!
- 11. Visual studio code でダウンロードしたフォルダを開く
- 12. 開発環境とストアのShopify CLIを接続 (プレビュー)
- 13. 主要なコマンド
- 14. 追記
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のフォルダの確認の仕方
- 保存したいフォルダに移動
- フォルダの中央部分で右クリック
- プロパティ
①¥② が作業するフォルダになります。
※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
本番サイトにアップなどはプレビューをストップして対応
主要なコマンド
CLIインストール | gem install shopify-cli |
Shopify CLIのバージョン確認 | shopify version |
ストアと接続 |
|
フォルダ移動 |
|
テーマのダウンロード | ▼ 一覧を収集する場合はこちら ▼テーマIDを指定する場合はこちら
|
ローカルデータをブラウザで確認 (開発環境とShopify CLIを接続) |
|
テーマをアップロード (アップロードは ctrl + C でプレビューストップしてから) |
|
Shopify からログアウト |
|
追記
プレビュー画面は VS で Ctrl + S 【保存】してブラウザを更新すると編集済みのプレビューになります。