# コレクションページにバリエーションを表示する方法 **URL:** \ **Category:** 技術的なQ＆A\ **Created:** [July 6, 2022, 2:50am UTC](https://community.shopify.com/t/topic/133115 "2022-07-06T02:50:52Z")\ **Posts on this page:** 5\ **Page:** 1 ## AI-generated summary ShopifyのDawnテーマで、コレクションページの価格上にオプション「入数」（1個・5個・10個など）を表示したい要望。既存のフォーラムコードは表示されず、在庫状況に関わらず全バリエーションを出したい条件。 提案はLiquidのproduct.options_by_nameを利用してオプション値を取得し、joinフィルタで整形表示する方法。options_by_nameはオプション名で値配列を参照でき、joinは値の間に任意の文字列を挿入する。コード例が理解の中核。 例コード: この商品には{{ product.options_by_name['入数'].values | join: '個、' }}個入りがある。これで「1個、5個、10個入り」と連結表示でき、在庫による除外は行わない。カラーオプション例（valuesの列挙）も参考として提示。 挿入箇所はcard-product.liquid内で{% render 'price' %}と同じ位置で問題ないとの確認。依頼者はこれから実装を試す段階で、動作確認・解決報告はまだなく、議論は継続中。
**Author:** ![nayao](https://avatars.discourse-cdn.com/v4/letter/n/3ab097/32.png) [@nayao](https://community.shopify.com/u/nayao)\ **Post date:** [July 6, 2022, 2:50am UTC](https://community.shopify.com/t/topic/133115/1 "2022-07-06T02:50:52Z")
テーマはDawnを使用しています。 コレクションページの商品価格の上に、オプション「入数」のバリエーションを表示して、 「この商品には1個、5個、10個入りがある」ということを示したいです。 card-product.liquidの {% render ‘price’ %}の上あたりに追記が必要だと思うのですが、 下記のディスカッションを参考に試してみましたが、全く表示されません。 [https://community.shopify.com/post/1241482](https://community.shopify.com/post/1241482) [https://community.shopify.com/c/technical-q-a/product-variations-display/m-p/537977](https://community.shopify.com/c/technical-q-a/product-variations-display/m-p/537977) ちなみに、一つ目のリンクのコードでは売り切れのバリエーションは表示しない条件分岐がありますが（多分・・）、在庫状況にかかわらず表示は出したいです。 アドバイスいただけると助かります。よろしくお願いいたします。 ---
**Author:** ![st\_mh](https://avatars.discourse-cdn.com/v4/letter/s/f9ae1b/32.png) [@st\_mh](https://community.shopify.com/u/st_mh)\ **Post date:** [July 6, 2022, 5:44am UTC](https://community.shopify.com/t/topic/133115/2 "2022-07-06T05:44:23Z")
商品情報からオプションを参照し、表示させる方法は「options\_by\_name」が合致するものと思います。 （参考）[https://shopify.dev/api/liquid/objects#product](https://shopify.dev/api/liquid/objects#product) **[例文]** 例えば、私の管理サイトでは、商品にオプション「カラー」を設定しています。 出力方法はいくつかあり、簡単な方法は以下です。 ```markup {% for value in product.options_by_name['カラー'].values %} {{ value }} {% endfor %} または {{ product.options_by_name['カラー'].values }} ↓↓ ブラック ホワイト グリーン etc ``` （例はテキストを並べるだけ） おそらく、オプション「入数」にも複数の値が設定されるかと思います。 また表示結果の文字列に手を加える必要もあります。 - （表示結果）1 **個、5個、10個** - 個数の間に「個、」という文字を追加 - かつ最後の個数の後は「個」と表記 **[対処法]** ```markup この商品には{{ product.options_by_name['入数'].values | join: '個、' }}個入りがある ``` 1. 簡潔に、目的のオプションの配列をフィルタ付きで出力します。 2. フィルタ「| join: ‘文字列’」で、値の間に任意の文字列を追加します。 3. 最後の要素の後には何も追加されませんので、別途記述しておきます。 ---
**Author:** ![nayao](https://avatars.discourse-cdn.com/v4/letter/n/3ab097/32.png) [@nayao](https://community.shopify.com/u/nayao)\ **Post date:** [July 6, 2022, 7:06am UTC](https://community.shopify.com/t/topic/133115/3 "2022-07-06T07:06:39Z")
早速のご返信ありがとうございます。 挿入する場所としては、card-product.liquid でいいのでしょうか。 ---
**Author:** ![st\_mh](https://avatars.discourse-cdn.com/v4/letter/s/f9ae1b/32.png) [@st\_mh](https://community.shopify.com/u/st_mh)\ **Post date:** [July 6, 2022, 7:42am UTC](https://community.shopify.com/t/topic/133115/4 "2022-07-06T07:42:12Z")
同じ状況にないもので、確実なことが言えまないのですが、少なくとも{% render ‘price’ %}と同じ場所で大丈夫です。 つまりcard-product.liquidですね。 ---
**Author:** ![nayao](https://avatars.discourse-cdn.com/v4/letter/n/3ab097/32.png) [@nayao](https://community.shopify.com/u/nayao)\ **Post date:** [July 7, 2022, 12:55am UTC](https://community.shopify.com/t/topic/133115/5 "2022-07-07T00:55:12Z")
ありがとうございます！やってみます。