Shopifyのアルファベット順の並べ替えを非表示にしたりカスタマイズする方法。

Shopifyではコレクションページで商品の並び順をお客さんが選択して並べ替えて表示することができます。

おすすめ順とか売れている順とか、Amazonや楽天なんかでもお馴染みの並べ替えの機能ですね。

ただ海外製のサービスであるshopifyなので、日本人に馴染まない並び順のアルファベット順というのがあります。

お客様の利便性を考えても、これはちょっと要らないかな?と思うので、削除しちゃいたいと思います。

例によってコード編集は苦手ですが、ちょっとしたコード編集で実装できますよ。

それからこの並べ替えを非表示にしたり順番を変える方法について書いていきます。

 

アルファベット順を削除する方法。

コレクションページの並び順を任意の順番に並べ替えるのはデフォルトで可能なので、「shopify 並べ替え」と検索すると情報がヒットしますが、今回、問題なのはお客様が見るコレクションページの並べ替えから不用な項目を削除することですね。

削除というより、非表示にする方法になりますが、まずはコード編集する場所↓

[Section]の中の[collection-template.liquid]

です。

この中で以下のコードを探します。

{%- for option in collection.sort_options -%}{{ option.name }}{%- endfor -%}

これがコレクションページの並び順を選択するボックスの中身を呼び出すコードなんですが、アルファベット順を非表示にするためには、コードを追加して以下のようにします。

{%- for option in collection.sort_options -%}
{% unless option.value contains 'title-ascending' or option.value contains 'title-descending' %}{{ option.name }}{% endunless %}

これでアルファベット順が非表示になると思いますので、プレビューで確認して保存してください。

他の選択肢も非表示にする。

同じやり方で他にも不用だと感じる選択肢がある場合は、非表示にする事ができます。

unless option.valueで非表示にしたい項目を指定して追加するという事ですが、ここには以下のコードで項目を指定することができます。

  • オススメ → manual
  • ベストセラー → best-selling
  • アルファベット順, A-Z → title-ascending
  • アルファベット順, Z-A → title-descending
  • 価格の安い順 → price-ascending
  • 価格の高い順 → price-descending
  • 古い商品順 → created-ascending
  • 新着順 → created-descending

先程はアルファベット順のtitle-ascendingと逆アルファベット順のtitle-descendingを指定して非表示にした訳ですので、この部分を入れ替えたり追加して、表示させたい項目だけを残しましょう。

例えばベストセラー順を非表示にしたい場合はbest-sellingを指定して下のように書き加えて下さい。

{%- for option in collection.sort_options -%}
{% unless option.value contains 'best-selling' %}{{ option.name }}{% endunless %}
{%- endfor -%}

こうすることでベストセラーを指定して非表示にさせることがます。

並べ替えを全て非表示にする方法。

コレクションページの商品をストア側の任意の順番で表示させておきたいという場合は、並び順を変更するボックスを非表示にしてしまいましょう。

カスタマイザーでコレクションページを表示したら、左側のパネルでコレクションを選択します。

並べ替えを有効にする。

のチェックを外します。

ストアによっては非表示にしておいた方がスッキリしますし、任意の順番に並べておきたい場合もあるでしょう。

商品点数が少ない場合、何も無理に並べ替えをしてもらう必要はありませんので並べ替えは不要ですね。そんな時は非表示にしちゃいましょう。

コレクションページの並び順を任意に変更する方法。

ちなみにコレクションページで表示する並び順の変更方法は、管理画面から

商品管理→コレクション

でコレクションを選択すると、そのコレクションの商品一覧の上に並び順を変更する選択ボックスがありますので、そこから変更できます。

デフォルトではベストセラー順になっていますので、例えば新着順を選択することで、コレクションページに商品が新着順(商品登録が新しい順)で並べられます。

まとめ。

ちょっと短い説明でしたが、やりたい事はできました!

今のところアルファベット順っていうのは必要ないかな?と思っていますが、ポケモンGOではポケモン図鑑の中から目的のポケモンを見つける時にアルファベット順を使ってます。

しかも子供もわかっているのかわかっていないのか?わかりませんがアルファベット順に並べ替えたりして見ています。

商品点数が多い場合でお客様が商品名で見つけたい時には必要な並び順なのかもしれません。

かなりの余談でした…

ストアによってはできるだけ無駄を無くしてシンプルで見やすくしたいと思いますので、そんな時にはお役立てください。

 

コメント