並び替えフィルターのモバイル表示

日本語 ディスカッション 技術的なQ＆A

Topic summary

ユーザーがShopifyのコレクションページで並び替えオプション（おすすめ、ベストセラー、アルファベット順など）を削除しようとした際、CSSによる方法ではPCのみに反映され、モバイルでは全て表示されたままという問題が発生。

解決方法:
回答者がLiquidファイルの編集による方法を提案。具体的には以下のファイルを編集:

  • main-collection-product-grid.liquid
  • facets.liquid

提供されたコードスニペット:

{% for option in collection.sort_options %}
  {% unless option.value == 'manual' or option.value == 'best-selling' or option.value == 'title-ascending' or option.value == 'title-descending' %}
  {% endunless %}
{% endfor %}

結果:
最初は一カ所の編集漏れがあったが、２つ目のコード編集箇所を追加することで、PC・モバイル両方で希望通りの並び替えオプションのみ表示されるようになり、問題は解決した。

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

先日回答いただきました

コレクションページに存在する並び替えのうち

・オススメ

・ベストセラー

・アルファベット順

を削除する方法として、下記のようなカスタムCSS

[value=“title-descending”] { display: none; }

を追加することで削除出来ることを教えていただきました。

無事に成功して、任意の並び替えを削除出来たのですが、

PCのみで反映されており、モバイルでは全て表示されているままでした。

モバイルでも非表示を反映させる方法はございますでしょうか？

1 Like
2

質問拝見しました。

こちらに関してsp版、pc版ともに表示非表示を制限する方法がございますのでそちらでやっていただければと思います！

下記記事を見ながらファイルを編集していただければ簡単に非表示にできますので、参考にしていただけますと幸いです。

https://tsun.ec/blogs/tech/shopify-tips-hide-sort-options

下記のコードを参考にしていただけますと幸いです。

{% for option in collection.sort_options %}
  {% unless option.value == 'manual' or option.value == 'best-selling' or option.value == 'title-ascending' or option.value == 'title-descending' %}
    
  {% endunless %}
{% endfor %}

なにかご質問があれば、お気軽にご相談ください。
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。

株式会社フルバランス

1 Like
3

いただいたリンク先ページを元に

「main-collection-product-grid.liquid」

「facets.liquid」

の該当箇所を

記載のコードに置き換えました。

しかし、引き続き

実際のPCと、Shopifyカスタマイズ上のデモ画面（PC・モバイル両方）

では希望通り４つの並び替え項目のみ表示

実際のモバイル環境では

８つのデフォルトの並び替え項目が全て表示されたままでした。。

原因考えられますでしょうか？

4

２つ目のコード編集箇所が一カ所漏れていました
いただいたリンクの記事で無事にモバイルも反映されました！ありがとうございます！