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が立ち上がり、インストールが始まるのでしばらく待ちます。
enter キーを押してとcmdを閉じます。
Rubyのバージョン確認
ruby -v
Rubyのバージョンが表示されればOKです。
Shopify CLIのインストール
以下のコマンドを実行して、Shopify CLIをインストールします。(windows)
gem install shopify-cli
※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>
コマンド実行時、警告が出る場合、allow access をクリックします。
Storeにログインするemail とpasswordを入力。
デフォルト設定にしているブラウザにAuthenticated successfully と出ればOK。
cmd側は以下のようにlogged into storeと表示されます。
3.Core command
Shopify CLI コマンドを一部紹介致します。
コマンド一覧は以下のページにて確認できます。
Shopify CLI core command
Login
shopify login --store <domain>
Logout
shopify logout
Switch
※store間をログアウト、再ログインせずに切り替える
shopify switch --store <domain>
Whoami
どのパートナー組織にログインしているかまたはどのストアにスタッフメンバーとｓてログインしているかを確認する
shopify whoami
4.Create a new theme(テーマ作成)
ここから、ローカル環境にテーマを導入していきます。
以下のコマンドでテーマを導入でき、実行後テーマ名を入力します。
shopify theme init
Shopify Online 2.0にはデフォルトでDawnというテーマが用意されています。
DawnBFCM
と入力すると、Githubからクローンが始まります。
初回実行時(shopify theme serve)
ローカル環境へのDawnテーマ取得が完了したら、以下のコマンドを実行します。
ローカル環境に簡易サーバを立ち上げるようなコマンドで、ローカル環境でShopifyの画面を確認することができます。
shopify theme serve
初回実行時は、主にエラー内容としては、2つ表示されます。(windows)
- 1つ目はwdmが読み込めないと出ているので”gem install wdm”を実行する
- 2つ目は現在ログインしているユーザーにテーマの編集権限がないと出ている
1つ目のエラーを解消するため、以下のコマンドを実行します。
gem install wdm
2回目(shopify theme serve)
1つ目のエラーはなくなりました。
こちらの記事で上記エラーを修正する方法として
- ドメインの後に/admin をつけてshopify loginする
- 別のアカウントを作成して、そのアカウントでログインする
と記載があるものの何人かのユーザーはそれでも失敗しているため確証はなさそう。
(どちらも試した結果、私は変わりませんでした)
別の方法として、こちらの動画が参考になりました。
動画にもあるように上記エラーはshopifyのバグらしい。(2021/9/7時点)
この動画の4:00くらいから参考にすると良さそうです。
成功時(shopify theme serve)
動画を参考に何回かログアウトとログインを繰り返して、再度以下を実行。
shopify theme serve
下のように Viewing theme と出ればOK。
ローカル環境用のプレビューURLでブラウザに表示します。
http://127.0.0.1:9292
管理画面
ストアのパスワードは、管理画面側で確認できます。
上記のようにトップページが表示されれば、ローカルでのプレビューはOKです。
テーマをストアからpullで持ってくる
shopify theme pull [ options ] [ /path/to/your/theme ]
[option]にはthemeId にする
themeIdはshopifyの管理画面側で「カスタマイズ」をクリックして表示されたページのURLから確認できます。
管理画面から現在のテーマにある「カスタマイズ」をクリック。
カスタマイズ画面が表示されたら、URL部分を確認します。
[domain]/admin/themes/[themeId]/editor
数字の部分をコピーします。
[ /path/to/your/theme ] (パスの指定はよくわかりませんでした…)
以下のようにしてコマンドを実行。
(パスの指定はわからない場合、無くてもいいかもしれません。)
shopify theme pull 120529027306 D:\GitHub\shopify-dawn
pullコマンド実行後、カレントディレクトリにフォルダ名が「120529027306」で、その配下にファイル一式作成されます。
選択肢が出たら、[Live]を選択します。
(ストアにインストールされているテーマ次第でここの表示は変わるかと思います)
pulled successfullyと表示されればOKです。
フォルダ名は[themeId]になりますが、フォルダ名を変更することは可能です。
(ファイルが開かれていて、フォルダ名を変えられなさそうな場合、一度PCをシャットダウンしてから試してみるのがよいかと思います)
再度以下を実行
shopify theme serve
Live(store側)と同じ見た目がローカル側でも表示されればOKです。
ShopifyとGithubを連携させるには以下を参考下さい。
