Shopifyでランキング表示を実装して人気商品を目立たせる方法

Shopifyでランキング表示を作る方法は4通りあります。無料で今すぐ動かすなら標準コレクションの「ベストセラー順」、テンプレートを開かずに1位・2位という番号だけ足すならテーマ設定のカスタムCSS、並び替えの変更まで追従させたいならテーマのLiquidを編集、番号もバッジも集計期間の切り替えもノーコードで欲しいならアプリです。この記事は4つを順番に、実際の管理画面の操作とコードまで落として書いています。どれを選ぶかで迷っている段階なら、まず標準機能を5分だけ触ってみるのが一番早いです。

先に、手を動かす前に知っておくと判断が速くなる数字を3つ置いておきます。いずれもShopifyの公式ドキュメントに書かれている仕様です。

出典：Shopify ヘルプセンター — コレクションのレイアウトと並び替え

出典：Shopify.dev — Liquid for タグ

そもそもランキング表示はなぜ売れるのか

ランキングが売上に直結する理由は、心理学でいう 「社会的証明」 の効果にあります。

社会的証明（ソーシャルプルーフ）

人は判断に迷ったとき、「他の多くの人が選んでいるもの」を正しい選択だと感じる傾向があります。ランキング表示は、この心理を自然に活用する仕組みです。

たとえば、初めて訪れたストアで「どの商品がいいかわからない」と感じたとき、「今月の売れ筋TOP5」が目に入れば、まずそこから見てみようとなります。ランキングは、ユーザーの 「選ぶ負担」を減らしてくれるナビゲーション でもあるんです。

わたし自身、以前企業のShopifyストア運営に携わっていたとき、ランキング表示を導入したセクションは明らかに回遊率が上がりました。「何を買えばいいかわからない」というお客様の背中を、ランキングがそっと押してくれるイメージです。顧客が自分で選択するのももちろんですが、こちらから提案してあげることはとても大事です。

効果を数字で語った公開情報もあります。サイト内検索サービスを提供するジーニーは自社ブログで、ランキング機能を使ったユーザーのCVRが全体の2.6倍、1セッションあたりのPV数が2.4倍、売上に占めるランキング経由の割合が50%以上だったと書いています。ただしこれは「ジーニー調べ」として公表された自社データで、対象ストア名も母数も公開されていません。自分のストアで同じ倍率が出る根拠にはならないので、桁感の参考として読んで、導入後は自店の数字で確かめてください。この記事の後半に、何を見て判断するかをまとめています。

出典：GENIEE SEARCH — ランキング機能でCVRが改善！？

Shopifyでランキング表示を実装する4つの方法は何が違う？

まず全体像です。4つの方法は「かかる費用」ではなく「誰がメンテナンスし続けるか」で性格が分かれます。

Liquid編集は「無料」の列に入っていますが、テーマをアップデートするたびに差分を当て直す手間が発生します。ここを自分で持てるかどうかが、実質的な分かれ目です。

2行目のCSSだけの方法は、大きく分けると1行目の標準コレクションの延長です。並び順はShopifyに任せたまま、番号の見た目だけを足します。テーマのテンプレートを開かずに済むので、次の節で先に説明します。

標準コレクションの「ベストセラー順」でどこまでできる？

もっともシンプルな方法は、Shopifyの コレクション機能 で並び替えを「ベストセラー」にすることです。追加費用はかからず、管理画面の操作だけで完結します。

1. 1

   コレクションを作成する

   Shopify管理画面 →「商品管理」→「コレクション」→「コレクションを作成」を選択します。
2. 2

   自動コレクションに設定する

   コレクションのタイプを「自動」に設定し、条件を指定します（例：在庫数が0より大きい商品すべて）。条件は最大60件まで追加できます。
3. 3

   並び替えを「ベストセラー」に変更する

   「並び替え」ドロップダウンから「ベストセラー」を選択します。
4. 4

   ナビゲーションに追加する

   作成したコレクションをヘッダーメニューやトップページのセクションに追加して、お客様がアクセスしやすくします。

出典：Shopify ヘルプセンター — レガシー自動コレクション

