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

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

主要なコマンド

CLIインストール

gem install shopify-cli

Shopify CLIのバージョン確認

shopify version
ストアと接続
shopify login --store [ストアのドメイン]

フォルダ移動

cd [移動先]
dフォルダの場合
cd /d [移動先]

テーマのダウンロード

▼ 一覧を収集する場合はこちら
shopify theme pull
▼テーマIDを指定する場合はこちら
shopify theme pull -i [テーマのID]
ローカルデータをブラウザで確認 
(開発環境とShopify CLIを接続)
shopify theme serve
テーマをアップロード
(アップロードは ctrl + C でプレビューストップしてから)
shopify theme push
Shopify からログアウト
shopify logout

追記

クエビコ

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

Follow me!