【開発環境構築】Shopify CLIでのテーマ作成の仕方

Shopify CLI

Shopify Unite 2021でOnline Store 2.0では、Shopify CLIの使用が推奨されるようになりました。

Shopify CLI for themes

Shopify CLIのインストール

Shopify CLIをインストールするにあたって、以下について先に確認してください。

Ruby2.7以上がインストールされている
(macの場合)Homebrewがインストールされている

以上確認ができたら早速進めます。

Windows版インストール

$ gem install shopify-cli

Mac版インストール

$ brew tap shopify/shopify
$ brew install shopify-cli

Shopify CLIが正常にインストールされているかをコマンドで確認できます。

$ shopify version

バージョン番号が帰ってきたらOKです。

ストアと接続させる

ストアとShopify CLIを接続させます。
接続するには、ストアのコラボレーターアカウント、もしくはスタッフアカウントの権限を持っている必要があります。

$ shopify login --store [ストアのURL]

[ストアのURL]は〇〇.myshopify.comのような部分です。

自動でブラウザが立ち上がり、アカウントにログインします。
以下のメッセージが表示すれば成功しています。

ターミナル上でもアカウントの選択があるので、選ぶと以下のメッセージが表示され、完了です。

Logged into store [ストアURL] in partner organization [アカウント名]

テーマを作成する

新しいテーマを作成する

テーマを作成したいフォルダに移動し、その中で

$ shopify theme init [テーマ名] [ -u GitリポジトリのURL ]

URLを指定しない場合は、Dawnのテーマが使用されます。

既存のテーマを使用する

テーマを管理したいフォルダに移動し、その中で

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

テーマがGithubにある場合、新しいテーマを作成するのほうのGitリポジトリURLを指定してください。

ローカルでShopifyテーマの開発をする

$ shopify theme serve

こちらでテーマをプレビューできます。
また、以下の表示が出るので、それぞれ確認できます。

 Please open this URL in your browser:
┃ http://127.0.0.1:9292
┃ 
┃ Customize this theme in the Online Store Editor:
┃ https://〇〇.myshopify.com/admin/themes/127733530811/editor
┃ 
┃ Share this theme preview:
┃ https://〇〇.myshopify.com/?preview_theme_id=127733530811

1個目のリンクはリアルタイムで変更されるので、開発に便利です。

開発したままShopifyからログアウトしてしまうと、開発テーマは消えてしまうので、最後にShopifyにアップロードする作業が必要です。

Shopifyにテーマをアップロードする

$ shopify theme push

こちらでテーマをプッシュ完了です。

まとめ

Shopifyテーマ開発がShopify CLIのおかげで断然とはやくなりました。また細かなオプションやコマンドはShopifyの公式ガイドに載っているので、是非そちらをご覧ください。

Shopifyテーマコマンド