【Shopfiy CLIテーマカスタマイズ】結局どうやってローカルテーマ開発を進めていけばよいのか？

2025年11月9日

前置き

最近Shopifyを扱うことが増えてきました。
だいぶ慣れてはきましたが、最初の方で悩んだのが、

「ローカルテーマ開発の仕方がいまいちわからん…」

ということでした。

Shopifyのローカル開発方法を調べた時に、真っ先にヒットするのが「Shopify CLI」です。
Shopify側は、ローカルで開発できるようなサービスを提供しています。

やりたいのは、「ローカルで開発し、プッシュで仮環境に反映したい」ということです。
具体的には

ローカルで開発したい理由は、自分の慣れた方法でコーディングしたい　（つまり自分のエディタ使いたい、Sassも使いたい）
それを一発で仮環境に反映したい

ということでした。

そもそもShopifyは基本的にテーマが存在し、サイトのイメージに近いテーマを選んでそれをカスタマイズすることで、ショップに合わせたデザイン・UIにカスタマイズすることができます。
Shopifyのカスタマイズ第一段階としては、「テーマエディタでカスタマイズできるよ」というところでしょう（WordPressのテーマとも似たコンセプト）。
もちろん少しのカスタマイズならテーマエディタの範囲内でカスタマイズできますが

込み入ったレイアウトのものを作りたい
そもそも1からサイトを作るレベルでデザイン変更が必要

といった場合、どうしてもコーディングが必要で、そのためのローカル環境が欲しくなります。
これがShopify CLIでできるのか？というところを探っていきました。

この記事のターゲットは主に、Web制作でECショップを扱うことになった人です。どうやってローカルでコーディングするかという視点で書いています。
現時点で自分が落ち着いた方法を記載しています。ほかにも良い方法があるかもしれませんが、ご了承ください。

Webサイトの「ローカル開発」方法は色々ある

CMSもいらないような極限にシンプルなWeb制作だと、htmlやcssを作り、それをFTPツールでレンタルサーバーにアップロードする。
これでおわりです。

一歩進めて、共通パーツを使い回したり、SassやTailwindを使ったりするために、Astroなどのフレームワークやライブラリが使われることがあります。
これらの場合は、VercelやNetlifyなどのホスティングサービスへプッシュで一発反映できるようにすることもできます。FTPソフトでのアップと比べて、Githubとの連携ができるのが大きなメリットです。（Githubでレンサバへのアップもできなくはないですが、まぁまぁの難易度）
フレームワーク・ライブラリは、コマンドでローカルサーバーが立ち上げられるので、ローカル開発は容易です。

これをさらに一歩複雑にしたのが、CMS入りのサイト。例としてWordPressでサイト全体を構築する場合、WordPress自体は無料で入手でき、構築してレンタルサーバーにアップするという方法になります。
この時、静的ファイル以外にDBが必要となるので、ローカルで制作するためにはMAMPやLocalあるいはDockerなどの、DBをローカルに作成するための仕組みが必要となります。

WordPressでサイト管理するのではなく、別のサービスを使って動的コンテンツを作成する方法もあります。
例えば、microCMSやKurocoなどのSaaS型のヘッドレスCMSにすれば、コンテンツ管理用のサーバーを別途契約する必要がありません。コンテンツのデータベースも、そのサービス内で管理されます（※）。
これらでローカル開発を行う場合、ローカル環境で構築したフロントエンドがAPIを通じてコンテンツデータを取得し、動的なウェブサイトを構築していくこととなります。つまりDBをローカルに作成するのではなく、サービス側の管理するDBデータをAPI経由で使います。
ヘッドレスCMSを使ったサイトは前述したフレームワークとも相性がよく、Githubとの連携も容易なので、プッシュで仮環境へ反映するような仕組みを作ることができます。
※ちなみにWordPressもヘッドレスCMSとして使用可能です。オープンソースであるためCMS自体の利用料は無料ですが、サーバーの契約・運用が必要です。

開発環境を構築する難易度はそれぞれあるにせよ、どのパターンをとっても、「ローカルで本番同等のものをブラウザで確認しながら作成していく」方法はあります。

しかしShopifyはこのどれでもない様相を呈しています。

ShopifyはSaaS型のECプラットフォームです。そして、ECサイトゆえの複雑さがあります。

複雑な理由の一つが、「テーマエディタ」の存在と、liquidとjsonで構成されたファイル群です。

Shopifyは、ページごとに「テンプレート」、パーツごとに「セクション」や「スニペット」といったコンポーネントから構成されています。
これらのテンプレートやセクションは、liquidファイルとjsonファイルの二つがあり、HTMLがかけるのはliquidの方です。
liquidで作成されたセクションやスニペットに、「テキスト」や「画像」を変更できるような仕組み（スキーマ）を書いておき、独自のテーマエディタというGUIでテキストや画像を差し替えると、テーマ内のjsonデータが書き換わる…といった仕組みになっています。