並び替えの選択肢は、関連度・ベストセラー・商品名（昇順/降順）・価格（高い順/安い順）・作成日（新しい順/古い順）・手動の7通りです。ヘルプセンターはベストセラーについて「その商品が含まれたこれまでの総注文数に基づいて」並べると説明しています。

出典：Shopify ヘルプセンター — コレクションのレイアウトと並び替え

標準機能の制約を、できること・できないことで整理するとこうなります。

つまり標準機能は「売れている順に並ぶ棚」までは作れますが、「1位」と書かれた札を貼るところまではやってくれません。札が欲しいなら、次のCSSかLiquid、あるいはアプリに進みます。

テーマのLiquidを触らずに順位番号だけ出せますか？

出せます。並び順は標準コレクションの「ベストセラー順」に任せたまま、番号は CSSのカウンター で振るという手があります。テーマのテンプレートファイルを1行も開かずに済むので、「Liquidは怖いが、CSSくらいなら書ける」という段階ではこれがいちばん現実的です。

CSSカウンター

counter-reset で数え始める場所を決め、counter-increment で要素ごとに1ずつ増やし、content: counter(名前) で画面に出す仕組みです。番号はHTMLのどこにも書かれておらず、ブラウザが並んでいる順から生成します。

貼り付け先は、テーマエディタの「テーマ設定」→「カスタムCSS」です。Shopifyヘルプセンターは、ここに入れたCSSがチェックアウトを除くオンラインストアのすべてのページに適用されると説明しています。テーマのファイルを直接書き換えるわけではないので、うまくいかなければ欄を空にすれば元に戻ります。

出典：Shopify ヘルプセンター — テーマ設定をカスタマイズする

/* 数え始める場所（商品グリッド全体） */
.product-grid {
  counter-reset: ranking;
}

/* 1商品ごとに1ずつ増やす */
.product-grid > li {
  counter-increment: ranking;
  position: relative;
}

/* 増やした数を商品カードの左上に出す */
.product-grid > li::before {
  content: counter(ranking);
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: #010080;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}

/* 6位以降は番号を出さない（TOP5だけ見せたいとき） */
.product-grid > li:nth-child(n + 6)::before {
  content: none;
}

セレクタの名前はテーマによって変わります。Dawn系のテーマなら商品グリッドが .product-grid、その中の1商品が li ですが、別のテーマでは .collection__grid のような名前が付いていることもあります。商品カードの上で右クリックして「検証」を開き、実際に付いているクラス名に置き換えてから貼ってください。

CSSカウンターとLiquid編集の違いを、できること・できないことで整理しておきます。

「並び替えが変わったら番号を消したい」「2ページ目も6位から続けたい」まで求めるなら、次のLiquidに進んでください。

Liquidでランキング番号を表示するには？

テーマのコードを編集して、商品カードに順位番号を重ねる方法です。鍵になるのは forloop オブジェクトです。

forloop.index

Liquidの for ループが今何周目かを、1始まりで返すプロパティです。0始まりが欲しい場合は forloop.index0 を使います。ループの残り回数は forloop.rindex、全体の回数は forloop.length で取れます。

出典：Shopify.dev — Liquid forloop オブジェクト

商品ループの中で forloop.index を出力するだけで、そのまま順位番号になります。

{% for product in collection.products %}
  <div class="ranking-card">
    <span class="ranking-badge">{{ forloop.index }}</span>
    {% render 'card-product', card_product: product %}
  </div>
{% endfor %}

編集するファイルは、Online Store 2.0のテーマなら sections/main-collection-product-grid.liquid が入口になることが多いです（テーマによって名前が異なります）。バッジの見た目は、テーマのCSSに次のようなクラスを足して調整します。

.ranking-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: #010080;
  color: #fff;
  font-weight: 700;
}

1位・2位・3位だけ見た目を変えるには？

全順位が同じ色のバッジだと、1位の特別感が出ません。forloop.index の値で分岐すれば、上位3位だけ別のクラスを当てられます。if を3つ並べるより、case 文のほうが読みやすくなります。

