コンテンツにスキップ
【厳選】おすすめ Shopifyアプリ
【厳選】おすすめ Shopifyアプリ
【Shopify Tips】 コレクションページの並び替え(ソート)項目を非表示にする方法

【Shopify Tips】コレクションの並び替え項目(ソート項目)を非表示にする方法 | 対象テーマ:Dawn

「RuffRuff 予約販売」は2023年2月末に提供開始したShopifyアプリです。
無料から利用でき、ノーコード&3ステップで簡単に導入できます。
無制限の予約商品の登録と予約注文のプランもご用意します。

引用元:https://tsun.ec/blogs/articles/19



この記事ではShopifyストアのコレクションページに表示されている並び替え項目(ソート項目)を非表示にする方法をご紹介します。

前提

対象テーマ

本記事の内容はDawn 8.0.0をベースにしています。

対象ページ

コレクションページ

やりたいこと

並び替え項目から、必要ない項目を非表示にする

今回は並び替え項目の「アルファベット順, A-Z」と「アルファベット順, Z-A 」を非表示にしたいと思います。

アウトプット

本記事で紹介する方法を利用することで下記のアウトプットになります。

非表示前(Before)

並び替え項目 非表示前 | Shopifyコレクションページ

非表示後(After)

並び替え項目 非表示後 | Shopifyコレクションページ

並び替え項目を非表示にする方法

非表示にする方法は2ステップになります

  1. 非表示にしたい並び替え項目のValue値を特定する
  2. ソースコードをカスタマイズする

それぞれ手順を解説します

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ファイルを編集する

  1. コード編集画面左上の検索窓から「collection」と検索し「main-collection-product-grid.liquid」を開く
  2. 「main-collection-product-grid.liquid」内で「sort_options」と「検索し、編集箇所箇所を特定
  3. 添付画像の様にソースコードを編集する
    ※今回は2件非表示にしたいのでサンプルコード2を利用する
main-collection-product-grid.liquidの編集箇所

2-4. facets.liquidファイルを編集する

  1. コード編集画面左上の検索窓から「facets」と検索し、「facets.liquid」を開く
  2. 「facets.liquid」内で「sort_options」と「検索し、編集箇所箇所を特定
    ※「facets.liquid」内には該当箇所が複数ありますので、全て変更してください。
  3. 添付画像の様にソースコードを編集する
    ※今回は2件非表示にしたいのでサンプルコード2を利用する
「facets.liquid」内編集箇所

最後に

本記事の内容はあくまでDawn8.0.0での内容になります。

他のShopifyテーマおよび、Dawnの他Verでは多少ソースコードの書き方が異なる場合がありますので、ご了承ください。

前の記事 【Shopify Tips】フッターにある「Powered by Shopify」を非表示にする方法 | 対象テーマ:Dawn
次の記事 Shopifyのテーマ拡張機能をCI/CDサービスからデプロイする

Shopify Apps

TECH BLOGS

BLOGS

編集プロセス

EコマースやShopifyの初学者にとって、できるだけ “やさしく” “わかりやすく” “正確に” 難しいコマース用語やマーケティング用語、ストア構築から販売までの仕組み・ノウハウを伝えることを心がけて、記事コンテンツを作成しています。

詳しく見る →

掲載情報に関して

掲載している各種情報は、株式会社Tsunが調査した情報をもとにしています。できるだけ“最新“かつ“正確“な情報の掲載に努めておりますが、内容を完全に保証するものではありません。当サイトによって生じた損害について、株式会社Tsunではその賠償の責任を一切負わないものとします。掲載情報に誤りがある場合には、お手数ですが株式会社Tsunまでご連絡をいただけますようお願いいたします。

アプリの比較

{"one"=>"比較する2つまたは3つのアイテムを選択します", "other"=>"選択された3つのアイテムの{{ count }}"}

比較する最初のアイテムを選択します

比較する2番目の項目を選択します

比較する3番目の項目を選択

比較