【Shopifyテスト環境構築】ローカルで修正した内容をGitHub経由でテスト環境に反映する方法

こんにちは、しのです。

Shopifyのテーマ開発を学んでいます。本番環境にアップする前にテスト環境で修正内容を確認したいんですがどうやってやるか分かりません。誰か教えてください。

今回はこのような疑問を解決する記事となっています

しの

何を隠そう僕自身も最初はこの内容について「？？？」だったんです。

なので同じような悩みを持つ方の参考になればと思い記事にました。

WordPressであればテストドメインなどにアップすればテスト環境としてクライアントに渡すことが出来ますが、Shopifyの場合は未公開テーマを使って検証する形となるため最初は戸惑うかもしれません。

Shopifyでは、GitHubと連携することでローカルで安全にテーマを編集し、本番に影響を与えずにプレビュー環境で確認することができます。

今回はその流れを具体的に見ていきましょう。

ローカルで修正した内容をGitHub経由でテスト環境に反映する手順

ではここから具体的にローカルで修正した内容をGitHub経由でテスト環境に反映する手順について見ていきましょう。

まずはターミナルやコマンドプロンプトを使用し、Shopify CLIを使える状態にしておきます。

npm install -g @shopify/cli

テーマをクローンするディレクトリにcdコマンドで移動したら次にテーマをクローンします。

git clone https://github.com/あなたのユーザー名/shopify-theme.git
cd shopify-theme

Shopifyに接続するためのテストブランチ（例：dev）を作ります。

git checkout -b dev

ローカルで sections/ や templates/ などのファイルを編集します。

例えば以下では会社概要ページを修正しました。

sections/custom-page-company.liquid
templates/page.company.json

修正したらdevブランチにプッシュします。

※devブランチは開発用に使用されることが多いブランチです。

git add .
git commit -m "Testing company page section"
git push origin dev

Shopify管理画面 → オンラインストア > テーマ

右上「テーマを追加」→「GitHubから接続する」を押す

リポジトリ：shopify-theme
ブランチ：dev

最後に「テーマを追加」ボタンを押します。

これで 未公開のテストテーマ が作成されます（本番には影響はありません）

追加されたテーマの「...」メニューから「プレビュー」をクリック。

下記のようなURLが表示されます：

https://your-store.myshopify.com/?preview_theme_id=123456789

このURLに /pages/company を追加して確認します：

https://your-store.myshopify.com/pages/company?preview_theme_id=123456789

確認が取れたら、dev ブランチを main にマージして、本番テーマを更新しましょう。

git checkout main
git merge dev
git push origin main

Shopifyで main に連携されたテーマがある場合、自動で更新されます。

shopify theme dev

を使えば、ローカル環境で確認することができます。
ただしこの方法はGitHubには連携されません。開発中の動作確認用です。

冒頭にもお話しましたが、Wordpressのテーマ開発はしたことがあるけど、Shopifyはしたことがない！

という方もおられると思います。

そんな方のために改めて以下の表にWordpressとShopifyの違いをまとめましたのでご覧ください。

	WordPress	Shopify
環境の分離	テスト用に別ドメイン・サブドメインを構築可能	Shopifyでは1ストア＝1環境が基本（複数ストアは有料）
自由度	テスト用サーバーに本番そっくりの環境を構築できる	Shopifyでは未公開テーマを使って検証するスタイル
URL	テスト用独自ドメインをクライアントに共有できる	Shopifyは `?preview_theme_id=` 付きのURLを共有する
本番との切り替え	デプロイ or DB移行などで本番に反映	テーマを「メインテーマとして設定」すれば本番化

いかがでしたでしょうか。

Shopifyのテーマ開発はWordpressに慣れていると最初は違いに戸惑うかもしれませんが、Shopifyの仕組みを理解したり慣れてくればなんなく使いこなせるかと思います。

以下にテストブランチから本番反映までの流れをまとめましたので、改めておさらいになれば嬉しいです。

作業内容	コマンド・操作
テストブランチ作成	`git checkout -b dev`
修正 → push	`git add .` → `git commit` → `git push origin dev`
テーマをShopifyに接続	「GitHubから追加」で `dev` を選択
テスト表示	`?preview_theme_id=` を付けたURLで確認
本番反映	`main` にマージしてpush