{% for product in collection.products %}
  <div class="ranking-card">
    {% case forloop.index %}
      {% when 1 %}
        <span class="ranking-badge ranking-badge--gold">{{ forloop.index }}</span>
      {% when 2 %}
        <span class="ranking-badge ranking-badge--silver">{{ forloop.index }}</span>
      {% when 3 %}
        <span class="ranking-badge ranking-badge--bronze">{{ forloop.index }}</span>
      {% else %}
        <span class="ranking-badge">{{ forloop.index }}</span>
    {% endcase %}
    {% render 'card-product', card_product: product %}
  </div>
{% endfor %}

CSS側は、さきほどの .ranking-badge に修飾クラスを3つ足すだけです。背景色だけを上書きするので、大きさや形はそのまま引き継がれます。

.ranking-badge--gold {
  background: #c8a02c;
}
.ranking-badge--silver {
  background: #8d9298;
}
.ranking-badge--bronze {
  background: #a06b3c;
}

前の節のCSSカウンターで番号を出している場合も考え方は同じで、.product-grid > li:nth-child(1)::before から :nth-child(3)::before に同じ背景色を当てれば揃います。

順位を正しく振るために知っておきたい3つの仕様

1. 01

   ループは1ページ50件で止まる

   for ループは1ページあたり50回までしか回りません。51件目以降も扱いたい場合は paginate タグで囲み、ページサイズを指定します。指定できるのは1〜250の範囲です。
2. 02

   ページをまたぐと番号が1に戻る

   forloop.index はそのページの中での位置です。2ページ目でも「1」から始まるので、通し番号にしたい場合は paginate.current_offset を足して補正します。
3. 03

   並び順はコレクション側の設定で決まる

   collection.products が返す順番は、管理画面で設定したデフォルト並び順（collection.default_sort_by）と、URLパラメータによる並び替え（collection.sort_by）で変わります。番号を振る前に、どちらが効いているかを確かめてください。

出典：Shopify.dev — paginate タグ

出典：Shopify.dev — Liquid collection オブジェクト

collection.sort_by は、URLに並び替えパラメータが付いていないときは nil を返します。お客様が価格の安い順に並べ替えた状態でも「1位」のバッジが出たままだと表示が嘘になるので、次のように並び順を見てバッジを出し分けておくと安全です。

{% assign active_sort = collection.sort_by | default: collection.default_sort_by %}
{% for product in collection.products %}
  {% if active_sort == 'best-selling' %}
    <span class="ranking-badge">{{ forloop.index }}</span>
  {% endif %}
  {% render 'card-product', card_product: product %}
{% endfor %}

出典：Shopify ヘルプセンター — テーマコードを編集する

なお、この方法で表示できるのはあくまで「今のコレクションの並び順に沿った通し番号」です。「直近7日間の売上金額ランキング」のような集計をLiquidだけで作ることはできません。注文データを期間で集計する処理が必要になるため、そこから先はアプリの領域です。

アプリでShopifyのランキング表示を置くと何が変わる？

アプリを使う場合、設置はテーマエディタ上のドラッグ＆ドロップで完結します。これは テーマアプリ拡張（theme app extensions） という仕組みで、アプリが提供する「アプリブロック」をセクションの中に差し込む形です。shopify.dev は、この仕組みによってマーチャントが自分でテーマコードを編集する必要がなくなる、と説明しています。

出典：Shopify.dev — テーマアプリ拡張

どのアプリを選ぶかは、集計期間・集計指標・効果測定・コレクション対応・日本語サポートの5軸で決まります。判断軸と各アプリの料金は Shopifyランキングアプリ比較 — 標準ベストセラー順の落とし穴と選び方 に分けてまとめました。この記事は「実装して表示するまで」に集中しているので、アプリ選定はそちらを見てください。日本語対応アプリ全般の選び方は Shopifyの日本語対応アプリだけで始めるEC運営 でも触れています。

まるっと売上ランキング

公開中 日本製

これはわたし（SHIN）が開発・提供しているアプリです。Shopifyの注文データからランキングを毎日自動集計し、ストア全体またはコレクション別に表示できます。

料金は Basicが$12/月、Proが$29/月 で、どちらも7日間の無料トライアル付きです。

→ まるっと売上ランキングの詳細を見る

→ Shopify App Storeで7日間無料体験を始める

Shopifyのランキング表示はどこに置くのが正解？

同じランキングでも、置き場所によって役割がまったく変わります。3か所を使い分けると、それぞれ別の迷いに答えられます。

