TORUBLOG
Shopifyプログラミング

[Shopify] 商品一覧コレクションページの並び替えをカスタマイズする（Debutテーマ）

[Shopify] 商品一覧コレクションページの並び替えをカスタマイズする（Debutテーマ）
  • コレクションページの並び替えを非表示にしたい
  • コレクションページの並び替えの項目の一部を削除にしたい
  • コレクションページの並び替えの項目のラベルを変更したい
そんな人向けに、並び替えのカスタマイズ方法について、私が実際の案件で使った方法をもとに解説します。

Shopifyの無料体験をはじめる

コレクションの並び替えとは以下を指します。 デフォルトでは、以下の並び替えの指定が可能です。
  • オススメ（手動のこと）
  • ベストセラー
  • アルファベット順, A-Z
  • アルファベット順, Z-A
  • 価格の安い順
  • 価格の高い順
  • 古い商品順
  • 新着順
Liquidコードを編集する際には、バックアップを必ず行い、テスト環境で確認を行うなど、自己責任のもとに行ってください。万が一不都合等が起きた場合でも当方は責任を負いかねますのでご注意ください。

Shopify商品一覧コレクションページのデフォルトの並び替えを変更する

デフォルトの並び替えを変更したい場合は、コレクションページの編集画面にてとても簡単に変更できます。 フロント側と若干ラベルが異なりますが、「手動」というのはコレクションページでいうところの「オススメ」になります。
デフォルトの全商品一覧（/collections/all）の並び順を変えたい場合は、/collections/all のコレクションを新規作成する必要があります。 商品価格が0より大きい、という条件で、URLを「all」にして作成し保存した後に、並び替えを選択します。

Shopify商品一覧コレクションページの並び替えを非表示にする

この「並び替え」選択の表示・非表示を切り替えるには、管理画面「オンラインストア」を押し、右にある緑の「カスタマイズ」ボタンから遷移し、「コレクションページ」を選択します。 コレクションページに遷移したら、左側の「ヘッダー」「フッター」の間にある「コレクションページ」を押すと、以下の編集項目が表示されます。 ここの「並び替えを有効にする」をON/OFFして右上の緑の「保存」ボタンを押すのみで簡単に表示・非表示できます。

Shopify商品一覧コレクションページの並び替えを一部非表示にする

ここからがコードを編集する必要があります。
Solved: Customise sorting option on Collection page - Shopify Community
コレクションページの並び替えの選択肢のなかで、一部を非表示にしてみます。

「ベストセラー」を非表示にしたい場合

まず、section/collection-template.liquid ファイルを開きます。 その中で、セレクトボックスの選択肢である以下を探します。 
{%- for option in collection.sort_options -%}
  <option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}>{{ option.name }}</option>
{%- endfor -%}
ここを、以下のようにoptionタグの外側に記載します。 
{%- for option in collection.sort_options -%}
  {% unless option.value contains 'best-selling' %}
  <option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}>{{ option.name }}</option>
  {% endunless %}
{%- endfor -%}
これでベストセラーが非表示になりました。

2つ以上の項目を非表示にしたい場合

例えば、「ベストセラー」「アルファベット順, A-Z」「アルファベット順, Z-A」も非表示にしたい場合は、以下になります。 
{%- for option in collection.sort_options -%}
  {% unless option.value contains 'best-selling' or option.value contains 'title-ascending' or option.value contains 'title-descending' %}
  <option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}>{{ option.name }}</option>
  {% endunless %}
{%- endfor -%}
これで「ベストセラー」「アルファベット順, A-Z」「アルファベット順, Z-A」も非表示になりました。 具体的には、
option.value contains 'best-selling'
このbest-sellingが選択肢の1つの値を指しています。
  • オススメ（手動のこと） → manual
  • ベストセラー → best-selling
  • アルファベット順, A-Z → title-ascending
  • アルファベット順, Z-A → title-descending
  • 価格の安い順 → price-ascending
  • 価格の高い順 → price-descending
  • 古い商品順 → created-ascending
  • 新着順 → created-descending
非表示にしたい項目名を指定して記載すればOKです。

Shopify商品一覧コレクションページの並び替えのラベルを変更する

ラベルを変更したい場合は簡単です。 管理画面「オンラインストア」を押し、右にある「アクション」の「言語を編集する」から翻訳の画面に遷移し、対象のワードで検索して変更・保存します。 英語など別の言語にも対応している場合はそれぞれ編集します。 以上です！

Shopifyの無料体験をはじめる

← Back to Home