「RuffRuff 予約販売」は2023年2月末に提供開始したShopifyアプリです。
無料から利用でき、ノーコード＆３ステップで簡単に導入できます。
無制限の予約商品の登録と予約注文のプランもご用意します。引用元:https://tsun.ec/blogs/articles/19
この記事では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を利用する
最後に
本記事の内容はあくまでDawn8.0.0での内容になります。
他のShopifyテーマおよび、Dawnの他Verでは多少ソースコードの書き方が異なる場合がありますので、ご了承ください。
