# 独自セクションの作り方について

**URL:** <https://community.shopify.com/t/topic/16684>\
**Category:** 技術的なQ＆A\
**Created:** [July 27, 2020, 7:14am UTC](https://community.shopify.com/t/topic/16684 "2020-07-27T07:14:32Z")\
**Posts on this page:** 8\
**Page:** 1

## AI-generated summary

Shopifyで、TOPページ向けに「指定タグの商品を件数指定で表示する独自セクション」を作れるかが主題です。質問者は、管理画面のテキスト入力でタグ名を指定し、該当商品の一覧や件数を出したいと相談しました。

回答ではまず、セクション自体はLiquidとschema（テーマ設定を定義する仕組み）で作成可能と案内されました。実装面では、collection.productsを参照し、product.tagsでタグ一致を判定する方法が提案されています。

途中で「collection.products は最大50件まで」という制限が論点になりましたが、質問者はpaginate（一覧を分割取得するLiquidタグ）を使えば50件超でも扱えると確認し、実装例を共有しました。

その後、より簡単な代替案として、タグ条件のコレクションを作成し、TOPページでは `collections['all-タグ名'].products_count` を使って件数表示できるとの補足がありました。議論は、複数の実装方法が整理された形で概ね解決しています。

<div class="post-metadata">

**Author:** ![tadasy](https://avatars.discourse-cdn.com/v4/letter/t/898d66/32.png) [@tadasy](https://community.shopify.com/u/tadasy)\
**Post date:** [July 27, 2020, 7:14am UTC](https://community.shopify.com/t/topic/16684/1 "2020-07-27T07:14:32Z")

</div>

お世話になっております。

TOPページなどで利用されるセクションを独自に作成したいと考えております。

今検討しているのは特定のタグがついた商品の一覧をTOPページに件数を指定して表示したいと考えています。

例を上げると、特集コレクション のようなものです。

特集コレクションでは、管理画面で任意のコレクションを設定する仕組みですが、たとえば、タグ名をテキストボックスに入力すると

/collections/all/タグ名

の結果、上位数件を表示するというものです。

このような独自のセクションを作ることは可能でしょうか？

また、可能であればどのように作成したら良いでしょうか？

ご存知のかたがいらっしゃいましたらご教授いただけると助かります。

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

---

<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:** [July 28, 2020, 4:08am UTC](https://community.shopify.com/t/topic/16684/2 "2020-07-28T04:08:40Z")

</div>

セクションを作るには、Liquidで、schema などを定義する必要があります。

以下のブログや動画で説明していますので、参考にしていただければと思います。  
[https://www.shopify.jp/blog/partner-shopify-app-development](https://www.shopify.jp/blog/partner-shopify-app-development)  
https://www.youtube.com/embed/xgPrMP48W-M?feature=oembed&wmode=opaque&list=PLkR3LRtxAZfod8TvcsKU7IEWeAO5fhcOe

以下のパートナーさんのブログも参考になるかと思います。  
[https://note.com/osamuiwasaki/n/n1c8813bab083?magazine\_key=md50dbab851c4](https://note.com/osamuiwasaki/n/n1c8813bab083?magazine_key=md50dbab851c4)  
[https://taka-forward.com/shopify-howtostudy-2006/](https://taka-forward.com/shopify-howtostudy-2006/)

---

<div class="post-metadata">

**Author:** ![tadasy](https://avatars.discourse-cdn.com/v4/letter/t/898d66/32.png) [@tadasy](https://community.shopify.com/u/tadasy)\
**Post date:** [July 28, 2020, 4:38am UTC](https://community.shopify.com/t/topic/16684/3 "2020-07-28T04:38:24Z")

</div>

情報ありがとうございます！

ただ、セクション自体の作り方などは勉強させていただいたのですが、

> 今検討しているのは特定のタグがついた商品の一覧をTOPページに件数を指定して表示したいと考えています。\> \> 例を上げると、特集コレクション のようなものです。\> \> 特集コレクションでは、管理画面で任意のコレクションを設定する仕組みですが、たとえば、タグ名をテキストボックスに入力すると\> \> /collections/all/タグ名\> \> の結果、上位数件を表示するというものです。\> \> このような独自のセクションを作ることは可能でしょうか？

こういった独自の処理をするセクションを作ることができるかがわかっておらず…

もう少し調査を進めてみますが、もしご存知の方がいましたらご教授いただきたく存じます。

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

---

<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:** [July 28, 2020, 4:51am UTC](https://community.shopify.com/t/topic/16684/4 "2020-07-28T04:51:55Z")

</div>

セクションの中で、以下のcollectiion のliquidを使って、商品を参照し、そこで指定のtagと一致するかチェックする、もしくは、loopのフィルターで、tagでフィルターする方法があるかもしれません。

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

---

<div class="post-metadata">

**Author:** ![tadasy](https://avatars.discourse-cdn.com/v4/letter/t/898d66/32.png) [@tadasy](https://community.shopify.com/u/tadasy)\
**Post date:** [July 28, 2020, 7:14am UTC](https://community.shopify.com/t/topic/16684/5 "2020-07-28T07:14:16Z")

</div>

ありがとうございます！

ドキュメントに書いてあったのですが、最大５０商品までしか取得できないみたいですので、５１件目以降の商品が参照できないため、このやり方では厳しそうです。

もう少し調査してみます。

ありがとうございます。

---

<div class="post-metadata">

**Author:** ![tadasy](https://avatars.discourse-cdn.com/v4/letter/t/898d66/32.png) [@tadasy](https://community.shopify.com/u/tadasy)\
**Post date:** [July 28, 2020, 9:08am UTC](https://community.shopify.com/t/topic/16684/6 "2020-07-28T09:08:40Z")

</div>

ドキュメントに書いてあったのですが、最大５０商品までしか取得できないみたいですので、５１件目以降の商品が参照できないため、このやり方では厳しそうです。

こちらの制限ですが、 paginateを使うと50個以上取得できることがわかりました。

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

コードにすると下のような感じで実装しました。

```php
{% paginate collection.products by 取得したい件数 %}
  {% for product in collection.products %}
    {% if product.tags contains section.settings.tag_name %}
      
    {% endif %}
  {% endfor %}
{% endpaginate %}

```

勉強になりました。ありがとうございました！

---

<div class="post-metadata">

**Author:** ![\_osamu\_iwasaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/_osamu_iwasaki/32/272617_2.png) [@\_osamu\_iwasaki](https://community.shopify.com/u/_osamu_iwasaki)\
**Post date:** [October 22, 2020, 6:44am UTC](https://community.shopify.com/t/topic/16684/7 "2020-10-22T06:44:11Z")

</div>

コレクションページにタグ条件の商品数を出したいだけであれば、  
paginate by 50のループ処理をせずとも、{{ collection.products\_count }} で出せますが、  
トップページの場合は、ajaxで数字を呼び出す方法があります。

1. collection.count.liquidを作り、その中に上記オブジェクトだけを入れます。  
このテンプレートに全商品登録しておきます。これで数字だけでます。

 ![スクリーンショット 2020-10-22 15.53.10.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/1/3/13579719a55077946617b2a5146fd0647fad0618.png)

1. theme.liquid でこのテンプレートはHEADやBODYを表示しない設定にします。

```ruby
{% if request.path contains '/collections/count' %}
 {{ content_for_layout }}

{% else %}
 
 
 
 {{ content_for_layout }}
 
 

{% endif %}

```

1. トップページので以下のように調べたいタグのURLの出力結果を取得し、HTML表示させます。

```javascript

```

---

<div class="post-metadata">

**Author:** ![\_osamu\_iwasaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/_osamu_iwasaki/32/272617_2.png) [@\_osamu\_iwasaki](https://community.shopify.com/u/_osamu_iwasaki)\
**Post date:** [October 25, 2020, 9:12pm UTC](https://community.shopify.com/t/topic/16684/8 "2020-10-25T21:12:36Z")

</div>

ごめんなさい。難しく考え過ぎてました。コレクションはタグ条件でも作れるので、

/collections/all-タグ名

のコレクションを作っておき、

{{ collections[‘all-タグ名’].products\_count }}

を使えばトップページでも商品数を表示出来ます。

 ![20201026_060151.jpg](https://canada1.discourse-cdn.com/shopifyforum/original/3X/5/2/52af1652569f5446b29a2169fb5c5c5b8b0bbd03.jpeg)
