# カラーバリエーションがあることを「＋」マークなどで表示できるかどうか

**URL:** <https://community.shopify.com/t/topic/372251>\
**Category:** 技術的なQ＆A\
**Tags:** javascript\
**Created:** [November 8, 2024, 8:04am UTC](https://community.shopify.com/t/topic/372251 "2024-11-08T08:04:33Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

商品一覧ページで、各商品にカラーバリエーションが複数存在することを視覚的に示したいという質問です。

**希望する表示方法:**
- 「商品名+2」のような形式で、初期表示カラー以外にもバリエーションがあることを表示
- 参考として他社サイトの写真を添付予定だったが、実際には添付されていない

**提案された解決策:**
Qcoltd氏が以下のコードでバリエーション数を出力できると回答:
```
{{ product.variants | size }}
```

**実装方法:**
- 希望する箇所に「コード編集」でこのコードを埋め込む
- ただし、この解決策は未検証

**現状:** 具体的な実装結果や追加の質問はまだ投稿されておらず、議論は継続中と思われます。

<div class="post-metadata">

**Author:** ![sasa2022](https://avatars.discourse-cdn.com/v4/letter/s/ecd19e/32.png) [@sasa2022](https://community.shopify.com/u/sasa2022)\
**Post date:** [November 8, 2024, 8:04am UTC](https://community.shopify.com/t/topic/372251/1 "2024-11-08T08:04:33Z")

</div>

商品ページのトップページで複数の商品を表示しているのですが、  
個々の商品にカラーバリエーションがあることをそのトップページのところで  
例）「商品名＋2」などを表示して初期表示カラー以外にもバリエーションがあることを視覚的に見せることは  
可能ですか？※他社サイトの参考写真を添付します。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [December 26, 2024, 6:34am UTC](https://community.shopify.com/t/topic/372251/2 "2024-12-26T06:34:20Z")

</div>

@sasa2022 様

他社サイトの参考写真が添付されていなかったようですので、

メッセージから推測しての回答になります。

商品のバリエーションの数は下記のコードで出力できるはずです。(検証はしておりません。)

```markup
{{ product.variants | size }}

```

ご希望の箇所に「コード編集」で埋め込んでいただくと良いかと思います。

ご参考まで。

(キュー田辺)