# 商品一覧ページでの表示に関する質問です。

**URL:** <https://community.shopify.com/t/topic/26749>\
**Category:** 総合的なディスカッション\
**Created:** [December 1, 2020, 1:58pm UTC](https://community.shopify.com/t/topic/26749 "2020-12-01T13:58:27Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

商品一覧ページで、同一商品のカラーバリエーションを個別に見せて一覧を充実させたい、という相談。色ごとに別商品ページとして登録する方法は避けたい意向が示されている。

回答では、テーマファイル内の `product` オブジェクトにある `variants` を使い、商品ごとにバリエーションを `for` ループで回して表示する方法が提案された。`variants` は商品バリエーションの一覧を持つオブジェクトで、Liquid（Shopifyのテンプレート言語）で実装する前提。

提示された内容は概念的な擬似コードで、商品タイトルの下に各バリエーションのタイトルを出力する構成。画像や具体的な完成コードはなく、実装はテーマ編集が必要なやや技術的な対応とされている。

現時点では、質問者がこの方法を試してみる段階で終了。別のより簡単な方法があるかは未確定で、議論は継続余地あり。

<div class="post-metadata">

**Author:** ![Azu](https://avatars.discourse-cdn.com/v4/letter/a/8e8cbc/32.png) [@Azu](https://community.shopify.com/u/Azu)\
**Post date:** [December 1, 2020, 1:58pm UTC](https://community.shopify.com/t/topic/26749/1 "2020-12-01T13:58:27Z")

</div>

商品数が少ないストアを構築しているのですが、商品一覧ページが充実して見えるように多くの表示をさせたく思っております。

同商品でカラーバリエーションが2つあった場合、2つとも一覧ページに表示させる方法はありますでしょうか？

1色ずつ別ページで登録するのは避けたく思っております。分かりにくい説明で恐れ入りますが、お力添え頂けると大変助かります。

よろしくお願い申し上げます。

---

<div class="post-metadata">

**Author:** ![kogai](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/kogai/32/15337_2.png) [@kogai](https://community.shopify.com/u/kogai)\
**Post date:** [December 2, 2020, 2:45am UTC](https://community.shopify.com/t/topic/26749/2 "2020-12-02T02:45:53Z")

</div>

商品一覧のページのテーマファイルにproductオブジェクトを利用している箇所があると思います。

productにはvariants（商品バリエーションを表すオブジェクトのリスト）が生えていますので、こちらをforで回して描画すれば良いと思います。

[https://shopify.dev/docs/themes/liquid/reference/objects/product#product-variants](https://shopify.dev/docs/themes/liquid/reference/objects/product#product-variants)

擬似コードになりますが、以下のようなイメージです。

```markup
{%- for product in products -%}
    商品のタイトル {{ product.title }}
    {%- for variant in product.variants -%}
        バリエーションのタイトル {{ variant.title }}
    {%- endfor -%}
{%- endfor -%}

```

---

<div class="post-metadata">

**Author:** ![Azu](https://avatars.discourse-cdn.com/v4/letter/a/8e8cbc/32.png) [@Azu](https://community.shopify.com/u/Azu)\
**Post date:** [December 2, 2020, 7:11am UTC](https://community.shopify.com/t/topic/26749/3 "2020-12-02T07:11:17Z")

</div>

Kogaiさん

ご回答頂きありがとうございます！

少々専門的な方法ですが、試してみます。

他にも何か良い方法あれば、ご教授いただけると大変幸いです(.\_.)！