# コレクションページでオプション（バリエーション）一覧を出力するコードが存在しますか？

**URL:** <https://community.shopify.com/t/topic/224978>\
**Category:** 技術的なQ＆A\
**Created:** [June 16, 2023, 4:50am UTC](https://community.shopify.com/t/topic/224978 "2023-06-16T04:50:12Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

ユーザーが、Shopifyで特定の購入導線を実装する方法について質問しています。

**想定している購入フロー:**
1. TOPページでシリーズを選択
2. 生地色を一覧から選択（コレクションページのような表示）
3. 商品詳細ページ（シリーズと生地色が既に選択済み）

**主な課題:**
- コレクションページでオプション（バリエーション）一覧を出力するコードが存在するか
- 生地色の画像付き選択を商品詳細ページで実装済みだが、生地色だけを一覧表示する画面の実現方法が不明

**解決策:**
回答者が、全てのオプションを取得するLiquidコードを提供しました。`collections.all.products`をループし、各商品の`variants`と`options`を取得する方法です。

**結果:**
質問者は提供されたコードを利用して対応できたと報告し、解決済みとなりました。

<div class="post-metadata">

**Author:** ![Nozomi\_desu](https://avatars.discourse-cdn.com/v4/letter/n/7c8e57/32.png) [@Nozomi\_desu](https://community.shopify.com/u/Nozomi_desu)\
**Post date:** [June 16, 2023, 4:50am UTC](https://community.shopify.com/t/topic/224978/1 "2023-06-16T04:50:12Z")

</div>

こんにちは。

今現在、以下のような仕様でサイト構築を進めており、不明点があるため、ご教示いただきたいです。

＜想定購入導線＞

①TOPページからシリーズ選択

**②シリーズ選択の後、生地色の選択**

③商品詳細ぺージ（ここでシリーズと生地色がすでに選択されている状態）

特に **②の生地色選択画面** では、生地色が選びやすいように、Shopifyのコレクション一覧ページのように色柄が一覧化されたページとして表示させたいです。

商品詳細画面ではアプリを使用の上、生地色柄を画像付きで選択ができることがわかったのですが、この生地色柄だけが表示されている一覧画面の実現は可能でしょうか？

オプション（バリエーション）一覧を出力するコードのようなものが存在すれば、こちらでコードを書くことで実現可能ではと考えております。

他に良い方法があるのをご存じの場合はぜひ教えていただきたいです。

何卒宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [June 16, 2023, 9:05am UTC](https://community.shopify.com/t/topic/224978/2 "2023-06-16T09:05:53Z")

</div>

Nozomi\_desu様

ご質問を確認いたしました。

全てのオプションの取得は以下のコードで可能です。

```markup
{% for product in collections.all.products %}
  {% for variant in product.variants %}
    {% assign displayedOptions = '' %}
    {% for option in variant.options %}
      {% unless displayedOptions contains option %}
        

{{ option }}

        {% assign displayedOptions = displayedOptions | append: option | append: ',' %}
      {% endunless %}
    {% endfor %}
  {% endfor %}
{% endfor %}

```

ご参考までに。

---

<div class="post-metadata">

**Author:** ![Nozomi\_desu](https://avatars.discourse-cdn.com/v4/letter/n/7c8e57/32.png) [@Nozomi\_desu](https://community.shopify.com/u/Nozomi_desu)\
**Post date:** [June 17, 2023, 9:40pm UTC](https://community.shopify.com/t/topic/224978/3 "2023-06-17T21:40:21Z")

</div>

ご回答ありがとうございました！

いただいたコードを利用して、対応してみます！