How to Display Product Rankings on Your Shopify Store

ECサイトで買い物をするとき、「人気ランキング」をつい見てしまう。そんな経験、ありませんか？

Amazonや楽天では当たり前のように売れ筋ランキングが表示されていますが、Shopifyストアでは自分で実装しないとランキングが表示されません。正直なところ、Shopifyの標準機能だけだとちょっと物足りない部分です。

でも、ランキング表示の効果は想像以上です。GENIEE SEARCHの調査によると、ECサイトでランキングを利用したユーザーの コンバージョン率は全体の2.6倍 になるというデータがあります。

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

この記事では、Shopifyストアにランキング表示を実装する具体的な方法を3つ紹介します。コードが書けなくても大丈夫な方法もあるので、ぜひ自分のストアに合ったやり方を見つけてください。

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

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

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

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

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

リコーの消費者調査でも、「多くの人が購入済み」という表示を見ると購買意欲が高まると回答した人が 64.9% にのぼっています。

出典：リコー - お客さまを買う気にさせるには？

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

Shopifyでランキング表示を実装する3つの方法

Shopifyでランキングを表示するには、大きく分けて3つの方法があります。

もうひとつ、Liquidコードを直接編集する方法もありますが、テーマのアップデートで壊れるリスクがあるため、コーディングに慣れている方向けです。

方法1：標準のコレクション機能を使う（無料）

もっともシンプルな方法は、Shopifyの コレクション機能 で「ベストセラー」順に並べることです。

1. 1

   コレクションを作成する

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

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

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

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

   「並び替え」ドロップダウンから「ベストセラー」を選択します。これで販売数の多い順に商品が並びます。
4. 4

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

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

参考：Shopify公式ヘルプ - コレクションの作成

方法2：Liquidコードを編集する（中〜上級者向け）

テーマのコードを直接編集して、ランキング番号を表示する方法です。

1. 1

   テーマコードエディタを開く

   「オンラインストア」→「テーマ」→「コードを編集」からテーマファイルにアクセスします。
2. 2

   コレクションテンプレートを編集する

   main-collection-product-grid.liquid（テーマにより名前が異なります）を開き、商品ループの中にランキング番号を表示するコードを追加します。
3. 3

   CSSでデザインを調整する

   番号のフォントサイズ、色、位置をCSSで調整します。

方法3：ランキングアプリを導入する（おすすめ）

もっとも手軽で、かつ本格的なランキング表示を実現できるのが アプリの導入 です。ノーコードでランキング番号、バッジ、集計期間の切り替えなどが設定できます。

おすすめのShopifyランキングアプリ

ここからは、日本語対応のShopifyランキングアプリを紹介します。

リテリア Ranking

日本の開発チームが作った、ノーコードでランキング表示ができるアプリです。テーマエディタから直感的にデザインをカスタマイズでき、日本語のサポートも充実しています。

→ リテリア Ranking をShopifyアプリストアで見る

Awesome Ranking

タブ切り替え式のランキング表示が特徴で、カテゴリ別・予算別など柔軟な条件でランキングを作成できます。日本語を含む10か国語に対応しています。

→ Awesome Ranking をShopifyアプリストアで見る

Rank King

直近7日間、30日間、シーズンなど、期間を指定してベストセラーを表示できるアプリです。注文数・販売数量・売上金額の3軸でランキングを生成できます。

→ Rank King をShopifyアプリストアで見る

まるっと売上ランキング

これはわたし（SHIN）が開発しているアプリです。手前味噌になりますが、他のランキングアプリを使う中で「こういう機能がほしかった」と感じたポイントを詰め込んでいます。

料金は $12/30日 で、7日間の無料トライアル付きです。

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

ランキング表示で成果を出すための5つのコツ

ランキングを設置しただけで満足してはもったいないです。効果を最大化するためのポイントをまとめました。

1. 01

   トップページのファーストビュー近くに配置する

   ランキングは目立つ位置にあってこそ価値を発揮します。スクロールしないと見えない場所では、利用率がぐっと下がります。
2. 02

   集計期間を表示して信頼感を出す

   「今週の売れ筋」「月間ランキング」のように期間を明示することで、データの鮮度が伝わり、信頼性が高まります。
3. 03

   カテゴリ別ランキングも用意する

   全商品の総合ランキングだけでなく、カテゴリ別（例：スキンケア部門、ヘアケア部門）のランキングを用意すると、ニッチなニーズにも応えられます。
4. 04

   ランキングからカート追加できるようにする

   ランキングを見て「欲しい」と思ったタイミングで、すぐカートに追加できる導線があると、離脱を防げます。
5. 05

   定期的にデータを更新する

   ランキングが何か月も変わらないと「このストア、動いてないのかな」と思われます。最低でも週1回、できれば毎日の自動更新がベストです。

ランキング表示とあわせて使いたいShopify施策

ランキング表示は単体でも効果がありますが、他の施策と組み合わせるとさらに威力が増します。

• レビュー・口コミ表示と併用する（社会的証明の二重効果）
• 期間限定セールとランキングを連動させる（「セール中の人気商品」は最強の訴求）
• メールマーケティングで「今週のランキングTOP3」を配信する
• SNS投稿で「月間ベストセラー」を紹介する
• Google Analyticsでランキングセクションのクリック率を計測する

→ Shopifyで口コミ・レビューを集めるおすすめアプリ5選

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

ランキングを導入する前に、いくつか確認しておきたいポイントがあります。

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

まとめ

ランキング表示は、ECサイトにおいて もっとも費用対効果の高い施策のひとつ です。

ユーザーの「何を買えばいいかわからない」という迷いを解消し、社会的証明の力で購買を後押しする。ランキング利用者のCVRが2.6倍というデータが示すとおり、やらない理由がありません。

Shopifyでの実装方法を振り返ると、以下の3つがあります。

1. 1

   標準コレクション機能

   無料で始められるが、ランキング番号やバッジは非対応
2. 2

   Liquidコード編集

   自由度は高いが、テーマ更新時のリスクあり
3. 3

   ランキングアプリ導入

   ノーコードで本格ランキング。もっともバランスが良い方法

まだランキングを導入していないなら、まずはコレクションの「ベストセラー」並び替えから試してみてください。そこで効果を実感できたら、アプリでさらに本格的なランキング表示に進化させるのがおすすめです。

→ Shopifyを無料で試してみる

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

よくある質問