「RuffRuff 予約販売」は在庫切れや新商品販売前、入荷待ちなどのタイミングで発生する機会損失の削減をサポートします。
自身のShopifyストアに驚くほど簡単に予約販売を実現し、無制限での予約商品を登録および無制限で予約注文を受け付けることが可能です。また、予約商品と通常商品を同時に注文させないように制限したり、入荷時期が未定な場合は再入荷通知も可能です。
他の予約販売アプリにはない商品出荷前に支払回収できる「後払い」機能などのユニークな機能もたくさん存在します。引用元: RuffRuff 予約販売
Shopifyのコレクションページは、商品を効果的に表示し、顧客の購買体験を向上させる重要な役割を果たします。しかし、時には表示される並び替え項目（ソート項目）が多すぎたり、不要なものがあったりして、ユーザーエクスペリエンスを損なう可能性があります。
この記事では、Shopifyのコレクションページで特定の並び替え項目を非表示にする方法を、ステップバイステップで解説します。これにより、よりシンプルで使いやすいコレクションページを作成することができます。
前提
対象テーマ
本記事の内容はDawn 8.0.0をベースにしています。
対象ページ
コレクションページ
やりたいこと
並び替え項目から、必要ない項目を非表示にする
今回は並び替え項目の「アルファベット順, A-Z」と「アルファベット順, Z-A 」を非表示にしたいと思います。
アウトプット
本記事で紹介する方法を利用することで下記のアウトプットになります。
非表示前（Before）
非表示後（After）
並び替え項目を非表示にする方法
非表示にする方法は2ステップになります
- 非表示にしたい並び替え項目のValue値を特定する
- ソースコードをカスタマイズする
それぞれ手順を解説します
1 非表示にしたい並び替え項目のValue値を特定する
Shopifyの並び替え項目のそれぞれのValue値はこちらです
- オススメ → manual
- ベストセラー → best-selling
- アルファベット順, A-Z → title-ascending
- アルファベット順, Z-A → title-descending
- 価格の安い順 → price-ascending
- 価格の高い順 → price-descending
- 古い商品順 → created-ascending
- 新着順 → created-descending
今回非表示にしたい並び替え項目は「アルファベット順, A-Z」と「アルファベット順, Z-A 」ですので、「title-ascending」と「title-descending」になります
2 ソースコードをカスタマイズする
2-0. サンプルコード
サンプルコード1（非表示にしたい並び替え項目が1つの場合）
サンプルコード2（非表示にしたい並び替え項目が複数の場合）
2-1. コード編集画面を開く
Shopify管理画面 > オンラインストア > 対象テーマの「コードを編集」をクリック
2-2. main-collection-product-grid.liquidファイルを編集する
- コード編集画面左上の検索窓から「collection」と検索し「main-collection-product-grid.liquid」を開く
- 「main-collection-product-grid.liquid」内で「sort_options」と「検索し、編集箇所箇所を特定
-
添付画像の様にソースコードを編集する
※今回は2件非表示にしたいのでサンプルコード2を利用する
2-4. facets.liquidファイルを編集する
- コード編集画面左上の検索窓から「facets」と検索し、「facets.liquid」を開く
-
「facets.liquid」内で「sort_options」と「検索し、編集箇所箇所を特定
※「facets.liquid」内には該当箇所が複数ありますので、全て変更してください。 -
添付画像の様にソースコードを編集する
※今回は2件非表示にしたいのでサンプルコード2を利用する
最後に
コレクションページの並び替え項目をカスタマイズすることで、ストアの特性に合わせた最適な表示が可能になります。本記事で紹介した方法を使えば、不要な並び替え項目を非表示にし、顧客にとって重要な選択肢のみを表示することができます。
ただし、テーマのバージョンやカスタマイズ状況によっては、コードの位置や書き方が若干異なる場合があります。その際は、テーマのソースコードを注意深く確認し、適切な箇所を見つけて編集してください。
下記の部ログ記事では、並び替え項目（ソート項目）を非表示以外にもコレクションをカスタマイズする方法をいくつか紹介しています。ご参考にしてください。
