{"product_id":"2026-06-15","title":"【Horizon】商品詳細画面にバリエーションごとの在庫一覧表を表示する方法","description":"\u003cp\u003e\u003cspan\u003eShopifyの商品はサイズやカラーなど1〜3種類のオプションを掛け合わせて最大100件のバリエーションを登録できますが、種類が多いと在庫を1つずつ確認するのは手間です。そこでテーマ「Horizon」で、商品ページにバリエーションごとの在庫一覧表を表示する方法です。すべての組み合わせが存在しない変則バリエーションにも対応します。\u003c\/span\u003e\u003c\/p\u003e\n\u003ch3\u003eテーマ「Horizon」で商品詳細画面にバリエーションごとの在庫一覧表を表示する方法（変則バリエーションにも対応）\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"完成イメージ：バリエーションごとの在庫一覧表\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-06-15_1.png?v=1781528645\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e【設定手順】商品詳細テンプレートの商品情報セクションにカスタムLiquidブロックを追加してコードを挿入\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"設定手順：商品情報にカスタムLiquidブロックを追加\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-06-15_2.png?v=1781528645\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cp\u003eHorizonの商品ページは「商品情報」セクションの中身がブロックで構成されています。テーマエディタで対象の商品テンプレートを開き、「詳細」内の「ブロックを追加」から「カスタムLiquid」を選んで、購入特典のコードを貼り付けてください。これだけでバリエーションごとの在庫数が表形式で表示されます。\u003c\/p\u003e\n\u003cp\u003eこのコードはDawn版とほぼ共通で、実質的な変更点は冒頭の1行だけです。Horizonではブロック内から商品を参照する際に closest.product を使うため、先頭で product を closest.product（無ければ素の product）に解決しています。これにより、以降の product.* の記述はDawn版とまったく同じで動作します。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cp\u003eDawnテーマ版のTIPSはこちら： \u003ca href=\"\/products\/2023-06-09\"\u003e商品詳細画面にバリエーションごとの在庫一覧表を表示する方法（Dawn）\u003c\/a\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":48979655229691,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-06-15.jpg?v=1781528686","url":"https:\/\/store-dojo.com\/products\/2026-06-15","provider":"STORE DOJO","version":"1.0","type":"link"}