1. Shopifyのテスト環境とは？
Shopifyを運用する際、本番環境で直接変更を加えると、デザイン崩れやバグの発生、誤操作による影響が出る可能性があります。特に、カスタマイズや新機能の導入時には、事前にテスト環境で検証することが重要です。
💡 テスト環境を作るメリット
✅ 本番ストアに影響を与えずに安全に開発できる
✅ デザイン変更や機能追加を事前にプレビューできる
✅ Gitを活用してバージョン管理ができる
✅ バグや誤った設定変更を未然に防ぐ
本記事では、Shopifyで安全に開発を進めるための「テスト環境の作成方法」を解説します。
2. Shopifyのテスト環境の作り方｜3つの選択肢
✅ 方法① テーマを複製してテスト（おすすめ）
Shopifyの管理画面でテーマを複製し、テスト用テーマを作成する方法です。最も簡単で本番環境に影響を与えません。
メリット
- 管理画面から簡単に作成・削除できる
- 実際の本番データを使用できる
デメリット
- テーマ設定（カスタマイズ）がコピーされない場合がある
✅ 方法② 開発ストアを作成（大規模開発向け）
Shopifyの開発ストアを作成し、本番とは完全に分離した環境で開発する方法です。
メリット
- 本番環境とは完全に分離
- アプリや新機能のテストに最適
デメリット
- 商品や顧客データが本番と異なる
- 一部の有料アプリは開発ストアで利用できない
✅ 方法③ ローカル環境で開発（Shopify CLI）
Shopify CLIを使ってローカル環境で開発を行う方法です。
Shopify CLIとは？
Shopify CLI（コマンドラインインターフェース）は、Shopifyテーマやアプリの開発を効率化するためのツールです。これを使うことで、ローカル環境でテーマの編集やテストを行い、リアルタイムプレビューをしながら開発できます。
メリット
- Gitを活用しながら開発できる
- ローカルで編集し、即時反映が可能
デメリット
- CLIのセットアップが必要
3. Shopifyの「テーマ複製」でテスト環境を作る方法（おすすめ）
1️⃣ Shopifyの管理画面でテーマを複製
- Shopify管理画面 → 「オンラインストア」 → 「テーマ」
- 「•••（アクション）」→「複製」 をクリック
- 複製したテーマの名前を「Test Theme」などに変更
- 「カスタマイズ」メニューでデザイン変更をテスト
- 「プレビュー」で確認し、本番適用せずテスト
2️⃣ settings_data.json をコピーして設定を反映
テーマのカスタマイズ設定は config/settings_data.json に保存されているため、これをコピーして適用します。
- Shopify CLI でログイン：
shopify login --store my-store - 本番テーマの設定データを取得：
shopify theme pull --theme 本番テーマID --config-only - テストテーマに適用：
shopify theme push --theme テストテーマID --config-only
これで テストテーマに本番と同じ設定を反映 できます。
4. 【応用】 Shopify CLIを使ってローカル開発する
事前にインストールしておくべきツール
Shopify CLI を使用するために、以下のツールを事前にインストールしてください。
- Git（バージョン管理システム）
- Node.js（Shopify CLI の実行に必要）
- Homebrew（Mac のパッケージ管理ツール）
- Ruby（一部の機能で必要）
- Bundler（Windows環境で必要）
1️⃣ Shopify CLIのインストール
Mac
brew tap shopify/shopify
brew install shopify-cli
Windows
npm install -g @shopify/cli @shopify/theme
2️⃣ ローカル環境でテーマを取得
shopify login --store my-store
shopify theme pull --theme テストテーマID
3️⃣ ローカルで編集し、テスト環境へ反映
shopify theme push --theme テストテーマID
4️⃣ 開発環境でリアルタイムプレビュー
shopify theme dev
- ローカルで編集 → 開発テーマに即時反映
- プレビューURLを使ってデザイン変更を確認可能
5. 【本番適用】 テスト環境での確認が完了したら
🚀 shopify theme dev で編集したページの内容（テンプレート・セクションの変更）を反映する方法
💡 shopify theme dev は仮想環境のため、通常の theme push では変更が反映されない場合があります。
特に 「ページの内容を編集した」 という場合、次の方法で テストテーマや本番環境に適用 できます。
✅ 1. shopify theme dev で行った変更を確認
開発テーマ (shopify theme dev) で行った変更には 2種類 あります。
| 変更内容 | 適用方法 |
|---|---|
| コード変更（.liquid, .css, .jsなど） | shopify theme push で適用 |
| ページやセクションのカスタマイズ（管理画面の「カスタマイズ」編集） | settings_data.json を適用 |
🔹 管理画面のカスタマイズ（テキスト・画像・ページ編集など）は settings_data.json に保存されるため、shopify theme push では反映されない。
👉 そのため、手動で settings_data.json をプッシュする必要があります。
✅ 2. ローカルに theme dev の変更を取得
開発テーマの IDを確認 して、ローカルにデータをダウンロードします。
① 開発テーマのIDを確認
shコピーする編集するshopify theme list
🔹 出力例
pgsqlコピーする編集するID ROLE THEME NAME
123456 live Current Theme
987654 preview Test Theme
876543 unpublished Development Theme
👉 876543 （unpublished になっている開発テーマ） が shopify theme dev で使っていたもの。
② 開発テーマのファイルを取得
shコピーする編集するshopify theme pull --theme 876543
🔹 これで shopify theme dev のファイルがローカルにダウンロード されます。
✅ 3. テストテーマ & 本番テーマに適用
開発テーマで行った変更を テスト環境・本番環境にアップロード します。
📌 テスト環境にプッシュ
shコピーする編集するshopify theme push --theme 987654
🔹 987654 はテストテーマの ID に置き換えてください。
👉 テスト環境で デザイン・ページの内容が正しく反映されているか 確認！
📌 本番環境にプッシュ
問題なければ、本番テーマ（123456）に適用。
shコピーする編集するshopify theme push --theme 123456 --allow-live
🔹 123456 は本番テーマの ID に置き換えてください。
✅ 4. settings_data.json も適用（カスタマイズ内容の反映）
「管理画面でのカスタマイズ（テキスト変更・画像設定など）」がある場合、settings_data.json も適用します。
shコピーする編集するshopify theme push --theme 987654 --only=config/settings_data.json
👉 テストテーマ（987654）に適用した後、確認してOKなら本番へ適用！
shコピーする編集するshopify theme push --theme 123456 --only=config/settings_data.json --allow-live
🔹 これで、管理画面での編集内容も本番に反映されます！
6. まとめ｜テスト環境を活用して安全にShopify開発を！
✅ Shopifyの本番環境を守るために テスト環境を用意
✅ テーマを複製するのが最も簡単で実用的
✅ Shopify CLIを活用すると、ローカル開発もスムーズ
✅ 本番適用前にしっかりプレビュー確認
✅ Gitでバージョン管理すると、リリース管理が楽になる
Shopifyの開発やデザイン変更を行う際は、必ずテスト環境を活用し、安全に進めましょう！
