# 特定のコレクションを○件表示したい

**URL:** <https://community.shopify.com/t/topic/14360>\
**Category:** 技術的なQ＆A\
**Created:** [June 12, 2020, 2:47pm UTC](https://community.shopify.com/t/topic/14360 "2020-06-12T14:47:08Z")\
**Posts on this page:** 6\
**Page:** 1

## AI-generated summary

ShopifyのLiquidで、index.liquid上に特定コレクションの商品を指定件数だけ表示する方法が議論された。結論として、`for`タグに`limit:6`のような引数を付ける方法が提示され、単純な`product.title`出力では期待どおり件数制御できることが確認された。

ただし、実際の実装では`include 'product-card-grid'`を使っており、`limit`を付けても全件表示のままだったため、原因切り分けとしてスニペットではなくタイトルを直接出力して確認する案が出た。あわせて、Liquidでは`break`でループを途中終了できることも案内された。

表示順の変更については、Shopify管理画面のコレクション設定での並び替え、またはLiquidの`sort`フィルタを使う方法が紹介された。売上順やタイトル順などが対象として挙げられている。

最終的に、件数制御は`break`を使う方法で解決した。並び替えは管理画面側で試す予定で、主要な問題はおおむね解決している。

<div class="post-metadata">

**Author:** ![toyome](https://avatars.discourse-cdn.com/v4/letter/t/4af34b/32.png) [@toyome](https://community.shopify.com/u/toyome)\
**Post date:** [June 12, 2020, 2:47pm UTC](https://community.shopify.com/t/topic/14360/1 "2020-06-12T14:47:08Z")

</div>

index.liquidで特定のコレクションを6件表示したいです。

```auto
{% assign collection = collections['hoge'] %}
{% for product in collection.products %}
  <a href="{{ product.url }}">{{ product.title }}</a>
{% endfor %}

```

こちらでコレクション（hoge）を出力していますが、件数の制御方法が分からず困っております。

ご存知のおられましたらご教授いただけますでしょうか。

---

<div class="post-metadata">

**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\
**Post date:** [June 15, 2020, 7:02am UTC](https://community.shopify.com/t/topic/14360/2 "2020-06-15T07:02:14Z")

</div>

以下のlimitを使えば可能かと思います。  
[https://shopify.dev/docs/themes/liquid/reference/tags/iteration-tags](https://shopify.dev/docs/themes/liquid/reference/tags/iteration-tags)

試していませんが、

```auto
{% for product in collection.products limit:6 %}

```

とかはどうでしょう？

Liquidについては、一度統合的に学習されると色々応用が効いてよろしいかと思います。  
[https://shopify.dev/docs/themes/liquid/reference](https://shopify.dev/docs/themes/liquid/reference)  
[https://www.shopify.jp/blog/partner-shopify-template-language-liquid-overview](https://www.shopify.jp/blog/partner-shopify-template-language-liquid-overview)

---

<div class="post-metadata">

**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\
**Post date:** [June 23, 2020, 9:47am UTC](https://community.shopify.com/t/topic/14360/3 "2020-06-23T09:47:25Z")

</div>

私のショップで実際に、Debut のindex.liquid を以下にようにしたところ、ご質問内容のように出力されました。

```auto
{{ content_for_index }}

{% assign collection = collections['frontpage'] %}
{% for product in collection.products limit:6 %}
<a href="{{ product.url }}">{{ product.title }}</a><br/>
{% endfor %}

```

上記のlimit:6 をlimit:3 にすると、3件になるので、ご期待の動作になっているかと思います。

---

<div class="post-metadata">

**Author:** ![toyome](https://avatars.discourse-cdn.com/v4/letter/t/4af34b/32.png) [@toyome](https://community.shopify.com/u/toyome)\
**Post date:** [June 23, 2020, 2:13pm UTC](https://community.shopify.com/t/topic/14360/4 "2020-06-23T14:13:31Z")

</div>

ご回答ありがとうございます。

いただいた回答通り試しましたが思った出力にならず、いまだ全件表示のままでした。

```auto
{% assign collection = collections['tops'] %}
{% for product in collection.products limit:3 %}
{% include 'product-card-grid', max_height: 400 %}
{% endfor %}

```

こちらが実際に記述しているコードになります。

for文を途中でbreakさせて、ループを止める方法も考えましたが

liquidでの抜け方が分からなかったため断念しました。

今はcssで○件以上は非表示としています。

また、別の質問にはなりますがこの中で表示順を変えることは可能でしょうか？

（売上順やアルファベット順など）

お手数おかけして大変恐縮ですがご回答いただけますと幸いです。

---

<div class="post-metadata">

**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\
**Post date:** [June 23, 2020, 2:45pm UTC](https://community.shopify.com/t/topic/14360/5 "2020-06-23T14:45:39Z")

</div>

ご回答ありがとうございます。

> いただいた回答通り試しましたが思った出力にならず、いまだ全件表示のままでした。

```auto
{% include 'product-card-grid', max_height: 400 %

```

この部分が私のコードと違いますが、まずは原因の切り分けのために、私のコード同様にproduct.titleを試しに出してみるのはどうでしょうか？

（Snipetのincludeに問題があるのか、for 文自体に問題があるのか）

ちなみにループの抜け方は以下となります。

[https://shopify.dev/docs/themes/liquid/reference/tags/iteration-tags](https://shopify.dev/docs/themes/liquid/reference/tags/iteration-tags)

コレクションのソートは、以下の方法で設定によって可能です。  
[https://help.shopify.com/ja/manual/products/collections/collection-layout#part-af4fe2072df0ce55](https://help.shopify.com/ja/manual/products/collections/collection-layout#part-af4fe2072df0ce55)

Liquidでやる場合は以下となります。

> **[Liquid filters: compact](https://shopify.dev/docs/api/liquid/filters/compact)**
>
> Removes any \`nil\` items from an array.

商品タイトル順やベストセラー順は上記の方法で対応可能です。

---

<div class="post-metadata">

**Author:** ![toyome](https://avatars.discourse-cdn.com/v4/letter/t/4af34b/32.png) [@toyome](https://community.shopify.com/u/toyome)\
**Post date:** [June 24, 2020, 6:35am UTC](https://community.shopify.com/t/topic/14360/6 "2020-06-24T06:35:48Z")

</div>

ループを抜ける方法でうまく出力ができました！

並び替えは管理画面の方から試してみようと思います。

丁寧にご回答いただきありがとうございました。