logo

【Shopify】商品一覧・コレクションの並び替えをカスタマイズする方法

【Shopify】商品一覧・コレクションの並び替えをカスタマイズする方法

この記事では、商品一覧・コレクションページの並び替え項目をカスタマイズする方法についてご紹介していきます。

並び替えには様々な方法がデフォルト機能でありますが、名前が正直微妙だったり、不要な項目があったりします。

今回はそのような項目を任意に変更できるようにする方法を解説していきますので、ぜひ最後までご覧ください!

本記事では、Shopifyテーマ「Dawn」で解説しています。
ご利用のテーマによっては今回の解説が当てはまらないケースがある可能性もありますが、ご了承お願いいたします。

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

非表示にする項目

コレクションページの並び替え項目にある下記を非表示にしていきます。
・「アルファベット順,A-Z」
・「アルファベット順,Z-A」

非表示にする手順

非表示にする手順は大きく分けて2ステップになります。

  1. 非表示にしたい並び替え項目のValue値を特定
  2. コードの編集画面からコードを編集

それでは手順を解説していきます。

非表示にしたい並び替え項目のValue値を特定

  1. Chromで右クリックをして「検証」を選択
  2. 各並び替え項目にあるvalue="〇〇"を特定

今回の場合はこちらのvalue値になっているのが確認できます。

アルファベット順, A-Z → title-ascending
アルファベット順, Z-A → title-descending

ちなみに、並び替え項目のその他のvalue値はこちらになります。

オススメ → manual
ベストセラー → best-selling
価格の安い順 → price-ascending
価格の高い順 → price-descending
古い商品順 → created-ascending
新着順 → created-descending

コードを編集

 

  1. 管理画面から「テーマ」をクリック
  2. 「コードを編集」をクリック

  1. 左上のファイル検索窓に「main-collection-product-grid」と入力
  2. 「main-collection-product-grid.liquid」ファイルが見つかるのでこちらのファイルを編集していきます

「main-collection-product-grid.liquid」ファイルを開いたら
「sort_options」と検索して、編集箇所を特定します。

特定したら、該当箇所の<optionタグ>を下記のLiquidで囲みます。

非表示にする並び替え項目が1つの場合

{% unless option.value == 'Value値' %} 
{% endunless %}

 非表示にする並び替え項目が複数ある場合

{% unless option.value == 'Value値' or option.value == 'Value値' %}  
{% endunless %}

「facets.liquid」ファイル内の「sort_option」箇所にも同じ変更をします。
こちらのファイル内には4箇所ありますので、すべて同様に変更します。

保存して完了です。

ストアを確認してみると表示項目から「アルファベット順, A-Z 」「アルファベット順, Z-A 」が非表示になっているのが確認できました。

並び替え項目の項目名を変更する

現在の並び替え項目名はこのようになっています。

  • オススメ
  • ベストセラー
  • 価格の安い順
  • 価格の高い順
  • 古い商品順
  • 新着順

これらを任意の名前に変更する手順を解説していきます。
今回は、コードの編集は不要なので先ほどよりも簡単に変更することができます!

  1. 管理画面から「テーマ」をクリック
  2. 「デフォルトテーマのコンテンツを編集する」をクリック

こちらの「フィルターアイテム」に変更したい項目名を入れます。
例えば今回、「ベストセラー」を「売れ筋商品」に変更したとします。

このように該当箇所が抽出されます。
こちらを「売れ筋商品」という項目名に変更して保存して完了です。

表示項目が「ベストセラー」から「売れ筋商品」に変更されました。

まとめ

今回は商品一覧・コレクションの並び替えをカスタマイズする方法を解説してきました。
非表示にするにはコードの編集が必要になるため、専門的な知識が必要になりますが、表示名の変更は管理画面から簡単に行うことができました。

ぜひご自身のストアに合わせて変更してみてはいかがでしょうか。

※この記事は2024年05月時点の内容です。今後のアップデートやShopifyの仕様変更等により、記事の内容が古くなってしまう可能性があります。

\ShopifyでEC構築を検討中の方へ/

現在、Shopify公式は無料のお試しキャンペーンを実施しています。

Shopify

百聞は一見に如かずといいますが、ネット上で情報収集するよりも、実際にShopifyに触れるほうが何倍も効率が良いでしょう。

下記の案内ページからキャンペーンの詳細をご確認ください。

【1ドル×1ヶ月】CP実施中!!

サービス

Service

- プロジェクトプラン -

こんな方におすすめ!

  • これからShopifyでECを立ち上げるための支援をしてほしい

  • 自社で取ってきたShopify案件のディレクションや開発業務を任せたい

  • 自社サービスとShopifyを連携させたアプリケーションを作ってほしい

- サポートプラン -

こんな方におすすめ!

  • 自社でShopifyストアを立ち上げてみたが、やはり専門家がいないと厳しいため、相談できるパートナーがほしい

  • 自社で受けたShopify案件の一部を、Shopifyに強い開発者に相談したい

  • 開発してもらったShopifyアプリの保守やメンテナンスをお願いしたい

- SESプラン -

こんな方におすすめ!

  • ストアの改修や更新業務が忙しくなってきたため、色々な業務をお願いできて専門的なスキルを持っている人材がほしい

  • 自社でShopify案件が溢れてしまい、数ヶ月間、スピーディかつ自由に案件を依頼できる外部のパートナーがほしい

事例

Works

ストア開発/支援

Shopify Store

累計100以上のShopifyストア開発経験を基に、商材・業界ごとに無駄のないご提案~実装が可能です。また、既に公開されているShopifyストアを、技術的な観点から保守/サポートさせて頂いております。弊社が構築していないストア様も、ご加入が可能です。

アプリ開発

Shopify App

各ストアに特化したカスタムアプリだけでなく、Shopify App Storeに掲載できる公開アプリ開発のご相談・ご依頼を承っています。例えば、自社サービスで構築しているAPIとShopifyのAPIを連携~Shopify App Storeで公開することで、Shopifyを使用しているEC事業者に自社サービスをリーチさせることができます。