テーマカスタマイズにおいて、このテーマエディタを編集することはわりと必須の作業となるので、テーマエディタをローカルで参照できるということが必要となります。
一見ヘッドレスCMSと似た構造なのですが、フロント側がliquidとjsonという特殊な組み合わせなので、ただローカルサーバーを立ち上げればいいだけではありません。
Shopifyローカルサーバーを立ち上げるには、Shopify CLI (Command Line Interface) を使用するのが一般的です。

そもそも、Webサイトのようなページをどのように作っていくか

通常のWebサイトの場合、ページごとにコーディングしていきます。
対してShopifyの場合は、セクションごとに作成していく方がよいです。（という自分の感想です。）

もちろん、ショップの管理者が全く触る可能性のないページは、templateにpage.hoge.liquidを作ってコーディングする、あるいはまるまる一個のセクションにして、それを読み込むという方法で問題ないと思います。

ですが、たとえば「季節ごとに画像を変えないといけない」「表示非表示を切り替えられた方が良い」など、ショップ管理者が運用するにあたって変更できた方がよい箇所があります。

トップページはだいたい下層に繋がるコンテンツが並ぶと思いますが、「商品一覧」「ブログ一覧」「コンセプト」など、セクションごとにわけて作成した方が後々何かと便利です。

セクションごとにわけると、そのセクションを使い回しすることも可能になります。

最初に、「ショップ管理者がテーマエディタで触りそうな箇所」を見極め、もしくは相談し、切り分けていくことが大事です。

Shopify CLI をどう使っていくか

開発環境のイメージ

まずイメージの説明です。

Shopifyのコマンド（shopify theme dev）で、「Development」という、一時的な開発テーマを立ち上げることができます。

開発ストアを作る

必須というわけではないですが、開発ストアを作っておくと安心です。個人的には多少面倒でもやるべきと思っています。
Shopify CLIは基本的に、ショップと繋げてpushしたりpullしたりをコマンドで行います。…が、コマンドに慣れてなかったり理解が甘いと、ショップを吹っ飛ばしてしまう可能性が無きにしも非ずなので、開発ストアを作ってやるのが良いと思います。

shopify partnersに登録すると、開発ストアを作成できるようになります。
開発ストアは、Shopifyパートナープログラムのメンバーであれば無制限に作成できます。
開発ストアは実際の取引処理はできませんが、UI作成に使えるだけでなく、テスト注文したりアプリをインストールしたり、shopifyのその他機能を試すことができます。新規制作の場合は、そのまま有料プランに移行し、公開ストアとして運用することもできます。

商品データや注文データも本番とは別なので、既存サイトのカスタマイズをしたい場合でも、自由に登録することができます。逆に、開発ストアで整えたテーマデータや商品データは、そのまま本サイトにスライドすることはできません。
とはいえテーマデータはアップロードで簡単に入れ替え可能です。

本番と同じような開発ストアを作るためには、

テーマの移行
商品データの移行
顧客の移行
ページデータの移行

…などありますが、このうち「テーマの移行」は、本番からテーマファイルをダウンロードし、開発ストアにインポートするだけで完了します。

問題はその他データの移行です。
商品データや顧客データは、それぞれ本番環境からCSVでエクスポートすることができ、それをインポートすることでだいたいは移行できます。しかし、

エクスポートデータの中に「コレクション」が含まれていない
アプリは手動インストール

など、エクスポートとインポートだけでは移行しきれない要素があるので、開発に必要な部分だけ個別対応していく感じになるかと思います。

ちなみに、データ移行してくれるMatrixifyというアプリがあるのですが、無料で使える範囲は限られており、10商品まで、10ページまで・・・のように各項目ごとに制限があります。完全に本番に合わせた開発ストアを作りたいなら、Matrixifyの有料プランでできるようです（使ったことはないですが）。

ローカルだけのGit管理をしておくと気持ち安心

これも必須というわけではないですが、この後、差分を確認したくなることが頻繁に訪れるのでローカルリポジトリを作っておくと何かと安心です。

Shopify CLIをインストールする

前提として、Node.jsはインストールされているものとします。

グローバルにインストールする場合

npm install -g @shopify/cli@latest

（brewを使ってもよいです。とりあえずshopifyコマンドを使えるようにします。）

インストールが完了したら、バージョン確認をします。

shopify version

バージョンが表示されたらインストール完了です。

Shopify CLIとストアをつなぐ

shopify theme list --store {***mystore.myshopify.com}

{...}のところにはストアのドメインを入れます。

すると、

To run this command, log in to Shopify Partners.
👉 Press any key to open the login page on your browser

と表示され、ブラウザでログインするよう促されます。
言われた通りログインしてまたターミナルに戻ってきます。