1. 1

   トップページ：初訪問の入口にする

   ストアに何があるかを知らない人に、まず見るべき棚を提示します。ファーストビューからスクロール1〜2回で届く位置が目安です。奥に置くほど、そもそも見られなくなります。

2. 2

   コレクションページ：カテゴリー内の迷いを消す

   「スキンケアは見たいが、どれから見ればいいかわからない」という状態に効きます。全店総合ランキングではなく、そのカテゴリーだけのランキングを出すのがポイントです。

3. 3

   商品ページ下部：離脱の受け皿にする

   見ていた商品が刺さらなかった人を、売れ筋に戻します。ここだけは「比較のための一覧」なので、順位番号よりも商品画像の見やすさを優先したほうが機能します。

成果を出すための運用面のコツもまとめておきます。

1. 01

   集計期間を画面に書く

   「今週の売れ筋」「月間ランキング」のように期間を明示すると、データの鮮度が伝わります。期間が書かれていないランキングは、いつのものか判断できません。
2. 02

   ランキングから直接カートに入れられるようにする

   「欲しい」と思った瞬間に商品ページへ遷移させると、そこで一度冷めます。カート追加ボタンをランキングカードに載せられるなら載せてください。
3. 03

   更新が止まったランキングは置かない

   何か月も順位が変わらないランキングは、「このストア、動いていないのかな」という印象につながります。最低でも週1回、できれば日次で更新される状態を保ちます。
4. 04

   スマートフォンでの見え方を先に確認する

   順位バッジは画面が狭いほど商品画像に被ります。PCで作り込む前に、実機の幅で1行に何商品並ぶかを決めておくと手戻りが減ります。

設置したあとのランキング表示は何を見て直す？

置いて終わりにすると、効いているのかどうかが永遠にわかりません。見るべき数字は3つだけです。

• ランキングセクションの表示回数とクリック率（見られているか、押されているか）
• ランキング経由で商品ページに入った人の購入率（他の導線と比べて高いか）
• 1位の商品がどのくらいの期間固定されているか（入れ替わらないなら集計期間が長すぎます）

クリック率が低いときは、まず置き場所を疑ってください。クリックはされているのに購入率が上がらないときは、ランキングの中身がお客様の関心とずれています。この場合はカテゴリー別ランキングに切り替えると改善することが多いです。

検索から入ってきた人にもランキングを見せたい場合は、サイト内検索の結果ページとの組み合わせが効きます。詳しくは Shopifyのサイト内検索を改善して売上を上げる方法 にまとめました。ランキングページ自体を検索流入の受け皿にしたい場合は ShopifyのSEO対策ガイド もあわせてどうぞ。

ランキング導入前に確認しておくこと

• 商品数が十分にあるか（目安：10商品以上）
• 販売実績のデータが蓄積されているか
• テーマがOnline Store 2.0に対応しているか（アプリ利用の場合）
• ランキングの集計基準を決めているか（販売数か、売上金額か）
• 表示位置のイメージがあるか（トップページか、コレクションページか）

まとめ

Shopifyのランキング表示は、次の順番で試すのが遠回りになりません。

1. 1

   標準コレクションで棚を作る

   並び替えを「ベストセラー」にするだけ。無料で、反応があるかどうかを先に確かめられます。
2. 2

   番号だけ欲しいならカスタムCSS

   テーマ設定のカスタムCSS欄に counter-increment を書けば、テンプレートを開かずに番号が出ます。失敗しても欄を空にすれば戻ります。
3. 3

   並び替えに追従させたいならLiquid

   forloop.index で番号を振り、case 文で上位3位の色を変え、paginate で50件の壁を越えます。テーマは必ず複製してから触ります。
4. 4

   期間別集計まで必要ならアプリ

   週間・月間の集計はLiquidだけでは作れません。テーマアプリ拡張なら、テーマ更新に強い形で設置できます。

ユーザーの「何を買えばいいかわからない」という迷いを解消し、社会的証明の力で購買を後押しする。まずは並び替えの変更から、今日5分で試してみてください。

PR→ Shopifyを無料で試してみる

→ まるっと売上ランキングの詳細を見る

→ まるっと売上ランキングをShopifyに追加する

よくある質問