サイト回遊の促進、コンバージョン率の向上に加え、SEO効果も期待できる、自作の「売れ筋ランキング」を設置する方法について
ECサイトに「売れ筋ランキング(ベストセラー)」を設置するメリットはいくつかあります。
ユーザーの購買意欲向上はもちろん、サイト回遊の促進、コンバージョン率の向上に加え、SEO効果も期待できます。
今回は、自作の「売れ筋ランキング (セクション)」を設置する方法について考察してみたいと思います。
アプローチ
まず、自作する前にどのようにアプローチするかについて触れておきたいと思います。
コレクションを作成
まずは、売れ筋ランキング一覧に用いる、全商品もしくは一部の商品を対象に「ベストセラー」というコレクションを作成します。
これを取得し、表示させるセクションを作成し、テーマエディタを使って好きな場所に設置します。
ランキングのアルゴンガス
ランキングを付けるアルゴリズムは、独自開発する事なく、コレクションのソート機能を活用します。
コレクションの作成・編集ページには、予め表示順の設定ができる「商品管理 > 並び替え」という機能があります。
並び替えの基準としては、
・商品名（A-Z/Z-A）
・価格（高い順/安い順）
・ベストセラー
・新着/古い
などがあり、この中で「ベストセラー」に設定しておきます。すると、売れ筋ランキングが自動で完成されます。
forloop.index
ランキングは完成されたものの、「1位」「NO.1」など、格付けもしておきたいものです。
その時に使用するのが、Liquidのオブジェクである「forloop.index」です。
使い方については、サンプルコードで紹介します。
「ベストセラー」コレクションを作成
では、「ベストセラー」というコレクションの作成から。他のコレクションと同様に、タイトルをURL(ハンドル)を設定します。
今回、並び順(表示順)が「ベストセラー」であるため、以下の図のように「商品管理 > 並び替え」は「ベストセラー」を指定します。
セクションを作成
次はセクションの作成。以下は、セクション作成のサンプルコードになります。
<div class="container">
<ul class="collection-products">
{%- for product in collections[section.settings.collection_handle].all_products limit:5 -%}
<li class="collection-product-item">
<a href="{{ product.url }}">
<p>{{ product.title }}</p>
</a>
</li>
{%- endfor -%}
</ul>
</div>
{% schema %}
{
"name": "売れ筋ランキング",
"settings": [
{
"id": "collection_handle",
"type": "collection",
"label": "表示するコレクションを選択"
},
]
}
{% endschema %}これをテーマエディタで好きな場所に追加し「表示するコレクションを選択」は、予め作っておいた「ベストセラー」コレクションを選択します。
格付けを設置
次はは、売れ筋ランキングベスト3の商品に、それぞれ「No1」「No2」「No3」を付ける手順について。
上述したように、Liquidのオブジェクであるforloop.indexを用います。
forloop.indexは、ShopifyのLiquidテンプレートでループ内の現在の繰り返し回数を1から始まるインデックスとして提供するオブジェクトです。
以下は、forloop.indexを実装したコードになります。（※schema設定は省略）
<div class="container">
<ul class="collection-products">
{%- for product in collections[section.settings.collection_handle].all_products limit:5 -%}
<li class="collection-product-item">
{%- case forloop.index -%}
{%- when 1 -%} <span class="rank">No1</span>
{%- when 2 -%} <span class="rank">No2</span>
{%- when 3 -%} <span class="rank">No3</span>
{%- endcase -%}
<a href="{{ product.url }}">
<p>{{ product.title }}</p>
</a>
</li>
{%- endfor -%}
</ul>
</div>
これで、売れ筋ランキングベスト3の商品に、それぞれ「No1」「No2」「No3」が付けられます。
※CSSでの装飾は割愛します。
デフォルトセクションに実装したい
今回、コレクションのセクションを作成して解説しましたが「デフォルトのセクションに実装したい」と思う方もいると思います。
コレクションの商品一覧を取得・表示するセクションとして知られる「特集コレクション」を成すファイルは「セクション > featured-collection.liquid」。
同ファイルの約70行目（※テーマによって違うかもしれません）にある以下のようなコードがあります。
{%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
<li
id="Slide-{{ section.id }}-{{ forloop.index }}"
class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>//以下、省略ここから、商品一覧のループが開始するので、直下にforloop.indexを実装します。
{%- case forloop.index -%}
{%- when 1 -%} <span class="rank">No1</span>
{%- when 2 -%} <span class="rank">No2</span>
{%- when 3 -%} <span class="rank">No3</span>
{%- endcase -%}ベストセラーのロジック
最後に、Shopifyの「ベストセラー」のロジックについて触れておきたいと思います。
最初は「最も売れた商品」の順で表示すると思っていましたが、実際はそれよりも少し複雑だそうです。
そのアルゴリズムは、各商品の「売れた個数」や「注文額」ではなく、「注文数」が優先されるようです。
例えば、
・白いシャツ：注文数４件 → 計8枚販売
・赤いシャツ：注文数5件 → 計6枚販売
だとすると、売れ筋ランキングでは注文数の多い赤いシャツが上位に表示されるようなので、ご参考までに。
ちなみにストアの販売データを活用して、オリジナル「ベストセラー」を作るためには、Admin APIを呼び出してデータを取得する必要があるたえ、高度な技術が必要になります。
同じ商品カテゴリーの「売れ筋ランキング」
今回は、ストアの全商品を対象にする「売れ筋ランキング」を紹介しましたが、同じ商品カテゴリーの「売れ筋ランキング」の設置について、以下の記事にて手法などをまとめたので、ぜひご一読ください。
