Shopifyの商品写真は、どの1枚を主役にするか・どんな順番で見せるかで購入率が大きく変わります。そこでテーマ「Horizon」で、商品ギャラリーの写真・動画を丸ごと別バージョンに差し替えられるようにし、Shopifyの「ロールアウト（Rollouts）」で訪問者を50%ずつ振り分けて、どちらの写真が売れるかを実データで比較する方法です。
商品メタフィールドに「もう一方のメディア一式」を登録し、ロールアウトの処理（Bパターン）側でテーマ設定のスイッチをオンにするだけ。写真以外はまったく同一の条件でA/Bテストできます。
👉 実際の表示は、以下のデモストアで確認できます（テーマ設定オンでメタフィールドの写真に切り替わった状態）。
horizon-store-coffee.myshopify.com/products/ethiopia-yirgacheffe
ストアパスワード：storedojo
仕組み
Horizonの商品ギャラリー（商品ページ・商品カード）は、内部で1つのメディア配列を組み立てて表示しています。テーマ設定 ab_test_use_alt_media がオンのとき、この配列を商品メタフィールド custom.ab_media（写真・動画のリスト）に丸ごと差し替えます。差し替えるのは「表示するメディア」だけなので、ズームやスライドショー、バリエーション切り替えはそのまま動きます。
【設定手順①】商品メタフィールド「ABメディア」を作成
◆Shopify管理画面 → 設定 → カスタムデータ → 商品 → 「定義を追加」
・名前：ABメディア（ネームスペースとキー：custom.ab_media）
・タイプ：「リスト」＋「ファイル」
・許可するファイルタイプ：メディアファイルのみ（画像・動画）
【設定手順②】各商品に差し替え用のメディアを登録
テスト対象の商品の編集ページ下部「メタフィールド → ABメディア」に、もう一方のパターンの写真・動画を登録します。表示したい順番もここで指定できます。
※メタフィールド未登録の商品は通常メディアのまま表示されるので安全です。
テーマにコードを追記する（3ファイル）
差し替えの本体です。以下の3ファイルにコードを追記します（コードは購入後にすべて表示されます）。
・snippets/product-media-gallery-content.liquid … 商品ページのギャラリー全体
・snippets/card-gallery.liquid … コレクション等の商品カード
・config/settings_schema.json … テーマ設定のオン/オフスイッチ
【設定手順③】ロールアウト（Rollouts）でA/Bテストを設定
Shopifyのロールアウト（Rollouts）で、公開テーマを「コントロール」と「処理」に分けてA/Bテストを設定します。
・コントロール：元のテーマ（Aパターン）。何も変更しません。
・処理：テーマのコピーを割り当てます（次の手順④でスイッチをオンにします）。
配信割合はそれぞれ50%に設定すれば、写真以外はまったく同一の条件で比較できます。
※ロールアウトはBasicプラン以上、A/Bテスト（実験・計測）はGrowプラン以上で利用できます。詳細はShopifyヘルプ（Rollouts）を参照してください。
【設定手順④】処理（Bパターン）側でテーマ設定のスイッチをON
ロールアウトの処理（Bパターン）に割り当てたテーマで、「テーマエディタ → テーマ設定 → 『A/Bテスト（商品メディア）』 → 『ABメディアに差し替える』」をオンにします。
こうすると、コントロール（A）は元の写真のまま、処理（B）のときだけ、その商品のメタフィールドに設定した写真・動画に差し替わった状態になります。
【設定手順⑤】結果を計測してどちらの写真が勝ったか判定
ロールアウトの結果画面で、コントロール（A）と処理（B）を主要指標で比較します。コンバージョン率・カート追加率・チェックアウト到達率・直帰率などを見て、購入につながった写真パターンを判定しましょう。
注意点
・差し替えるメディアは、元の写真と近い縦横比にするとレイアウトのズレ（CLS）を防げます。
・メタフィールドはファイル参照のため3Dモデルは対象外です（写真・動画のみ対応）。
・カートのサムネイルやSNSシェア画像（OGP）は通常の写真のままです。テストの純度を保つため、あえて差し替え対象から外しています。
