メニュー

Shopify CLIを使ってローカル環境でテーマをカスタマイズする手順

ShopifyのOnline Store2.0の発表以降、以前までローカル開発で使用していた「Theme Kit」が非推奨になりました。

この記事では、2022年現在最新版である、Shopifyのテーマをローカル環境でカスタマイズするための「Shopify CLI」のインストール方法について紹介しています。

Shopify CLIの概要

Shopify CLIとは、Shopifyのテーマやアプリをローカル環境で開発するためのツールです。

Shopifyのテーマは管理画面からもカスタマイズできますが、ローカルでの開発環境を準備することで、より便利に開発を進めることができます。

冒頭でお伝えしたように、2022年現在、以前まで開発で使用されていた「Theme Kit」の使用が非推奨となっています。

Theme Kitは現在はまだ使用できますが、これから新しく開発環境を用意する場合は、この記事の内容を参考に準備を進めてください。

0.Shopify CLIを使用するための事前準備

  • Homebrewのインストール
  • Ruby2.7以上のインストール

Shopify CLIを利用するためには、上記2つの事前準備が必要です。この準備については、長くなるので別記事で解説しています。

1.Shopify CLIのインストール

Shopify CLIはHomebrewを使ってインストールします。

$ brew install shopify-cli

インストールできたら、バージョンを確認しましょう。

$ shopify version
2.13.0

2.ストアと接続

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

上記コマンドで、テーマを編集するストアに接続します。

ストアURLには「xxxxx.myshopify.com」を入力

Shopify CLIとストアの認証フォーム

コマンドを実行するとフォームが開きます。認証のためにメールアドレスと、パスワードを入力。

認証成功のメッセージ表示

「Authenticated successfully」のメッセージが出れば完了です。ターミナルでも以下のように接続が確認できます。

ターミナルでの接続成功メッセージ

クライアントのストアをカスタマイズする場合

自分が所有権を持っていないストアのテーマをカスタマイズしたい場合は、ストアの所有者にコラボレーターリクエストを送る必要があります。

  • 1.Shopifyパートナー管理画面から、クライアントのストア追加(コラボレーターリクエスト)
  • 2.クライアント側がリクエストを承認

ストアのコラボレーターになっていなければ、ストアの接続時には「Authenticated successfully」が出るものの、その後テーマのダウンロードやアップロードができません。

表面上では接続ができたように動作するため、バグかと思います。

3.ローカル環境にカスタマイズするテーマを準備

新規テーマを作成する場合

テーマをインストールするフォルダに移動して、以下のコマンドを入力。

$ shopify theme init

Shopifyのデフォルトテーマである「Down」のファイル一式がダウンロードされます。

新規テーマの名前の入力を求められるので、任意の名前を入力しましょう。

? Theme name
> Dawn-dev

Donwのテーマ一式がダウンロードされました。

既存テーマを利用する場合

既にショップにインストールされているテーマを編集したい場合。まず、編集したいテーマのIDを調べます。

テーマのIDの調べ方

管理画面から、編集したいテーマの「カスタマイズ」ボタンをクリック。

テーマのIDの表示箇所

ブラウザのURLに表示されている上記の数字が、テーマIDです。これをコピーしておきます。

テーマをダウンロードしたいフォルダに移動して、以下のコマンドを入力。

$ shopify theme pull [テーマID]

フォルダ内に、選択したテーマファイル一式がダウンロードされます。

4.テーマの編集・カスタマイズ

ローカルにダウンロードしたテーマをカスタマイズするために、

$ shopify theme serve

を実行します。

ローカル環境でのテーマ編集コマンドライン

実行後に「http://127.0.0.1:9292」にアクセスすると、編集したファイルを自動リロード(ホットリロード)しながら、カスタマイズを確認することができます。

Theme Kitでは、編集したファイルを保存してShopifyサーバーにアップ→確認という手順が必要でしたが、Shopify CLIでは確認までローカル環境で済ませて、完了したら本番環境にアップロードする流れになりました。めっちゃ便利!

ホットリロードがうまくできない場合

私の環境では、なぜか「shopify theme serve」を実行時、ホットリロードができないケースが…(手動での更新は可能)

色々調べた結果、以下のコマンドを利用することで正常に動作するようになりました。

$ shopify theme serve --poll

編集がうまくできない場合は、一度こちらのコマンドも試してみてください。

5.編集したテーマアップロード

$ shopify theme push --unpublished

最後に、上記コマンドで編集したテーマをショップにアップロードして完了です。

上記コマンドでは、「未公開テーマとして、ショップにテーマライブラリにアップロード」をしています(–unpublished部分がオプションです)

他に利用頻度の多いものとして、既存のテーマを編集して上書きする場合は以下。

$ shopify theme push --theme [テーマID]

他にもローカルで編集したファイルを、即本番に反映するなども可能です。オプションについては、公式サイトの以下のページをご参照ください。

この記事についてまとめ

Shopify CLIの導入と、ローカル環境でテーマをカスタマイズする流れを紹介しました。

とは言え、Shopifyの魅力は、管理画面からかんたんにECサイトの見た目を変えられることだと思います。

また、テーマのソースコードの編集についても、管理画面から行うことが可能です。ちょっとした編集をしたいEC運営者の方は、以下の記事を参考にしてみてください。

弊社でも部分的なカスタマイズの依頼を承っていますので、自社で対応しきれない場合は、ぜひご相談ください。

お問い合わせはこちらから>>

Profile

やまもと

モールから卒業して、自分でネットショップを持ちたい方向けのブログを書いています。

Shopifyの簡単なカスタマイズや、0からの構築。集客面に関する相談などはお気軽にお問い合わせください。

Recent

Tags