# Topページにバリエーション（オプション）毎に商品を表示したい

**URL:** <https://community.shopify.com/t/top/183254>\
**Category:** 技術的なQ＆A\
**Created:** [January 13, 2023, 5:16am UTC](https://community.shopify.com/t/top/183254 "2023-01-13T05:16:11Z")\
**Posts on this page:** 9\
**Page:** 1

## AI-generated summary

Shopify初心者が、TOPページでバリエーション（オプション）ごとに商品を表示し、商品タイトルを「商品名 バリエーション名」（例：Tシャツ 赤）の形式にする方法を質問。

**解決プロセス：**
- 最初の回答で基本的なLiquidコードが提示されたが、質問者は特定のコレクションに属する商品のバリエーションを表示したいと追加要望
- `collections['コレクション名']`を使用したコードで何も表示されない問題が発生
- `additions.products`を使用する必要があることが判明し、修正されたコードで解決

**最終的なコード構造：**
```
{% assign additions = collections['terminal'] %}
{% for product in additions.products %}
  {% for variant in product.variants %}
    {{ product.title }} {{ variant.title }}
    {{ variant.compare_at_price }}
  {% endfor %}
{% endfor %}
```

**新たな質問：**
別のユーザーが関連質問として、複数のオプション（カラー、サイズなど）がある場合に、特定のオプション（カラーのみ）を表示させる方法について質問中。現在未解決。

<div class="post-metadata">

**Author:** ![takumakuta](https://avatars.discourse-cdn.com/v4/letter/t/7ab992/32.png) [@takumakuta](https://community.shopify.com/u/takumakuta)\
**Post date:** [January 13, 2023, 5:16am UTC](https://community.shopify.com/t/top/183254/1 "2023-01-13T05:16:11Z")

</div>

shopify初心者です。

TOPページにバリエーション（オプション）毎に商品を表示したいのですが、

うまくいきません。

またその際、商品タイトルは「商品名 バリエーション名」としたいです。

例：Tシャツ 赤

初歩的な質問で申し訳ございませんが、

よろしくお願いします。

 ![takumakuta_0-1673586379713.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/a/8/a8bbc41a64d33f4c4650da7b279fb4edd9c0c042.png)

```auto
<ul>
{% for variant in product.variants %}
<li>
<img src="{{ variant.image | img_url }}">
<p>{{ variant.title }}</p>
<p>{{ variant.compare_at_price | money }}</p>
</li>
{% endfor %}
</ul>

```

---

<div class="post-metadata">

**Author:** ![Simonsron](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/simonsron/32/258102_2.png) [@Simonsron](https://community.shopify.com/u/Simonsron)\
**Post date:** [January 13, 2023, 9:26am UTC](https://community.shopify.com/t/top/183254/2 "2023-01-13T09:26:13Z")

</div>

```markup

{% for variant in product.variants %}
- {{product.title | append:" - " | append:variant.title}}

  {{ variant.compare_at_price | money }}

{% endfor %}

```

---

<div class="post-metadata">

**Author:** ![ogasawarakyohei](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/ogasawarakyohei/32/28415_2.png) [@ogasawarakyohei](https://community.shopify.com/u/ogasawarakyohei)\
**Post date:** [January 15, 2023, 1:58pm UTC](https://community.shopify.com/t/top/183254/3 "2023-01-15T13:58:42Z")

</div>

細かいですが補足です。

Simonsronさんの回答でOKですが、

> またその際、商品タイトルは「商品名 バリエーション名」としたいです。\> \> 例：Tシャツ 赤

ということなので、appendする文字列を部分を少し修正して

```markup

{% for variant in product.variants %}
- {{ product.title | append: " " | append: variant.title }}

  {{ variant.compare_at_price | money }}

{% endfor %}

```

とすると意図通りに表示されると思います。

---

<div class="post-metadata">

**Author:** ![takumakuta](https://avatars.discourse-cdn.com/v4/letter/t/7ab992/32.png) [@takumakuta](https://community.shopify.com/u/takumakuta)\
**Post date:** [January 16, 2023, 1:45am UTC](https://community.shopify.com/t/top/183254/4 "2023-01-16T01:45:45Z")

</div>

Simonsron様

KyoheiOgasawara様

ご返信ありがとうございます！

質問が五月雨になってしまい申し訳ございません。

「あるコレクションに属する商品のバリエーション」を出力したいため、

いただいた内容に変数を導入したのですが、何も表示されず。。。

```markup
{% assign addition = collections['コレクション名'] %}

{% for variant in addition.variants %}
- {{ product.title | append: " " | append: variant.title }}

  {{ variant.compare_at_price | money }}

{% endfor %}

```

出力方法を教えていただけますでしょうか？

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

---

<div class="post-metadata">

**Author:** ![Simonsron](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/simonsron/32/258102_2.png) [@Simonsron](https://community.shopify.com/u/Simonsron)\
**Post date:** [January 16, 2023, 1:53am UTC](https://community.shopify.com/t/top/183254/5 "2023-01-16T01:53:50Z")

</div>

```markup
{% assign addition = collections['コレクション名'] %}

{% for product in addition %}
{% for variant in product.variants %}
variant.......
{% endfor %}
{% endfor %}

```

---

<div class="post-metadata">

**Author:** ![takumakuta](https://avatars.discourse-cdn.com/v4/letter/t/7ab992/32.png) [@takumakuta](https://community.shopify.com/u/takumakuta)\
**Post date:** [January 17, 2023, 1:45am UTC](https://community.shopify.com/t/top/183254/6 "2023-01-17T01:45:35Z")

</div>

Simonsron様

ありがとうございます。

いただいたタグを追記したのですが、表示されず。。。

下記実際のコードです。

```markup
{% assign additions = collections['terminal'] %}

{% for product in additions %}
{% for variant in product.variants %}
- {{ product.title | append: " " | append: variant.title }}

  {{ variant.compare_at_price | money }}

{% endfor %}
{% endfor %}

```

---

<div class="post-metadata">

**Author:** ![Simonsron](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/simonsron/32/258102_2.png) [@Simonsron](https://community.shopify.com/u/Simonsron)\
**Post date:** [January 17, 2023, 1:47am UTC](https://community.shopify.com/t/top/183254/7 "2023-01-17T01:47:23Z")

</div>

```markup
{% assign additions = collections['terminal'] %}

{% for product in additions.products %}
{% for variant in product.variants %}
- {{ product.title | append: " " | append: variant.title }}

  {{ variant.compare_at_price | money }}

{% endfor %}
{% endfor %}

```

Oh! Sorry!

Try this!

---

<div class="post-metadata">

**Author:** ![takumakuta](https://avatars.discourse-cdn.com/v4/letter/t/7ab992/32.png) [@takumakuta](https://community.shopify.com/u/takumakuta)\
**Post date:** [January 18, 2023, 12:54am UTC](https://community.shopify.com/t/top/183254/8 "2023-01-18T00:54:32Z")

</div>

Dear Mr. Simonsron

It’s done!  
Thank you so much!

---

<div class="post-metadata">

**Author:** ![SHOKO0016](https://avatars.discourse-cdn.com/v4/letter/s/a5b964/32.png) [@SHOKO0016](https://community.shopify.com/u/SHOKO0016)\
**Post date:** [September 29, 2023, 2:55pm UTC](https://community.shopify.com/t/top/183254/9 "2023-09-29T14:55:40Z")

</div>

関連した質問をしたく、恐縮ですがこちらから失礼致します。

こちらの例のようにバリエーション（オプション）毎に商品を表示したいのですが、

私の場合、「カラー」のバリエーションのみを表示させたいです。

サイズなど他のオプションについては、無視したいのですが、どのように記述すればよろしいでしょうか。

商品：Tシャツ

カラー 赤,青

サイズ S,M,L

という商品がある場合には、Tシャツの赤とTシャツの青2種類を並べるイメージです。