variant・option・selling_plan
バリエーションとオプションの構造を理解し、在庫・価格・販売プランの表示を実装できる
最終確認: 2026-09
解説
受託の現場でなぜ必要か: この回では、バリエーション(サイズや色などの組み合わせ)ごとに、在庫・価格・販売プランを表示できるようになります。
受託では「売り切れの色をグレーにしたい」「残り3点で『残りわずか』を出したい」という依頼を、この構造を知っていれば書けます。
variantとは、バリエーション1つ分の情報
title / price / compare_at_price / available / sku / barcode / image / options / urlを持ちます。option1〜option3は非推奨なので、新しく書くコードではoptionsとproduct.options_with_valuesを使います。inventory_policyがcontinueなら、在庫が0でも売れます。
在庫の数はどう扱うか
inventory_quantityは、在庫追跡が有効なとき(inventory_managementがnilでないとき)だけ意味を持ちます。
追跡していないバリエーションでは販売数が返るので、inventory_management != blankで囲んでから判定します。
在庫数をそのまま公開するかは店の方針で、数量を見せたくないクライアントもいます。
「残りわずか」のように、しきい値だけ出す形が無難です。
options_with_valuesとは、選択肢の元データ
オプション名(サイズ・カラー)と値の一覧が入ります。
セレクタ(プルダウンやボタンで選ぶUI)は、これを回して作ります。
値ごとのavailableで、グレーアウト(選べない値を薄く出すこと)の判定ができます。
対応範囲は公式で確認してください。
発展:単価・重量とselling_plan
100gあたりの価格などはunit_price / unit_price_measurement、重さはweight / weight_unitにあります。selling_planは、定期購入や予約販売のプランです。product.selling_plan_groups、variant.selling_plan_allocations、product.requires_selling_planで参照します。
アプリが用意したデータを、テーマが表示する構造です。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。