はじめに

ECサイトを制作・運用するにあたり、トップページでの商品の見せ方はユーザーの購買意欲に大きな影響を与えます。
特に、大手ECサイトのトップページに必ずある人気商品ランキングのように、人気商品や売れ筋商品を視覚的に強調することでサイトに訪れた人の関心を引き、購入へと繋げることができます。

しかしShopifyでよく使われる無料テーマ「Dawn」や「Rise」では、ランキング形式で商品を掲載する機能が備わっていないため、簡単に実装したい場合はアプリを入れる必要があります。

そこで本記事では、アプリを使わずコピペのみで特集コレクションにランキングアイコンを表示する方法をご紹介します。
アプリよりも柔軟に表示形式やデザインをカスタマイズすることが可能です。
コーディング経験が少ない方でも実装できるよう順を追って解説していますので、ぜひご参考ください！

実装方法

1. 「featured-collection.liquid」のコンテンツスキーマにランキング表示のための項目を追加

コンテンツスキーマ内の任意の箇所に下記コードを追加します。
本記事では「販売元」の記述の下に挿入しました。（画像はクリックで拡大します）

{
    "type": "checkbox",
    "id": "show_ranking",
    "label": "ランキングアイコンを表示する",
    "default": false
}

2. ランキング表示用のクラスを付与

「featured-collection.liquid」で、特集コレクション全体を囲うulタグにランキング用のクラスを付与します。
今回は既存のクラス「product-grid」の直後に、『ランキングアイコンの表示が有効になっている場合にクラス「ranking」が追加される』ように追記しました。

<ul
    id="Slider-{{ section.id }}"
    data-id="{{ section.id }}"
    class="grid product-grid contains-card contains-card--product{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--{{ section.settings.columns_desktop }}-col-desktop{% if section.settings.collection == blank %} grid--2-col-tablet-down{% else %} grid--{{ section.settings.columns_mobile }}-col-tablet-down{% endif %}{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}"
    role="list"
    aria-label="{{ 'general.slider.name' | t }}"
>

↓下記に変更

<ul
    id="Slider-{{ section.id }}"
    data-id="{{ section.id }}"
    class="grid product-grid{% if section.settings.show_ranking %} ranking{% endif %} contains-card contains-card--product{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--{{ section.settings.columns_desktop }}-col-desktop{% if section.settings.collection == blank %} grid--2-col-tablet-down{% else %} grid--{{ section.settings.columns_mobile }}-col-tablet-down{% endif %}{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}"
    role="list"
    aria-label="{{ 'general.slider.name' | t }}"
>

3. アイコンのスタイルを調整

「featured-collection.liquid」内もしくは別CSSファイルに、下記スタイルを追加してアイコンのデザインを調整します。

{% if section.settings.show_ranking %}
    {% style %} 
    .product-grid.ranking {
        counter-reset: ranking;
    }
    .product-grid.ranking .product-card-wrapper::after {
        counter-increment: ranking;
        content: counter(ranking);
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 2em;
        height: 2em;
        font-weight: 700;
        line-height: 2;
        text-align: center;
        color: #999;
        background-color: #fff;
        border: 1px solid #999;
        border-radius: 50%;
    }
    .product-grid.ranking .grid__item:nth-child(-n+3) .product-card-wrapper::after {
        color: #fff;
        border: none;
    }
    .product-grid.ranking .grid__item:first-child .product-card-wrapper::after {
        background-color: #c90;
    }
    .product-grid.ranking .grid__item:nth-child(2) .product-card-wrapper::after {
        background-color: #999;
    }
    .product-grid.ranking .grid__item:nth-child(3) .product-card-wrapper::after {
        background-color: #633;
    }
     {% endstyle %}
{% endif %}

上記により、特集コレクションのセクションでランキングアイコンのON/OFFが選べるようになり、ONにすることで画像のようなアイコンが表示されるようになります。
アイコンのスタイルはサイトデザインに合わせてご調整ください。

まとめ

いかがでしたか？

ランキング形式で商品を見せることにより売れ筋商品がひと目で分かるようになり、エンドユーザーにとっては購入の後押しや安心感へと繋がります。
実際に、ランキング上位の商品は他商品に比べクリック率や購入率が高くなる傾向にあるため、売れ筋だけでなく売り筋商品の販促としても有効となっています。
安定した在庫数を確保している商品が多い場合や、ギフト需要が高いマーチャントさんは特に積極的に取り入れたい機能です。

ジャンルごとにランキングを作るなど、見せ方や活用方法は様々です。
売上UPのための重要な施策となりますので、さらなる活用やサイトの改善をお考えの方はぜひお気軽にご相談ください！