コレクションページに複数コレクションを表示した場合のフィルターについて

Topic summary

Shopifyのコレクションページで2つのコレクション(○○○-1/○○○-2)を並列表示した際、商品フィルター(絞り込み)が後者にのみ適用される問題。テーマはCanopy、表示はLiquidで2つのforループを複製して実現済み。

結論:Shopifyには同一ページの引数によるフィルター条件を複数コレクションへ同時適用する機能がなく、現状の仕組みでは「不可」。フィルターはページのコレクションコンテキストに紐づくため、複数コレクションに跨った適用はできない。

代替案:Search機能をAjaxでJSON返却に設定し、検索を2回行って結果をJavaScriptで合成・描画すれば、複数コレクション相当の一覧にフィルタリングを適用可能。

対応・結果:質問者は同一ページへの2コレクション掲載を見送り、スレッドは解決。未解決の主要論点は特になし。

Summarized with AI on February 24. AI used: gpt-5.

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

Shopify初心者のためご指導いただけますと幸いです。

コレクションページに2つコレクションを表示させたいと思い、

表示するところまではできました。

ただし、フィルターの絞り込みの対象になっているコレクションが、

片方(後に記述している方)しか対象となっていないようなのです。

フィルターにどちらも対象にとされるには、どうすればよろしいでしょうか。

コレクションを追加した記述は下記の通りです。

単純に、表示させたいコレクション名を変えて、同じソースを繰り返しています。

絞り込みの対象になっているのは、「○○○-2.products」のみのようです。

<1つ目のコレクション>

{% if collection.products.size > 0 %}

{% capture product_blocks %} **{%- for product in collections.○○○-1.products -%}** {% render 'product-block', product: product, max_cols: section.settings.products_per_row, min_cols: section.settings.mobile_products_per_row %} {%- endfor -%} {% endcapture %}

{%- if product_blocks contains ‘product-block__weight-value’ -%}
{{ product_blocks | replace: ‘

’, ‘
 
’ }}
{%- else -%}
{{ product_blocks }}
{%- endif -%}

{%- for i in (1..section.settings.products_per_row) -%}

{%- endfor -%}
{% else %}

{{ 'collections.general.empty' | t }}

{% endif %}

<2つ目のコレクション>
{% if collection.products.size > 0 %}

{% capture product_blocks %}
{%- for product in collections.○○○-2.products -%}
{% render ‘product-block’, product: product, max_cols: section.settings.products_per_row, min_cols: section.settings.mobile_products_per_row %}
{%- endfor -%}
{% endcapture %}

{%- if product_blocks contains ‘product-block__weight-value’ -%}
{{ product_blocks | replace: ‘

’, ‘
 
’ }}
{%- else -%}
{{ product_blocks }}
{%- endif -%}

{%- for i in (1..section.settings.products_per_row) -%}

{%- endfor -%}
{% else %}

{{ 'collections.general.empty' | t }}

{% endif %}

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

追記いたします。

テーマは「Canopy」を使用しています。

html, css コーディングの知識はございます。

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

恐らくご質問に対する解答としては、「出来ない」ということになります。

理由はShopifyには同ページ内で引数で得たフィルター条件を複数のコレクションに反映する機能は無いからです。

もし弊社で担当するならという解答になりますが、Search機能はAjax用のJsonデータを返す様に設定ができます。任意の形でsearchを2回行い、その結果をJavaScriptで表示する形でしたら対応可能かと存じます。

フルバランス様

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

同一ページ内に複数コレクションのフィルターを反映する機能はないとのこと。

了解しました。

今回は、同一ページ内に2つのコレクションを掲載することを見送りたいと思います。

明確な答えが見つかり良かったです。

ありがとうございました。