開発テーマの立ち上げ

開発テーマは、プレビューやテストのために一時的にストアにアップロードされるテーマのことです。

必須ではないですが、開発テーマを立ち上げる前に、一度ローカルで管理しているGitをコミットしておいて、shopify theme pullでメインテーマをpullしておくと安心です。(ローカルのgitではなく、shopifyのpull)

一番最初、テーマをインポートしてすぐは差分はないはずですが、この後テーマ開発を進めていく上で、開発前に本番と差があることに気づかずローカル開発を進めてしまうと、最後にメインテーマにpushした時に先祖返りが起こります。

とりあえず開発テーマを立ち上げる前に、pullで本番と合わせておくとよいです。

そしてそのpullすら、「違うストアと紐づいてしまってたらミスるかもしれない」という懸念があるので、一旦ローカルのGitでコミットしておくというわけです。

準備ができたら開発テーマを立ち上げます。

shopify theme dev

ターミナルに、下記のURLが提示されます。

http://127.0.0.1:9292
Share your theme preview
Customize your theme at the theme editor
Preview your gift cards

（Preview your gift cardsは/gift_cards/のページをプレビューできますが、今回は対象外にします）

それぞれAlt＋クリックで開くと、開発テーマにアクセスができます。
Customize your theme at the theme editorを開くと、開発テーマのテーマエディタにアクセスできます。

あとの二つは開発テーマのサイト側が表示されます。
127.0.0.1:9292は、自分のPC内で立ち上がっている環境です。テーマファイルの変更をリアルタイムにプレビューできます。ホットリロードでスピーディに編集の反映を確認できます。
（最初うまく動きませんでしたが、shopify CLIをインストールし直すとうまくいきました）

Share your theme previewを開くと、Shopifyが提供する一時的な公開URLにアクセスできます。内容は127.0.0.1:9292と同じです。このURLは外部の人と共有も可能です。

今見ているページが、メインテーマなのか開発テーマなのかを知るには、下記を確認します。

テーマエディタ側　…　左上のテーマ名の記載
サイト側　…　画面下に出ている黒いバーのテーマ名

「Development」と書かれていれば開発テーマが開いています。
「反映されない」と思ったら、メインテーマを見てないか確認しましょう。

ローカルでコーディングする

覚えておくべきは

ローカルで行ったliquid・jsonの編集、ファイル追加は開発テーマに同期される
開発テーマのテーマエディタで行った変更は、ローカルのjsonに同期されない
管理画面から行う商品管理やコレクション編集、ファイル追加などは、開発テーマの範囲外（編集するとメインテーマにも影響する）

ということです。

これを踏まえてコーディングします。

以下、「セクションを作ってページに追加する」例です。

1、sectionを作成する

sectionフォルダのなかに、作りたいパーツのliquidファイルを作成します（コーディングはまだ）。
テーマエディタから追加できるよう、schemaのpresetsを追加しておきます。

{% schema %}
{
  "presets": [
    {
      "name": "メインビジュアルテスト"
    }
  ]
}
{% endschema %}

→保存すると開発テーマに同期されます

2、ローカルで、1に対応したcss(scss)を作成する

scssのコンパイルは、VS CodeのアドオンでもなんでもOKです。とりあえずassetsの中にcssが保存されるような仕組みにしておくとよいと思います。

→これも保存すると開発テーマに同期されます。

3、開発テーマのテーマエディタで1のセクションを追加する

追加したら保存します。

→これは、開発テーマ上に保存されていますが、ローカルのjsonには反映されていません。
devを立ち上げ直すと元に戻ってしまいます。

ローカルに反映させるためには、開発テーマ（Development）をpullする必要があります。
この時、開発テーマのものが全てpullされるので、念の為ローカルのGitをコミットしておくと、あとで差分が確認できるので安心です。

shopify theme pull

表示されるショップ名をちゃんと確認しましょう。
どのテーマをpullするか聞かれるので、Developmentを選択します。

4、ローカルでコーディングする

開発テーマで追加したセクションを確認しながら、コーディングします。

開発テーマをメインテーマに反映する

開発テーマのjsonをローカルに反映させるため、Developmentをpullします。くどいですがpullの前にコミットしておくとよいです。

ローカルが完全になった状態で、pushします。

shopify theme push

プッシュ先を聞かれるので、メインテーマを選択します。必ず表示されているショップ名を確認しましょう。

個人的に、開発ストアを使ってない場合は直接メインテーマにプッシュするのはちょっとリスクがあるので、管理画面でメインテーマを複製してDevelopプッシュ先用のものを作っておき、そこにpushしてから、管理画面上で「メインテーマとして設定」してもいいと思います。

以上が一連の流れです。

まとめ

とりあえずこれで、どんなに複雑なレイアウトのコーディング依頼が来ても、対応できるようになりました。

Blog