Shopify CLIを使ってローカル環境でテーマを扱えるようにする方法

Shopify

Shopify CLIを使ってローカル環境でテーマを扱えるようにする方法について紹介致します。このような人に本記事はおすすめです。

  • Shopify Online Store 2.0のテーマをローカルで扱えるようにしたい人
  • Shopifyテーマを本格的に開発していきたい人

※Online Store 2.0 以前のテーマを扱う場合は、Theme Kit を利用する必要があります。

【Shopify】オフィシャルサイトでストア開設ができます。
Shopify Partnersに登録後、開発用ストアを作成できます。

1.shopify CLI install

公式ドキュメント

Shopify CLIをインストールするには、WindowsではRuby2.7以上+Dev kitが必要です。
※MacではRubyまたはHomebrewでインストールできます。

Rubyのインストール(Windows)

Rubyのインストーラーはこちら

Rubyのインストーラーをダウンロードして実行します。
自動的にcmdが立ち上がり、インストールが始まるのでしばらく待ちます。

ruby-install

enter キーを押してとcmdを閉じます。

ruby-install2

Rubyのバージョン確認

ruby -v

Rubyのバージョンが表示されればOKです。

Shopify CLIのインストール

以下のコマンドを実行して、Shopify CLIをインストールします。(windows)

gem install shopify-cli

gem-shopify-CLI2

※Macの場合、homebrewコマンドで以下2つ実行

brew tap shopify/shopify
brew install shopify-cli

 

shopify version確認

shopify version

Yesの場合、どのコマンドを使ったかまたはエラー発生時の情報が収集されます。
kまたはjキーで上下移動して、yesかnoを選択します。

 

2.Authenticate(認証)

認証するには、shopify storeのdomainかshopify developmentのdomainが必要です。(アカウントを作成しておく必要がある)

shopify storeのdomainは【Shopify】オフィシャルサイトにてアカウントを作成して、ストアのドメインを設定します。(xxxxx.myshopify.com)

shopify developmentのdomainは、Shopify Partnersへアカウントを登録してから、開発用のストアを作成することができます。(xxxxx.myshopify.com)

ストアにてxxxxx.myshopify.comの設定ができたら、cmdで以下のコマンドを実行します。

shopify login --store <DOMAIN>

alert alert-after-authenticate

コマンド実行時、警告が出る場合、allow access をクリックします。

authenticate-shopify

Storeにログインするemail とpasswordを入力。

authenticate-success

デフォルト設定にしているブラウザにAuthenticated successfully と出ればOK。

cmd側は以下のようにlogged into storeと表示されます。

authenticate-success2

 

3.Core command

Shopify CLI コマンドを一部紹介致します。
コマンド一覧は以下のページにて確認できます。
Shopify CLI core command

Login

shopify login --store <domain>

Logout

shopify logout

Switch
※store間をログアウト、再ログインせずに切り替える

shopify switch --store <domain>

Whoami

どのパートナー組織にログインしているかまたはどのストアにスタッフメンバーとsてログインしているかを確認する

shopify whoami

 

4.Create a new theme(テーマ作成)

ここから、ローカル環境にテーマを導入していきます。
以下のコマンドでテーマを導入でき、実行後テーマ名を入力します。

shopify theme init

Shopify Online 2.0にはデフォルトでDawnというテーマが用意されています。
DawnBFCM
と入力すると、Githubからクローンが始まります。

theme-init

初回実行時(shopify theme serve)

ローカル環境へのDawnテーマ取得が完了したら、以下のコマンドを実行します。
ローカル環境に簡易サーバを立ち上げるようなコマンドで、ローカル環境でShopifyの画面を確認することができます。

shopify theme serve

shopify-theme-serve

初回実行時は、主にエラー内容としては、2つ表示されます。(windows)

  • 1つ目はwdmが読み込めないと出ているので”gem install wdm”を実行する
  • 2つ目は現在ログインしているユーザーにテーマの編集権限がないと出ている

1つ目のエラーを解消するため、以下のコマンドを実行します。

gem install wdm

gem-install-wdm

2回目(shopify theme serve)

shopify-theme-serve2

1つ目のエラーはなくなりました。

2つ目のエラーについて
Error: Not authorized as Store Owner when running shopify theme serve · Issue #1332 · Shopify/shopify-cli

こちらの記事で上記エラーを修正する方法として

  • ドメインの後に/admin をつけてshopify loginする
  • 別のアカウントを作成して、そのアカウントでログインする

と記載があるものの何人かのユーザーはそれでも失敗しているため確証はなさそう。
(どちらも試した結果、私は変わりませんでした)

別の方法として、こちらの動画が参考になりました。

動画にもあるように上記エラーはshopifyのバグらしい。(2021/9/7時点)
この動画の4:00くらいから参考にすると良さそうです。

成功時(shopify theme serve)

動画を参考に何回かログアウトとログインを繰り返して、再度以下を実行。

shopify theme serve

下のように Viewing theme と出ればOK。

shopify-theme-serve3

ローカル環境用のプレビューURLでブラウザに表示します。
http://127.0.0.1:9292

local-preview

管理画面

store-password

ストアのパスワードは、管理画面側で確認できます。

store-local-preview

上記のようにトップページが表示されれば、ローカルでのプレビューはOKです。

 

テーマをストアからpullで持ってくる

theme pullコマンド

shopify theme pull [ options ] [ /path/to/your/theme ]

[option]にはthemeId にする

themeIdはshopifyの管理画面側で「カスタマイズ」をクリックして表示されたページのURLから確認できます。

管理画面-カスタマイズ

管理画面から現在のテーマにある「カスタマイズ」をクリック。

customize-theme-url

カスタマイズ画面が表示されたら、URL部分を確認します。

[domain]/admin/themes/[themeId]/editor

数字の部分をコピーします。

 [ /path/to/your/theme ] (パスの指定はよくわかりませんでした…)

以下のようにしてコマンドを実行。
(パスの指定はわからない場合、無くてもいいかもしれません。)

shopify theme pull 120529027306 D:\GitHub\shopify-dawn

pullコマンド実行後、カレントディレクトリにフォルダ名が「120529027306」で、その配下にファイル一式作成されます。

shopify-pull-themeId

選択肢が出たら、[Live]を選択します。
(ストアにインストールされているテーマ次第でここの表示は変わるかと思います)

shopify-pull-themeId2

pulled successfullyと表示されればOKです。

フォルダ名は[themeId]になりますが、フォルダ名を変更することは可能です。
(ファイルが開かれていて、フォルダ名を変えられなさそうな場合、一度PCをシャットダウンしてから試してみるのがよいかと思います)

再度以下を実行

shopify theme serve

Live(store側)と同じ見た目がローカル側でも表示されればOKです。

ShopifyとGithubを連携させるには以下を参考下さい。

ShopifyとGithubを連携させる方法
ShopifyとGithubを連携させる方法について紹介致します。Shopifyテーマを本格的に開発していきたい、Githubでテーマを管理する際に、Shopifyと連携する方法について知りたいという人に本記事はおすすめです。Shopify partnerにてdevelopment storeを利用しています。