商品ページ②：バリエーション選択と動的更新
オプションUIを実装し、選択に応じて価格・在庫・画像・URLを更新できる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、サイズや色を選ぶと価格・在庫・画像が切り替わる仕組みを作れるようになります。
受託では改修依頼がここに集中し、特定を間違えると「表示は正しいのに別の商品がカートに入る」事故になります。
バリエーションのデータはどこから取るか
オプション（サイズや色の選択肢）のUIは、product.options_with_valuesで描きます。
バリエーションの一覧は、product.variantsを| jsonで埋め込むか、/products/{handle}.jsをfetchして取ります。
初期表示はproduct.selected_or_first_available_variantにします。
選んだ組み合わせをどう1件に絞るか
各バリエーションはoptionsという配列を持ち、オプションの並び順どおりに値が入っています。
選択値の配列と全要素が一致するものが、その組み合わせのバリエーションです。
一致するものが無い組み合わせは存在しないので、nullになります。
特定できたら、購入フォームのhidden inputにidを入れます。
表示を更新してもhidden inputを忘れると、見た目と実際に売れるものがずれます。
選択のたびに更新する項目は4つ
価格（price）・在庫（available）・画像・URLの4つです。
画像はfeatured_mediaのidで、ギャラリーを切り替えます。
URLはhistory.replaceStateで?variant=を付けます。
URLを更新しておくと、その状態のページを共有できます。
発展：Section Renderingという選択肢
?variant=ID§ion_id=...でサーバーに再描画させ、価格やボタンのHTMLだけを差し替える方法もあります。
通貨の書式や翻訳をサーバー側に任せられるので、多通貨・多言語のストアではこちらが安全です。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。