# バリエーションの一覧表示を重複しないようにしたい

**URL:** <https://community.shopify.com/t/topic/126540>\
**Category:** 技術的なQ＆A\
**Created:** [June 7, 2022, 9:09am UTC](https://community.shopify.com/t/topic/126540 "2022-06-07T09:09:53Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

複数オプションを持つ商品の一覧でバリエーションが重複表示される問題。タグ「not to be displayed separately」が付いた商品は非表示。例：Tシャツにカラー2色・サイズ3種で、options×variantsの二重ループにより12件表示。

実装状況：main-collectionのLiquidでproduct.optionsとproduct.variantsをネストして各variantを描画。単一オプションやタグ付きは通常のproduct描画。

提案：汎用ではなく「カラー」「サイズ」の2オプションに限定し、カラーのみを一意表示。
- 前提：カラーがvariant.option1に入る（=1番目のオプション）。
- 仕組み：variant_colorsに表示済みカラーを記録し、同じカラーはスキップ。
- カラー位置が不定なら、product.options内で「カラー」の位置を特定して処理を書き換える。
- 2オプション条件を満たさない場合は従来通り全バリエーションを表示。

補足：コードスニペットが中心。技術要素はShopifyのLiquidテンプレート、product.options/variants、レンダー部分テンプレート。

進捗：回答に対し感謝の返信あり。実装確認・汎用的解決は未了で、議論は継続中。

<div class="post-metadata">

**Author:** ![c-s](https://avatars.discourse-cdn.com/v4/letter/c/e9a140/32.png) [@c-s](https://community.shopify.com/u/c-s)\
**Post date:** [June 7, 2022, 9:09am UTC](https://community.shopify.com/t/topic/126540/1 "2022-06-07T09:09:53Z")

</div>

現在、バリエーション登録している商品を、商品一覧に表示されるように実装してあります。

※商品タグに「not to be displayed separately」を付けた場合は一覧表示されない。

この場合、オプションが1つのみであれば問題ないのですが、商品に複数のオプションがあると重複して表示されてしまいます。

例えば、Tシャツに「カラー（2色）」「サイズ（3サイズ）」あった場合

2×3+2×3＝12 で12のバリエーションが一覧として表示されます。

そのため、オプションが複数ある商品は、1つのオプションのみ一覧表示させる、

などの条件を加えたいです。

ご教授いただけたら幸いです。

よろしくお願いいたします。

## main-collectionに以下を記述

{% for product in collection.products %}  
{% assign variation = false %}  
{% assign variationsItem = false %}  
{% if product.tags contains ‘not to be displayed separately’ %}  
{% assign variationsItem = true %}  
{% endif %}

{% if product.variants.size \> 1 and variationsItem == false %}  
{% assign variation = true %}  
{% for option in product.options %}  
{% for variant in product.variants %}  
{% render ‘product-block-variant’,mainproduct:product, product: variant, custom\_aspect\_ratio: chosen\_aspect\_ratio, animate: true %}  
{% endfor %}  
{% endfor %}  
{% endif %}  
{% if variation == false %}  
{% render ‘product-block’, product: product, custom\_aspect\_ratio: chosen\_aspect\_ratio, animate: true %}  
{% endif %}  
{% endfor %}

{% endif %}

---

<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:** [June 10, 2022, 11:42am UTC](https://community.shopify.com/t/topic/126540/2 "2022-06-10T11:42:21Z")

</div>

汎用的な解決方法ではありませんが、

例で示されているように、

「カラー」と「サイズ」の2つのオプションがある場合にのみ回答いたします。

通常、「カラー」だけを表示されたいと思いますので、下記のようにされてはいかがでしょうか？

※動作確認はしておりません。

```markup
{% for product in collection.products %}
    {% assign variation = false %}
    {% assign variationsItem = false %}
    {% if product.tags contains 'not to be displayed separately' %}
        {% assign variationsItem = true %}
    {% endif %}

    {% if product.variants.size > 1 and variationsItem == false %}
        {% assign variation = true %}
        {% assign has_two_options = false %}
        {% if product.options contains 'カラー' and product.options contains 'サイズ' %}
            {% assign has_two_options = true %}
        {% endif %}
        {% if has_two_options %}
            {% for option in product.options %}
                {% if option.name == 'カラー' %}
                    {% assign variant_colors = '' %}
                    {% for variant in product.variants %}
                        {% unless variant_colors contains variant.option1 %}
                            {% render 'product-block-variant',mainproduct:product, product: variant, custom_aspect_ratio: chosen_aspect_ratio, animate: true %}
                            {% assign variant_colors = variant_colors | append: variant.option1 | append: ',' %}
                        {% endunless %}
                    {% endfor %}
                {% endif %}
            {% endfor %}
        {% else %}
            {% for variant in product.variants %}
                {% render 'product-block-variant',mainproduct:product, product: variant, custom_aspect_ratio: chosen_aspect_ratio, animate: true %}
            {% endfor %}
        {% endif %}
    {% endif %}
    {% if variation == false %}
        {% render 'product-block', product: product, custom_aspect_ratio: chosen_aspect_ratio, animate: true %}
    {% endif %}
{% endfor %}

```

- カラーとサイズ、2つのオプションを持つ時だけ特殊処理をします。

- optionの1つ目がカラーであることを前提としています。カラーが入る順番に応じて、

ご参考まで。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![c-s](https://avatars.discourse-cdn.com/v4/letter/c/e9a140/32.png) [@c-s](https://community.shopify.com/u/c-s)\
**Post date:** [June 10, 2022, 12:47pm UTC](https://community.shopify.com/t/topic/126540/3 "2022-06-10T12:47:42Z")

</div>

ご教示ありがとうございます！