---
title: Shopifyで商品ランキングを表示する方法とは？注意点も解説！
description: Shopifyでランキングを表示する方法を解説。標準機能による設定手順やランキングバッジの表示方法、活用ポイント、注意点まで詳しく紹介します。
image: https://plus-shipping.com/hubfs/Shopify%E3%81%A7%E5%95%86%E5%93%81%E3%83%A9%E3%83%B3%E3%82%AD%E3%83%B3%E3%82%B0%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%81%A8%E3%81%AF%3F%E6%B3%A8%E6%84%8F%E7%82%B9%E3%82%82%E8%A7%A3%E8%AA%AC!.png
---

[![プラスシッピング](https://plus-shipping.com/hubfs/logo_plus-shipping.png)](https://plus-shipping.com/?hsLang=ja-jp)

- ブログ
  
    - [お知らせ](https://plus-shipping.com/blogs/tag/%E3%81%8A%E7%9F%A5%E3%82%89%E3%81%9B)
    - [ウェビナー＆イベント](https://plus-shipping.com/blogs/tag/%E3%82%A6%E3%82%A7%E3%83%93%E3%83%8A%E3%83%BC%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88)
    - [Shopifyガイド](https://plus-shipping.com/blogs/tag/shopify%E3%82%AC%E3%82%A4%E3%83%89)
    - [Shopifyアプリ](https://plus-shipping.com/blogs/tag/shopify%E3%82%A2%E3%83%97%E3%83%AA)
    - [物流・配送](https://plus-shipping.com/blogs/tag/%E7%89%A9%E6%B5%81-%E9%85%8D%E9%80%81)
    - [事例一覧](https://plus-shipping.com/blogs/tag/%E4%BA%8B%E4%BE%8B%E4%B8%80%E8%A6%A7)
- [ウェビナー情報](https://plus-shipping.com/blogs/tag/%E3%82%A6%E3%82%A7%E3%83%93%E3%83%8A%E3%83%BC%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88)
- [ご利用料金](https://plus-shipping.com/price)

- [資料ダウンロード](https://plus-shipping.com/download)
- [お問い合わせ](https://plus-shipping.freshdesk.com/support/tickets/new)

![](https://plus-shipping.com/hubfs/raw_assets/public/plus_shipping_2024/assets/images/icon_hamburger.svg)

[![プラスシッピング](https://plus-shipping.com/hubfs/logo_plus-shipping.png)](https://plus-shipping.com/?hsLang=ja-jp)

![](https://plus-shipping.com/hubfs/raw_assets/public/plus_shipping_2024/assets/images/icon_close.svg)

- ブログ
  
    - [お知らせ](https://plus-shipping.com/blogs/tag/%E3%81%8A%E7%9F%A5%E3%82%89%E3%81%9B)
    - [ウェビナー＆イベント](https://plus-shipping.com/blogs/tag/%E3%82%A6%E3%82%A7%E3%83%93%E3%83%8A%E3%83%BC%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88)
    - [Shopifyガイド](https://plus-shipping.com/blogs/tag/shopify%E3%82%AC%E3%82%A4%E3%83%89)
    - [Shopifyアプリ](https://plus-shipping.com/blogs/tag/shopify%E3%82%A2%E3%83%97%E3%83%AA)
    - [物流・配送](https://plus-shipping.com/blogs/tag/%E7%89%A9%E6%B5%81-%E9%85%8D%E9%80%81)
    - [事例一覧](https://plus-shipping.com/blogs/tag/%E4%BA%8B%E4%BE%8B%E4%B8%80%E8%A6%A7)
- [ウェビナー情報](https://plus-shipping.com/blogs/tag/%E3%82%A6%E3%82%A7%E3%83%93%E3%83%8A%E3%83%BC%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88)
- [ご利用料金](https://plus-shipping.com/price)

- [資料ダウンロード](https://plus-shipping.com/download)
- [お問い合わせ](https://plus-shipping.freshdesk.com/support/tickets/new)

- [TOP](https://plus-shipping.com/)
- [ブログ](https://plus-shipping.com/blogs)
- [Shopifyアプリ](https://plus-shipping.com/blogs/tag/shopifyアプリ)
- Shopifyで商品ランキングを表示する方法とは？注意点も解説！

# Shopifyで商品ランキングを表示する方法とは？注意点も解説！

[Shopifyアプリ](https://plus-shipping.com/blogs/tag/shopifyアプリ)

2026-05-27 17:49:58

![](https://plus-shipping.com/hubfs/Shopify%E3%81%A7%E5%95%86%E5%93%81%E3%83%A9%E3%83%B3%E3%82%AD%E3%83%B3%E3%82%B0%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%81%A8%E3%81%AF%3F%E6%B3%A8%E6%84%8F%E7%82%B9%E3%82%82%E8%A7%A3%E8%AA%AC!.png)

Shopifyストアでは、ランキング表示を活用することで、人気商品や売れ筋商品を分かりやすく訴求できます。特に商品数が多いECサイトでは、ユーザーの商品選びをサポートできるため、回遊率向上や購入促進にもつながります。

Shopifyでは、標準機能のコレクションを使ったベストセラー表示だけでなく、アプリやLiquidカスタマイズによる高度なランキング表示にも対応可能です。

本記事では、Shopifyでランキングを表示する方法やメリット・デメリット、ランキングバッジの実装方法、活用時のポイントまで詳しく解説します。

Shopifyの配送料を安くしたい方へ

[![_______720](https://plus-shipping.com/hubfs/_______720.png)](https://apps.shopify.com/plusshipping?locale=ja)

国内三大宅配会社と個別契約なしで、特別価格で利用できる！

[Shopifyアプリを見る](https://apps.shopify.com/plusshipping?locale=ja) [資料ダウンロード](https://plus-shipping.com/download)

> 目次
> 
> - [Shopifyのランキングとは](https://plus-shipping.com/blogs/shopify-ranking#shopify-ranking)
>   
>     - [Shopifyにおけるランキング機能の概要](https://plus-shipping.com/blogs/shopify-ranking#overview-of-shopify-ranking)
>     - [ランキング表示とベストセラー表示の違い](https://plus-shipping.com/blogs/shopify-ranking#difference-between-ranking-and-best-seller)
>     - [Shopifyでランキング表示される主な指標](https://plus-shipping.com/blogs/shopify-ranking#ranking-metrics-on-shopify)
>     - [Shopifyでランキングを表示する主な方法](https://plus-shipping.com/blogs/shopify-ranking#ways-to-display-rankings-on-shopify)
> 
> - [Shopifyでランキングを表示するメリット](https://plus-shipping.com/blogs/shopify-ranking#benefits-of-shopify-ranking)
>   
>     - [人気商品が一目で分かり購買を後押しできる](https://plus-shipping.com/blogs/shopify-ranking#highlight-popular-products)
>     - [商品検索性が向上し回遊率アップにつながる](https://plus-shipping.com/blogs/shopify-ranking#improve-product-discovery-and-engagement)
>     - [社会的証明により安心感を与えられる](https://plus-shipping.com/blogs/shopify-ranking#build-trust-with-social-proof)
>     - [新しい商品との出会いを作れる](https://plus-shipping.com/blogs/shopify-ranking#help-users-discover-new-products)
>     - [トレンドや季節性を反映しやすい](https://plus-shipping.com/blogs/shopify-ranking#reflect-trends-and-seasonality)
> 
> - [Shopifyでランキングを表示するデメリット](https://plus-shipping.com/blogs/shopify-ranking#disadvantages-of-shopify-ranking)
>   
>     - [売れ筋商品が固定化しやすい](https://plus-shipping.com/blogs/shopify-ranking#popular-products-become-fixed)
>     - [新商品の露出が減少する可能性がある](https://plus-shipping.com/blogs/shopify-ranking#reduced-visibility-for-new-products)
>     - [ユーザーの選択肢が偏りやすい](https://plus-shipping.com/blogs/shopify-ranking#limited-product-choices-for-users)
>     - [標準機能ではランキング基準の自由度が低い](https://plus-shipping.com/blogs/shopify-ranking#limited-ranking-flexibility-with-standard-features)
>     - [アプリ導入やカスタマイズにコストがかかる](https://plus-shipping.com/blogs/shopify-ranking#costs-for-apps-and-customization)
> 
> - [Shopifyでランキングを表示する方法【標準機能】](https://plus-shipping.com/blogs/shopify-ranking#display-shopify-rankings-with-standard-features)
>   
>     - [ランキング用のコレクションを作成する](https://plus-shipping.com/blogs/shopify-ranking#create-ranking-collections)
>     - [コレクションをベストセラー順に並び替える](https://plus-shipping.com/blogs/shopify-ranking#sort-collections-by-best-sellers)
>     - [ランキングをトップページに表示する](https://plus-shipping.com/blogs/shopify-ranking#display-rankings-on-homepage)
>     - [ランキングをメニューに表示する](https://plus-shipping.com/blogs/shopify-ranking#add-rankings-to-navigation-menu)
> 
> - [Shopifyのランキングにバッジを表示する方法](https://plus-shipping.com/blogs/shopify-ranking#display-ranking-badges-on-shopify)
>   
>     - [ランキングバッジとは](https://plus-shipping.com/blogs/shopify-ranking#what-are-ranking-badges)
>     - [Shopifyでランキングバッジを表示する主な方法](https://plus-shipping.com/blogs/shopify-ranking#ways-to-display-ranking-badges)
>     - [Liquidでランキングバッジを表示する際の注意点](https://plus-shipping.com/blogs/shopify-ranking#liquid-customization-considerations)
> 
> - [Shopifyのランキング表示におすすめのアプリ](https://plus-shipping.com/blogs/shopify-ranking#recommended-shopify-ranking-apps)
>   
>     - [シンプルランキング表示](https://plus-shipping.com/blogs/shopify-ranking#simple-ranking-display)
>     - [Awesome Ranking](https://plus-shipping.com/blogs/shopify-ranking#awesome-ranking)
>     - [Rank King](https://plus-shipping.com/blogs/shopify-ranking#rank-king)
> 
> - [Shopifyでランキングを活用するポイントと注意点](https://plus-shipping.com/blogs/shopify-ranking#tips-for-using-shopify-rankings)
>   
>     - [ランキングの基準と表示ルールを明確にする](https://plus-shipping.com/blogs/shopify-ranking#clarify-ranking-rules-and-criteria)
>     - [期間別・カテゴリ別ランキングを活用する](https://plus-shipping.com/blogs/shopify-ranking#use-category-and-time-based-rankings)
>     - [売れ筋商品の固定化と新商品の露出不足に注意する](https://plus-shipping.com/blogs/shopify-ranking#avoid-overexposure-of-best-sellers)
>     - [ランキングバッジは視認性とデザイン性を意識する](https://plus-shipping.com/blogs/shopify-ranking#improve-badge-visibility-and-design)
>     - [アプリ導入やLiquid編集時はコスト・表示速度・保守性を確認する](https://plus-shipping.com/blogs/shopify-ranking#consider-cost-speed-and-maintenance)

[簡単配送アプリプラスシッピング インストールはこちら](https://apps.shopify.com/plusshipping?locale=ja)

## Shopifyのランキングとは

まず始めに、Shopifyにおけるランキング機能の概要や、ベストセラー表示との違いについて解説します。

### Shopifyにおけるランキング機能の概要

Shopifyのランキングとは、売れ筋商品や人気商品を順位付けして表示する機能・見せ方のことです。ECサイト上で「人気ランキング」「売れ筋ランキング」「おすすめランキング」などを表示することで、ユーザーが商品を選びやすくなります。

特に商品数が多いストアでは、ユーザーがどの商品を選べば良いか迷いやすくなります。ランキングを設置すると、人気商品や注目商品を分かりやすく提示できるため、購入判断を後押ししやすくなります。

Shopifyでは、標準機能のコレクションを活用してベストセラー順に商品を並べたり、アプリを使って期間別・カテゴリ別のランキングを表示したりできます。表示したいランキングの内容や更新頻度に応じて、適した方法を選ぶことが大切です。

### ランキング表示とベストセラー表示の違い

ランキング表示とは、あらかじめ決めた基準に沿って商品を順位付けし、1位・2位・3位のように見せる表示方法です。売上金額や販売個数、レビュー評価、閲覧数など、どの指標を使うかによってランキングの内容は変わります。

一方、ベストセラー表示は、売れ筋商品を中心に並べる表示方法です。Shopifyの標準機能では、コレクションの商品並び替えで「ベストセラー」を選択すると、売れ筋順に商品を表示できます。

ただし、標準機能のベストセラー表示は、自由に集計期間や細かな条件を指定できるわけではありません。例えば、「過去7日間の売上順」「カテゴリ別の販売個数順」「レビュー評価順」などを細かく設定したい場合は、アプリの導入やコード編集によるカスタマイズが必要です。

### Shopifyでランキング表示される主な指標

Shopifyでランキングを表示する際は、何を基準に順位付けするかを決める必要があります。代表的な指標としては、売上金額や販売個数、注文数、閲覧数・人気度、レビュー評価などがあります。

売上金額は、売り上げ規模の大きい商品を上位に表示したい場合に使われる指標です。単価の高い商品が上位に入りやすいため、売り上げ貢献度を見せたいストアに向いています。

販売個数は、実際に多く購入されている商品をランキング化する際に使われます。ユーザーに「多くの人が選んでいる商品」として伝えやすく、購入の安心感にもつながります。

注文数は、販売個数とは少し異なり、注文単位で人気を判断する指標です。まとめ買いの影響を受けにくいため、購入者数に近い感覚で売れ筋を見せたい場合に適しています。

閲覧数・人気度は、商品ページへのアクセスやクリック数などをもとにした指標です。購入には至っていないものの、注目度の高い商品を見せたい場合に活用できます。

レビュー評価は、購入者の満足度を基に商品を並べる指標です。単なる売れ筋ではなく、評価の高い商品を紹介したい場合に有効です。ただし、レビュー機能やレビューアプリとの連携が必要になるケースもあります。

### Shopifyでランキングを表示する主な方法

Shopifyでランキングを表示する方法は、標準機能を利用する方法とアプリを利用する方法、Liquidでカスタマイズする方法の三つがあります。

最も手軽なものは、コレクション機能で商品を「ベストセラー順」に並び替える方法です。一方で、期間別ランキングやカテゴリ別ランキングなど、より高度な表示を行いたい場合はアプリが必要になるケースがあります。

また、Liquidを編集すると、ランキングバッジの表示や独自デザインのランキング実装も可能です。ただし、コード編集が必要になるため、専門知識が求められます。

## Shopifyでランキングを表示するメリット

Shopifyでランキングを表示するメリットは次のとおりです。

- 人気商品が一目で分かり購買を後押しできる
- 商品検索性が向上し回遊率アップにつながる
- 社会的証明により安心感を与えられる
- 新しい商品との出会いを作れる
- トレンドや季節性を反映しやすい

それぞれのメリットを詳しく解説します。

### 人気商品が一目で分かり購買を後押しできる

ランキングを表示すると、ユーザーはどの商品が人気なのかを瞬時に把握できます。特に初めて訪問したユーザーは、どの商品を選べばよいか分からないケースも多いため、ランキングが購入判断の基準として機能します。

また、「売れている商品＝多くの人に選ばれている商品」という印象を与えやすく、購入への心理的ハードルを下げやすい点もメリットです。商品選びで迷っているユーザーの後押しにもつながります。

### 商品検索性が向上し回遊率アップにつながる

ランキングは、ユーザーの商品探しをサポートする導線としても有効です。特に商品点数が多いストアでは、目的の商品へたどり着くまでに時間がかかり、途中で離脱されるケースも少なくありません。

ランキングページを設置しておくと、人気商品や注目商品をまとめて見せられるため、商品探しの負担を軽減できます。結果として、ストア内の回遊率向上や離脱防止にもつながります。

### 社会的証明により安心感を与えられる

ECサイトでは実物を確認できないため、ユーザーは購入前に不安を感じやすい傾向があります。そこで効果的なものが、ランキングによる「社会的証明」です。

ランキング上位の商品を見ることで、「他の人も購入している」「多くのユーザーに選ばれている」という安心感を与えられます。レビューや口コミと組み合わせることで、さらに信頼性を高めやすくなります。

### 新しい商品との出会いを作れる

ランキングは、ユーザーが普段見ない商品を知るきっかけにもなります。検索やカテゴリ一覧だけでは埋もれてしまう商品でも、ランキングに掲載されることで露出を増やせます。

ランキングを設置すると、ユーザーが普段見ない商品にも注目が集まりやすくなります。検索やカテゴリ一覧だけでは埋もれやすい商品でも、ランキング経由で閲覧される機会を増やせます。

### トレンドや季節性を反映しやすい

ランキングは、売れ筋商品の変化を反映しやすい点もメリットです。時期によって人気商品を入れ替えやすく、ストアの鮮度維持にもつながります。

特にアパレルやコスメ、食品など、流行やシーズン要素が強い商材では効果的です。ユーザーに「今売れている商品」を分かりやすく伝えられるため、タイムリーな購買促進につながります。

## Shopifyでランキングを表示するデメリット

Shopifyでランキングを表示するデメリットは次のとおりです。

- 売れ筋商品が固定化しやすい
- 新商品の露出が減少する可能性がある
- ユーザーの選択肢が偏りやすい
- 標準機能ではランキング基準の自由度が低い
- アプリ導入やカスタマイズにコストがかかる

それぞれのデメリットを詳しく解説します。

### 売れ筋商品が固定化しやすい

ランキングは人気商品を目立たせやすい反面、同じ商品ばかりが上位表示され続けるケースがあります。特に販売数や売上金額のみを基準にしている場合、既に売れている商品へさらに注目が集まりやすくなります。

その結果、他の商品が埋もれやすくなり、ストア全体の商品バランスが偏る可能性があります。期間別ランキングやカテゴリ別ランキングを活用し、露出を分散させる工夫が重要です。

### 新商品の露出が減少する可能性がある

ランキングは過去の販売実績を基に表示されるケースが多いため、販売実績の少ない新商品は上位に入りにくい傾向があります。

そのため、新商品を販売開始しても、ランキング中心の導線では十分な露出を確保できない場合があります。新商品専用コレクションや新着一覧など、別の導線を用意しておくことが大切です。

### ユーザーの選択肢が偏りやすい

ランキング上位の商品は注目されやすいため、ユーザーの閲覧や購入が一部の商品へ集中しやすくなります。結果として、他の商品が見られにくくなる可能性があります。

また、ユーザーによって求める商品は異なるため、単純な売れ筋ランキングだけではニーズに合わないケースもあります。カテゴリ別や価格帯別など、複数の切り口でランキングを設置すると、選択肢の偏りを軽減しやすくなります。

### 標準機能ではランキング基準の自由度が低い

Shopifyの標準機能では、コレクションの並び替えで「ベストセラー」を利用できます。しかし、集計期間や細かな条件を自由に設定できるわけではありません。

例えば、「過去7日間の売上順」「レビュー評価順」「カテゴリ別ランキング」などを柔軟に表示したい場合は、標準機能だけでは対応が難しいケースがあります。より高度なランキングを実現するには、アプリやカスタマイズの活用が必要です。

### アプリ導入やカスタマイズにコストがかかる

ランキング機能を強化するためにアプリを導入する場合、月額料金が発生することがあります。機能が豊富なアプリほど料金が高くなる傾向があり、運営コスト増加につながる可能性があります。

また、Liquid編集による独自カスタマイズを行う場合は、プログラミング知識が必要です。外部へ依頼する場合には制作費や保守費用も発生するため、必要な機能とコストのバランスを考慮しながら導入方法を選ぶことが重要です。

[簡単配送アプリプラスシッピング インストールはこちら](https://apps.shopify.com/plusshipping?locale=ja)

## Shopifyでランキングを表示する方法【標準機能】

ここでは、Shopifyの標準機能を使ってランキングを表示する方法を解説します。

### ランキング用のコレクションを作成する

![Shopifyにコレクションを追加する](https://plus-shipping.com/hs-fs/hubfs/Shopify%E3%81%AB%E3%82%B3%E3%83%AC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B.png?width=2880&height=1574&name=Shopify%E3%81%AB%E3%82%B3%E3%83%AC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B.png)

まずは、ランキング表示用のコレクションを作成します。Shopifyでは、コレクション機能を利用することで、売れ筋商品を一覧表示できます。

作成手順は次のとおりです。

①管理画面「商品管理」→「コレクション」を開く  
②「コレクションを作成」をクリックする  
③コレクション名を入力する（例：人気ランキング）  
④コレクションの種類を「自動」または「手動」に設定する  
⑤保存する

自動コレクションを利用する場合は、条件に一致した商品を自動追加できます。ランキング用途では、ストア内の商品をまとめて対象にする設定が一般的です。

例えば、コレクションの種類を自動に設定した後、「ランキング」など、通常の商品名に含まれない文字列を条件として設定します。これにより、実質的にストア内のほぼ全商品をコレクションへ含められます。

一方、手動コレクションは、表示したい商品を自由に選択できる点が特徴です。特定の商品だけをランキング形式で見せたい場合に向いています。

### コレクションをベストセラー順に並び替える

![Shopifyのコレクションをベストセラー順に並び替える](https://plus-shipping.com/hs-fs/hubfs/Shopify%E3%81%AE%E3%82%B3%E3%83%AC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E3%83%99%E3%82%B9%E3%83%88%E3%82%BB%E3%83%A9%E3%83%BC%E9%A0%86%E3%81%AB%E4%B8%A6%E3%81%B3%E6%9B%BF%E3%81%88%E3%82%8B.png?width=2880&height=1574&name=Shopify%E3%81%AE%E3%82%B3%E3%83%AC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E3%83%99%E3%82%B9%E3%83%88%E3%82%BB%E3%83%A9%E3%83%BC%E9%A0%86%E3%81%AB%E4%B8%A6%E3%81%B3%E6%9B%BF%E3%81%88%E3%82%8B.png)

コレクションを作成したら、商品の並び順を設定します。Shopifyでは、コレクションごとに商品表示順を変更できます。

設定手順は次のとおりです。

①作成したコレクションを開く  
②「商品」セクションの「並び替え」をクリックする  
③「ベストセラー」を選択する  
④保存する

ベストセラーを選択すると、Shopify側の売り上げデータを基に売れ筋順で商品が表示されます。

### ランキングをトップページに表示する

![Shopifyのトップページにランキングを表示する](https://plus-shipping.com/hs-fs/hubfs/Shopify%E3%81%AE%E3%83%88%E3%83%83%E3%83%97%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AB%E3%83%A9%E3%83%B3%E3%82%AD%E3%83%B3%E3%82%B0%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B.png?width=2880&height=1574&name=Shopify%E3%81%AE%E3%83%88%E3%83%83%E3%83%97%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AB%E3%83%A9%E3%83%B3%E3%82%AD%E3%83%B3%E3%82%B0%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B.png)

作成したランキング用コレクションは、トップページにも表示できます。人気商品をトップページへ掲載することで、ユーザーの目に留まりやすくなります。

設定手順は次のとおりです。

①管理画面「オンラインストア」→「テーマ」→「テーマを編集する（カスタマイズ）」を開く  
②「セクションを追加」をクリックする  
③「特集コレクション」を選択する  
④ランキング用コレクションを指定する  
⑤見出し名を設定して保存する

テーマによって名称や表示方法が異なる場合がありますが、多くのテーマでは「特集コレクション」機能で対応できます。

### ランキングをメニューに表示する

![Shopifyのメニューにランキングを表示する](https://plus-shipping.com/hs-fs/hubfs/Shopify%E3%81%AE%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AB%E3%83%A9%E3%83%B3%E3%82%AD%E3%83%B3%E3%82%B0%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B.png?width=2880&height=1574&name=Shopify%E3%81%AE%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AB%E3%83%A9%E3%83%B3%E3%82%AD%E3%83%B3%E3%82%B0%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B.png)

ランキングページをメニューへ追加すると、ユーザーがいつでもランキング一覧へアクセスできるようになります。

設定手順は次のとおりです。

①管理画面「コンテンツ」→「メニュー」を開く  
②編集するメニューを選択する  
③「メニュー項目を追加」をクリックする  
④リンク先にランキング用コレクションを設定する  
⑤保存する

「人気ランキング」「売れ筋ランキング」など、ユーザーが分かりやすい名称を設定することがおすすめです。

## Shopifyのランキングにバッジを表示する方法

ここでは、Shopifyでランキングバッジを表示する方法や、実装時の注意点について解説します。

### ランキングバッジとは

ランキングバッジとは、「人気No.1」「売れ筋」「BEST SELLER」などのラベルを商品画像や商品カード上に表示する装飾のことです。ランキング上位の商品を視覚的に目立たせられるため、ユーザーの注目を集めやすくなります。

特に一覧ページやトップページでは、限られた時間でユーザーへ人気商品を伝える必要があります。ランキングバッジを活用すると、売れ筋商品を瞬時に認識してもらいやすくなり、クリック率や購入率向上にもつながります。

### Shopifyでランキングバッジを表示する主な方法

Shopifyでランキングバッジを表示する主な方法は、アプリを利用するもしくはテーマをカスタマイズする方法の二つです。

Shopifyアプリを利用すると、ランキングバッジを簡単に追加できます。例えば、「人気No.1」「今週の売れ筋」など、条件に応じたラベル表示に対応しているアプリもあります。

また、表示位置やデザインを管理画面上で調整できるアプリも多く、ノーコードで導入しやすい点が特徴です。おすすめのアプリは後述します。

より自由度の高いランキングバッジを実装したい場合は、テーマカスタマイズによる対応も選択肢になります。

例えば、Prestigeや Rise、Dawnなどのテーマでは、Liquid編集を行うことで商品カードへ独自のランキングバッジを表示できます。

ランキング順位ごとに異なるデザインを表示したり、特定条件の商品だけにバッジを表示したりすることも可能です。一方で、コード編集が必要になるため、専門知識が求められるケースもあります。

### Liquidでランキングバッジを表示する際の注意点

Liquid編集によるランキングバッジ実装は自由度が高い一方で、テーマ構造を理解した上で作業する必要があります。誤ったコードを追加すると、商品一覧ページや商品カードの表示崩れにつながる可能性があります。

また、利用しているテーマによって商品カードの構造や記述方法が異なるため、他テーマ向けのコードをそのまま流用できないケースも少なくありません。

さらに、テーマアップデート時に編集内容が上書きされる場合もあります。コード編集前にはテーマを複製し、バックアップを取ってから作業を進めましょう。

ランキングバッジを増やしすぎると、スマホ画面で商品画像や価格表示と重なり、視認性が低下するケースもあります。デザイン性だけでなく、ユーザーの見やすさも意識することが重要です。

## Shopifyのランキング表示におすすめのアプリ

ここでは、Shopifyのランキング表示におすすめのアプリを紹介します。

### シンプルランキング表示

![シンプルランキング表示](https://plus-shipping.com/hs-fs/hubfs/%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%83%A9%E3%83%B3%E3%82%AD%E3%83%B3%E3%82%B0%E8%A1%A8%E7%A4%BA.png?width=2880&height=1574&name=%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%83%A9%E3%83%B3%E3%82%AD%E3%83%B3%E3%82%B0%E8%A1%A8%E7%A4%BA.png)

シンプルランキング表示は、既に作成しているコレクションへランキングラベルを追加できるShopifyアプリです。

ランキングラベルは複数種類から選択でき、文字色やラベルカラーも自由に調整できます。ストアデザインに合わせて見た目をカスタマイズしやすく、ブランドイメージを崩しにくい点もメリットです。

また、ランキングコレクションをさまざまなページへ設置できるため、トップページやカテゴリページなどで人気商品を訴求したい場合にも向いています。

料金プランは月額5.99ドルの「Basic Plan」のみで、7日間の無料体験が利用可能です。

### Awesome Ranking

![Awesome Ranking](https://plus-shipping.com/hs-fs/hubfs/Awesome%20Ranking.png?width=2880&height=1574&name=Awesome%20Ranking.png)

Awesome Rankingは、日本製のShopifyランキングアプリです。コレクションを選択するだけでランキング表示を作成でき、比較的シンプルに導入できます。

複数コレクションを使ったタブ切り替え表示にも対応しており、「カテゴリ別ランキング」や「予算別ランキング」などを作成しやすい点が特徴です。また、コレクションの並び順を利用するため、売上順だけでなく「スタッフおすすめ順」のような独自ランキングにも活用できます。

さらに、テーマエディター上で編集できるほか、スマホ表示向けの調整機能も用意されています。日本人エンジニアによるサポートに対応している点も安心材料です。

料金プランは月額2ドルの「BASIC PLAN」のみで、7日間の無料体験が利用可能です。

### Rank King

![Rank King](https://plus-shipping.com/hs-fs/hubfs/Rank%20King.png?width=2880&height=1574&name=Rank%20King.png)

Rank Kingは、ランキング基準や集計期間を細かく設定できる高機能な日本製アプリです。注文数や売り上げ、販売個数など、複数の基準からランキングを作成できます。

また、「直近7日間」や「3月1日〜14日」など、期間指定を柔軟に行える点も特徴です。トレンド商品や期間限定ランキングを表示したいストアにも向いています。

商品一覧では、タブやドロップダウンによる絞り込み表示にも対応しています。

料金プランは月額5.90ドルの「ベーシック」と、月額11.90ドルの「スタンダード」、月額15.90ドルの「プロ」があり、14日間の無料体験が利用可能です。

## Shopifyでランキングを活用するポイントと注意点

ここでは、Shopifyでランキング機能を活用する際のポイントや注意点について解説します。

### ランキングの基準と表示ルールを明確にする

ランキング機能を活用する際は、まず「何を基準に順位付けするのか」を明確にすることが重要です。売上金額や販売個数、注文数、レビュー評価など、基準によってランキングの見え方は大きく変わります。

また、「過去7日間」「今月」「年間ランキング」など、どの期間を対象にするのかも重要です。基準や集計期間が分かりにくいと、ユーザーがランキングに不信感を持つ可能性があります。

そのため、「週間人気ランキング」「レビュー評価順」など、ユーザーが内容を理解しやすい表記を意識しましょう。

### 期間別・カテゴリ別ランキングを活用する

ランキングは、単純な総合ランキングだけでなく、期間別やカテゴリ別に分けて活用することがおすすめです。

例えば、「今週の人気商品」や「春の売れ筋ランキング」「メンズ人気ランキング」などを用意すると、ユーザーが目的の商品を探しやすくなります。また、季節性やトレンド感も演出しやすくなります。

特に商品数が多いストアでは、カテゴリ別ランキングを用意することで回遊率向上につながります。

### 売れ筋商品の固定化と新商品の露出不足に注意する

ランキング機能は便利ですが、同じ商品ばかりが上位表示される状態が続くと、売れ筋商品の固定化につながる可能性があります。

また、新商品は販売実績が少ないため、ランキングに表示されにくい傾向があります。その結果、新商品の露出機会が減少し、販売機会を逃してしまうケースもあります。

そのため、「新着商品」「急上昇商品」など、ランキング以外の導線も用意することが重要です。ランキング外の商品にもアクセスを集められる環境を整えましょう。

### ランキングバッジは視認性とデザイン性を意識する

ランキングバッジは、人気商品を目立たせる効果があります。しかし、装飾を増やしすぎると、サイト全体が見づらくなる原因にもなります。

例えば、「No.1」「人気」「売れ筋」など、短く分かりやすい文言を使用すると、ユーザーが瞬時に内容を理解しやすくなります。また、商品画像や価格表示を隠さない配置にすることも重要です。

PC表示だけでなく、スマホ表示も必ず確認しましょう。スマホではバッジが重なったり、商品情報が見えづらくなったりするケースもあります。

### アプリ導入やLiquid編集時はコスト・表示速度・保守性を確認する

Shopifyアプリを利用すると、高度なランキング機能を簡単に導入できます。ただし、アプリによっては月額費用が発生するため、運営コストとのバランスを確認する必要があります。

また、複数のランキング機能やバッジ表示を追加すると、ページの読み込み速度へ影響するケースもあります。特に商品一覧ページでは、表示速度低下がUX悪化につながる可能性があるため注意しましょう。

Liquid編集によるカスタマイズを行う場合は、テーマアップデート時の互換性にも注意が必要です。コード編集前にはテーマを複製し、バックアップを取ってから作業を進めることを推奨します。

[簡単配送アプリプラスシッピング インストールはこちら](https://apps.shopify.com/plusshipping?locale=ja)

Shopify配送注文アプリ

月額利用料無料

最短3クリックで送り状を発行

気になったら資料をチェック！

[資料ダウンロード](https://plus-shipping.com/download)

[記事一覧へ](https://plus-shipping.com/blogs)

この記事をシェア

- [![X](https://plus-shipping.com/hubfs/raw_assets/public/plus_shipping_2024/assets/images/icon_x.svg)](https://twitter.com/share?url=https://plus-shipping.com/blogs/shopify-ranking&text=Shopifyで商品ランキングを表示する方法とは？注意点も解説！)
- [![Facebook](https://plus-shipping.com/hubfs/raw_assets/public/plus_shipping_2024/assets/images/icon_facebook.svg)](https://www.facebook.com/share.php?u=https://plus-shipping.com/blogs/shopify-ranking)
- [![LinkedIn](https://plus-shipping.com/hubfs/raw_assets/public/plus_shipping_2024/assets/images/icon_linkedin.svg)](http://www.linkedin.com/shareArticle?mini=true&url=https://plus-shipping.com/blogs/shopify-ranking)

Shopify配送注文アプリ

月額利用料無料

最短3クリックで送り状を発行

- [資料ダウンロード](https://plus-shipping.com/download)
- [Shopifyアプリを見る](https://apps.shopify.com/plusshipping?locale=ja&_gl=1*tfd5rr*_gcl_aw*R0NMLjE3MDU1NjM5MDUuQ2p3S0NBaUFrcDZ0QmhCNUVpd0FOVEN4MU9HVnhWa0xMUnphUElyWDhTMHZaX0p5WVJnOEFqTE4ydUU3WVR1OUlEZzdKWG9ENW1GUW94b0NtTG9RQXZEX0J3RQ..*_gcl_au*MTk1ODU2NjU1Mi4xNjk4NjQ1NjE3*_ga*OTA2NTg4ODU5LjE2OTg2NDU2MTc.*_ga_1QE4FBB8K8*MTcwNjI2MDE3NS45Mi4xLjE3MDYyNjAyNTguMC4wLjA)

人気記事ランキング

- ### [[物流・配送](https://plus-shipping.com/blogs/tag/物流-配送) お米30kgを安く送る方法とは？ヤマト・佐川・日本郵便を徹底比較 2025.09.05](https://plus-shipping.com/blogs/shipping-cost-rice-30kg)
- ### [[物流・配送](https://plus-shipping.com/blogs/tag/物流-配送) 60サイズの送料の最安値【2025年9月最新】主要5社を徹底比較 2025.08.26](https://plus-shipping.com/blogs/shipping-fee-60-size)
- ### [[物流・配送](https://plus-shipping.com/blogs/tag/物流-配送) お米10kgを安く送る方法とは？ヤマト・佐川・日本郵便を徹底比較 2025.09.05](https://plus-shipping.com/blogs/shipping-cost-rice-10kg)
- ### [[物流・配送](https://plus-shipping.com/blogs/tag/物流-配送) 80サイズの送料の最安値【2025年9月最新】主要5社を徹底比較 2025.08.29](https://plus-shipping.com/blogs/shipping-fee-80-size)
- ### [[物流・配送](https://plus-shipping.com/blogs/tag/物流-配送) 大きい荷物（大型）の送料比較｜ヤマト・佐川・日本郵便で安いのは？ 2025.10.15](https://plus-shipping.com/blogs/shipping-cost-for-large-items)

関連記事

カテゴリー

- [すべて](https://plus-shipping.com/blogs/all)
- [お知らせ](https://plus-shipping.com/blogs/tag/お知らせ)
- [ウェビナー＆イベント](https://plus-shipping.com/blogs/tag/ウェビナーイベント)
- [Shopifyガイド](https://plus-shipping.com/blogs/tag/shopifyガイド)
- [Shopifyアプリ](https://plus-shipping.com/blogs/tag/shopifyアプリ)
- [物流・配送](https://plus-shipping.com/blogs/tag/物流-配送)
- [事例一覧](https://plus-shipping.com/blogs/tag/事例一覧)
- [STORESガイド](https://plus-shipping.com/blogs/tag/storesガイド)

- [![](https://plus-shipping.com/hubfs/raw_assets/public/plus_shipping_2024/assets/images/banner_sidebar_webinar.png)](https://plus-shipping.com/blogs/webinar)
- [![](https://plus-shipping.com/hubfs/raw_assets/public/plus_shipping_2024/assets/images/banner_sidebar_x.png)](https://twitter.com/PlusShippingApp)

Shopify配送注文アプリ

月額利用料無料

最短3クリックで送り状を発行

- [資料ダウンロード](https://plus-shipping.com/download)
- [Shopifyアプリを見る](https://apps.shopify.com/plusshipping?locale=ja&_gl=1*tfd5rr*_gcl_aw*R0NMLjE3MDU1NjM5MDUuQ2p3S0NBaUFrcDZ0QmhCNUVpd0FOVEN4MU9HVnhWa0xMUnphUElyWDhTMHZaX0p5WVJnOEFqTE4ydUU3WVR1OUlEZzdKWG9ENW1GUW94b0NtTG9RQXZEX0J3RQ..*_gcl_au*MTk1ODU2NjU1Mi4xNjk4NjQ1NjE3*_ga*OTA2NTg4ODU5LjE2OTg2NDU2MTc.*_ga_1QE4FBB8K8*MTcwNjI2MDE3NS45Mi4xLjE3MDYyNjAyNTguMC4wLjA)

## 最新記事

- ### [[物流・配送](https://plus-shipping.com/blogs/tag/物流-配送) 発送済みとは？いつ届く？追跡が動かない原因や届かないときの対処法 2026.08.31](https://plus-shipping.com/blogs/shipped)
- ### [[物流・配送](https://plus-shipping.com/blogs/tag/物流-配送) 上代とは？下代・定価との違いや掛け率の計算方法、仕入れ方まで解説 2026.08.31](https://plus-shipping.com/blogs/jodai)
- ### [[物流・配送](https://plus-shipping.com/blogs/tag/物流-配送) ピッキングリストとは？種類・記載項目・作成方法と活用方法まで解説 2026.08.31](https://plus-shipping.com/blogs/picking-list)
- ### [[物流・配送](https://plus-shipping.com/blogs/tag/物流-配送) 品番とは？型番・SKUとの違いや確認方法、付け方まで詳しく解説 2026.08.31](https://plus-shipping.com/blogs/product-number)

[記事一覧へ](https://plus-shipping.com/blogs)

遂に誕生！Shopifyの管理画面から  
配送料金を支払える新アプリ。

Shopify・EC初心者でも、  
特別料金でかんたんに  
配送できる

プラスシッピングなら、はじめてオンラインで商品を販売する事業者でも、特別価格の配送料金をご利用いただけます。さらにShopifyの管理画面から送り状も発行可能。日々の作業時間を短縮できます！

Shopify・STORES配送注文アプリ

月額利用料無料

最短3クリックで送り状を発行

- [資料ダウンロード](https://plus-shipping.com/download)
- [Shopifyアプリを試す](https://apps.shopify.com/plusshipping?locale=ja&_gl=1*tfd5rr*_gcl_aw*R0NMLjE3MDU1NjM5MDUuQ2p3S0NBaUFrcDZ0QmhCNUVpd0FOVEN4MU9HVnhWa0xMUnphUElyWDhTMHZaX0p5WVJnOEFqTE4ydUU3WVR1OUlEZzdKWG9ENW1GUW94b0NtTG9RQXZEX0J3RQ..*_gcl_au*MTk1ODU2NjU1Mi4xNjk4NjQ1NjE3*_ga*OTA2NTg4ODU5LjE2OTg2NDU2MTc.*_ga_1QE4FBB8K8*MTcwNjI2MDE3NS45Mi4xLjE3MDYyNjAyNTguMC4wLjA)
- [STORESアプリを試す](https://app.plus-shipping.net/signup)

- [Cookieポリシー](https://plus-shipping.com/cookie?hsLang=ja-jp)
- [「Plus Shipping」プライバシーポリシー](https://plus-shipping.com/privacy-policy)
- [利用規約・サービス利用規約](https://plus-shipping.com/terms-of-use)

COPYRIGHT © 2023- MITSUI & CO., LTD. ALL RIGHTS RESERVED.

![上へ戻る](https://plus-shipping.com/hubfs/raw_assets/public/plus_shipping_2024/assets/images/icon_gotop.svg)

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "プラスシッピング編集部",
    "url" : "https://plus-shipping.com/blogs/author/プラスシッピング編集部"
  },
  "dateModified" : "2026-05-27T08:49:58.483Z",
  "datePublished" : "2026-05-27T08:49:58.000Z",
  "headline" : "Shopifyで商品ランキングを表示する方法とは？注意点も解説！",
  "image" : [ "https://plus-shipping.com/hubfs/Shopify%E3%81%A7%E5%95%86%E5%93%81%E3%83%A9%E3%83%B3%E3%82%AD%E3%83%B3%E3%82%B0%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%81%A8%E3%81%AF%3F%E6%B3%A8%E6%84%8F%E7%82%B9%E3%82%82%E8%A7%A3%E8%AA%AC!.png" ],
  "mainEntityOfPage" : {
    "@id" : "https://plus-shipping.com/blogs/shopify-ranking",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://plus-shipping.com/hubfs/logo_plus-shipping.png"
    },
    "name" : "三井物産株式会社"
  }
}
```