コレクションページに在庫数を表示したい

Topic summary

ユーザーがShopifyのコレクションページに在庫数を表示したいと質問。Dawnテーマを使用しているが、過去の参考記事を元に編集しても在庫数が表示されない状況。

解決方法:
EijiSaitoが具体的な手順を提示:

  • snippetsフォルダ内のcard-product.liquidを開く
  • 207行目の商品価格表示コードの下に、在庫数表示用のコード {{ card_product.first_available_variant.inventory_quantity | default: '0' }} を追加
  • スクリーンショット付きで実装例を提示

結果:
質問者が無事に在庫数の表示に成功し、解決済み。具体的なコード例と画像による説明が問題解決に有効だった事例。

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.

お世話になっております。

商品ページ内だけではなく、コレクションページにも在庫数を表示したいと思っております。

以下の質問を参考に、「main-collection-product-grid」を編集しました。

コレクションページに表示される商品に在庫数量も併記したい
https://community.shopify.com/post/2005841

使用しているテーマはDawnで、 {%- for product in collection.products -%}のセクションに記載したのですが、うまく表示されません。(画像の上に数字だけ表示されるなど)

理想としては、在庫数 XX 枚というような表記ができるようにしたいです。

表示場所はこの「売り切れ」と「価格」の間がいいなと思っております。

どなたかご教示いただけますと幸いです。

はじめまして

株式会社UnReactの齊藤と申します。

以下の手順で Dawn の商品一覧に在庫数を表示されるかと思います。

  1. snippets フォルダの card-product.liquid を開きます。
  2. 207 行目に商品価格を表示するコードがあるので、その下に {{ card_product.first_available_variant.inventory_quantity | default: ‘0’ }} を追加します。
  3. ストアに在庫数が表示されます。

はじめまして

株式会社UnReactの齊藤と申します。

以下の手順で Dawn の商品一覧に在庫数を表示できるかと思います。

  1. snippets フォルダの card-product.liquid を開きます
  2. 207 行目に商品価格を表示するコードがあるのでその下に、在庫数:{{ card_product.first_available_variant.inventory_quantity | default: ‘0’ }} を追加します
  3. ストアの商品一覧に在庫数が表示されます。

ご丁寧にスクリーンショットまでありがとうございます!

無事に在庫数が表示されました。本当に助かりました。

またご縁があればお助けいただければと存じます。

1 Like