Shopifyでランキングを実装する方法について詳しく解説！

はじめに

今回は、Shopify でランキングを表示する方法について詳しく解説していきます。

アプリを使って実装する方法や、コーディングを用いて実装する方法等を紹介します。

それでは頑張っていきましょう。

今回は、以下の記事を参考にしています。

それでは、頑張っていきましょう。

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

まずは、Shopify で商品ランキングを表示するメリット・デメリットについて考えていきましょう。

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

Shopifyでのオンラインストア運営において、ランキング表示は非常に効果的なマーケティングツールの一つです。ランキング表示を導入することで、訪問者の興味を引き、購買行動を促進することができます。以下に、Shopifyでランキング表示を行う主なメリットを解説します。

1. 人気商品の可視化による購買意欲の向上

ランキング表示を導入することで、人気商品や売れ筋商品が一目でわかるようになります。これは、訪問者に対して他の顧客の購買傾向を示すことになり、「他の人が買っているなら、自分も試してみよう」という社会的証明の心理を引き出すことができます。特に新規顧客にとっては、どの商品が人気かがわかることで、購入を決定する際の助けとなります。

2. 在庫の効率的な管理と売り残りの防止

ランキング表示を活用することで、特定の商品がどれだけ売れているかをリアルタイムで追跡できるため、在庫管理が効率化されます。売れ筋商品がランキング上位に来ることで、ストアオーナーは在庫補充のタイミングを適切に判断でき、売り切れや売り残りを防ぐことができます。これは、商品の需要予測にも役立ち、在庫コストの削減にもつながります。

3. 新商品のプロモーション効果

ランキング表示を通じて、新商品を特定のカテゴリや全体ランキングで目立たせることができます。特に、ランキングの上位に新商品が表示されることで、訪問者の目に留まりやすくなり、自然とその商品の閲覧数や購入数が増加します。これにより、新商品を効率的にプロモーションすることができ、早期の売上拡大を狙えます。

4. 購入の意思決定をサポート

ランキング表示は、訪問者がどの商品を購入すべきかを選ぶ際の重要な判断材料になります。特に、同じカテゴリ内に複数の類似商品が存在する場合、ランキング上位の商品が「信頼できる選択肢」として認識されやすくなります。これにより、訪問者が迷うことなく購入に至りやすくなり、コンバージョン率の向上が期待できます。

5. ブランドの信頼性向上

ランキング表示は、ストア全体の信頼性を高める効果もあります。人気商品がランキングとして表示されることで、訪問者に対して「このストアには売れ筋商品が揃っている」という印象を与えることができます。これは、顧客満足度やブランドの信頼性を高める要素となり、リピート購入を促進する可能性があります。

それでは次に、Shopify でランキング表示を行うデメリットについて解説していきます。

Shopifyでランキング表示を行うデメリット

Shopifyでランキング表示を導入することには多くのメリットがありますが、同時にいくつかのデメリットも存在します。これらのデメリットを理解し、対策を講じることで、ランキング表示の導入によるリスクを最小限に抑えることができます。以下に、ランキング表示を行う際の主なデメリットについて技術的な観点から解説します。

1. 人気商品の偏重による売上分散の低下

ランキング表示では、上位に表示される商品が目立つため、訪問者がそれらの商品に集中しやすくなります。この結果、ランキングに入らない商品があまり注目されず、売上が特定の商品に偏ってしまう可能性があります。これにより、ストア全体の売上が一部の商品に依存することになり、他の商品が売れにくくなるリスクがあります。

2. 新商品や低評価商品の露出不足

ランキング表示は過去の販売データに基づいているため、新商品やまだ十分に評価されていない商品がランキングに表示されにくくなることがあります。これにより、これらの商品が十分な露出を得られず、販売機会を逃してしまう可能性があります。特に、売上を伸ばすために新商品を積極的にプロモーションしたい場合、このデメリットは大きな障害となり得ます。

3. ブランドイメージへの影響

ランキングに低評価の商品が表示されると、ブランド全体のイメージに悪影響を及ぼす可能性があります。特に、レビューの評価が低い商品がランキングに上がると、訪問者に「品質にばらつきがある」という印象を与えかねません。また、特定の商品にネガティブなレビューが集中している場合、それがランキングによって強調されることもあり、ブランドの信頼性に悪影響を及ぼすリスクがあります。

4. システムパフォーマンスへの影響

ランキング表示は、リアルタイムのデータ処理を必要とする場合が多く、特に大規模なストアではシステムリソースに負担がかかる可能性があります。ランキングを生成するためには、頻繁にデータを集計し、更新する必要があるため、サイトのパフォーマンスが低下するリスクがあります。これにより、ページの読み込み速度が遅くなり、訪問者のユーザー体験が損なわれる可能性があります。

ここまでで、Shopify で商品ランキングを表示するメリット・デメリットについてまとめました。

それでは次に、ランキングを利用したマーケティング戦略について考えていきます。

Shopifyでランキング表示を行うマーケティング戦略

Shopifyでランキング表示を活用したマーケティング戦略は、顧客の購買行動を誘導し、売上を最大化するために非常に効果的です。ランキング表示は、人気商品や売れ筋商品を強調することで、訪問者に信頼感を与え、購買意欲を高めるツールとして活用できます。以下に、Shopifyでランキング表示を利用したマーケティング戦略について考えてみます。

1. 人気商品の強調による社会的証明効果

ランキング表示を使って、人気商品や売れ筋商品を目立たせることで、社会的証明効果を得ることができます。多くの人が購入している商品を表示することで、他の顧客にも「この商品は信頼できる」「自分も購入しよう」といった心理的な影響を与え、購買行動を促進します。この戦略は、特に新規訪問者に対して有効であり、サイトの離脱率を減少させる効果も期待できます。

2. 新商品のプロモーション

新商品をランキングに組み込むことで、その商品の露出を増やし、販売を促進します。特に、特定の期間中に新商品をランキング上位に配置することで、訪問者の関心を引き、試し買いを促すことができます。また、新商品に特別なキャンペーンや割引を組み合わせることで、ランキング表示とプロモーションを連動させ、より効果的に商品をアピールすることが可能です。

3. クロスセル戦略の一環としてのランキング表示

ランキング表示をクロスセル戦略と組み合わせることで、関連商品やセット商品を効率的に提案することができます。例えば、「この商品を購入した人はこの商品も購入しています」といった関連商品のランキングを表示することで、顧客の購買点数を増やし、客単価を上げることができます。これにより、訪問者がサイト内でより多くの商品を閲覧し、最終的に購入に繋がる可能性が高まります。

4. セグメント別ランキングによるパーソナライズドマーケティング

顧客のセグメント（例えば、購入履歴や地理的なロケーション、過去の閲覧行動など）に基づいてランキングをパーソナライズすることで、よりターゲットを絞った効果的なマーケティングが可能になります。例えば、特定の商品カテゴリーに興味がある顧客には、そのカテゴリー内でのランキングを表示することで、より興味を引くコンテンツを提供し、購買意欲を高めます。

5. 季節ごとのトレンド商品ランキング

季節やイベントごとにトレンドとなる商品をランキング表示することで、タイムリーなマーケティングが可能になります。例えば、夏にはサマーグッズやアウトドア用品のランキングを、冬にはホリデーシーズンに関連する商品のランキングを表示することで、季節に合わせた購買行動を促進します。この戦略により、季節性の高い商品の売上を効率的に伸ばすことができます。

それでは次に、Shopify でランキング表示を行う方法について解説していきます。

まずは、Shopify アプリを用いてランキング表示を行う方法を解説していきます。

今回紹介する Shopify アプリは、シンプルランキング表示｜お手軽ベストセラーという Shopify アプリです。

シンプルランキング表示｜お手軽ベストセラーの使い方

シンプルランキング表示｜お手軽ベストセラーは、以下のようなランキングの表示を簡単に行える Shopify アプリです。

以下が、Shopify 公式のアプリストアになります。

まずは、こちらのアプリのインストールを行っていきましょう。

シンプルランキング表示｜お手軽ベストセラー のインストール

それでは、アプリのインストールを行っていきましょう。

Shopify App Store でシンプルランキング表示｜お手軽ベストセラーと入力してください。

以下の、アプリの管理画面に遷移します。

こちらで、インストールをクリックしましょう。

もう一度、インストールをクリックしてください。

以下の管理画面が出現します。

ここまでで、アプリのインストールは完了です。

それでは次に、アプリブロックの追加を行っていきましょう。

アプリブロックの追加

それでは、アプリブロックの追加を行っていきます。

テーマに追加をクリックすることで、アプリブロックを自動で追加することができます。

アプリを自動で追加することに失敗した場合は、テーマカスタマイズ画面のセクションを追加から、手動でアプリブロックを追加することもできます。

こちらの画面で、アプリを選択して下さい。

以下のアプリブロックを選択して下さい。

これで、アプリブロックの追加は完了です。

それでは次に、ランキングの見た目のカスタマイズを行っていきましょう。

ランキング表示の見た目のカスタマイズ

それでは、ランキング表示の見た目のカスタマイズを行っていきます。

アプリブロックをクリックして、編集画面に入って下さい。

下記のように、様々な項目を編集できますね。

まずは、コレクションを選択して下さい。

以下のように、ランキング表示されていることが確認できますね。

ここからは、ざっくりと編集できる項目を見ていきましょう。

ランキングバッジのスタイル

ランキングバッジのスタイルを、四種類から選択できます。

四角を選択した場合

四角を選択した場合は、以下のような見た目になります。

丸を選択した場合

丸を選択した場合、以下のような見た目になります。

ジグザグな円形を選択した場合

ジグザグな円形を選択した場合、以下のような見た目になります。

王冠を選択した場合

王冠を選択した場合、以下のような見た目になります。

カラム数の変更

商品表示のカラム数を変更できます。例えば、PC のときは 5 カラムにして、スマホのときは 2 カラムにすることができます。

以下の部分で変更できます。

PC 時は 5 カラムになります。

また、スマホ時は 2 カラムになります。

これら以外にも、順にラベルの位置や商品の表示数、商品間の余白や商品画像の縦横比、マウスオーバー時の挙動や売り切れ時のテキストなど、様々な項目を編集できます。

それでは次に、コーディングを用いてランキング表示を実装する方法を解説していきます。

コーディングを用いてランキングを実装する方法

以下が、ランキングを表示するサンプルコードです。

<div class="block-margin">
  <div class="is-slider">
    <!-- ダミー商品リスト -->
    <div class="item-container">
      <div class="img-ratio img-container">
        <img src="placeholder1.jpg" alt="商品 1" class="product-image" />
      </div>
      <h3 class="item-title">商品 1</h3>
      <p class="item-price">¥1,000</p>
    </div>
    <div class="item-container">
      <div class="img-ratio img-container">
        <img src="placeholder2.jpg" alt="商品 2" class="product-image" />
      </div>
      <h3 class="item-title">商品 2</h3>
      <p class="item-price">¥2,000</p>
    </div>
    <!-- 他の商品リスト... -->
  </div>
</div>

<div class="block-margin">
  <div class="not-slider pc-grid-cols-3 sp-grid-cols-2">
    <!-- 商品リスト（コレクション選択時） -->
    <div class="item-container">
      <a href="product-url" class="item-link">
        <div class="collection-img-container">
          <div class="label-star-container">
            <div class="label-star-text">1</div>
            <div class="label-star">
              <img src="star-icon.png" alt="1位のアイコン" />
            </div>
          </div>
          <div class="collection-img-card">
            <img src="product-media-url.jpg" alt="商品画像" class="collection-second-img" />
            <img src="featured-image-url.jpg" alt="商品画像" class="collection-featured-img" />
          </div>
        </div>
        <h3 class="item-title">商品名</h3>
        <div class="collection-price-container">
          <p class="item-price">¥5,000</p>
          <p class="item-price-discounted">¥7,000</p>
          <p class="product-sold-out">売り切れ</p>
        </div>
      </a>
    </div>
    <!-- 他の商品リスト... -->
  </div>
</div>

/* ブロックの余白 */
.block-margin {
  margin: 0 16px;
  margin-top: 32px;
  margin-bottom: 32px;
}

/* スライダー表示のスタイル */
.is-slider {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  align-items: start;
  height: auto;
}

/* 商品間の余白 */
.item-container {
  flex-shrink: 0;
  height: auto;
  border: 1px solid #e5e7eb;
  width: 100%;
  margin-right: 16px;
}

/* 商品画像の縦横比 */
.img-ratio {
  width: 100%;
  height: auto;
  overflow-x: hidden;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.product-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.item-container:hover .product-image {
  transform: scale(1.05); /* 画像を拡大 */
}

/* 商品名 */
.item-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 4px;
}

/* 値段 */
.item-price {
  font-size: 14px;
  color: #000;
}

/* 売り切れ表示 */
.product-sold-out {
  font-size: 14px;
  color: #ff0000;
  opacity: 0.5;
  margin-left: 8px;
}

/* ディスカウント価格 */
.item-price-discounted {
  text-decoration: line-through;
  color: #000;
  opacity: 0.5;
  margin-left: 8px;
}

/* ラベルやアイコンのスタイル（例：ランキング、スター、クラウンなど） */
.label-star-container {
  position: absolute;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #f8f8f8;
  border-radius: 50%;
}

.label-star-text {
  font-weight: 600;
  font-size: 14px;
  color: #000;
}

.collection-img-card {
  overflow: hidden;
}

.collection-img-container {
  position: relative;
  margin-bottom: 8px;
  transition: 0.5s;
}

.collection-second-img {
  position: absolute;
  width: 100%;
  height: auto;
  transition: 0.5s;
  z-index: 1;
  opacity: 0;
}

.collection-featured-img {
  display: flex;
  width: 100%;
  height: auto;
  transition: 0.5s;
}

.collection-img-card:hover .collection-second-img {
  opacity: 1;
}

.collection-img-card:hover .collection-featured-img {
  opacity: 0;
}

.not-slider {
  display: grid;
  gap: 16px 16px;
}

.pc-grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sp-grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

こちらのサンプルコードについて解説していきます。

1. ブロックの余白設定

<div class="block-margin">

block-marginクラスは、ブロック全体の余白を設定するために使用されます。このクラスにより、要素の左右と上下に一定のマージンが適用されます。

2. スライダー表示の設定

<div class="{% if block.settings.enable_slider %} is-slider {% else %} not-slider {{ block.settings.col_pc }} {{ block.settings.col_sp }} {% endif %}">

この部分では、条件に応じてクラスis-sliderまたはnot-sliderを適用します。is-sliderは、商品のスライダー表示を有効にするクラスで、横方向にスクロールできるレイアウトを作成します。一方、not-sliderは、グリッド表示を有効にし、商品を並べて表示します。

3. ダミー商品リストの表示

{% for i in (1..6) %}
  <div class="item-container">
    <div class="img-ratio img-container">
      <img src="placeholder{{ forloop.index }}.jpg" alt="商品 {{ forloop.index }}" class="product-image" />
    </div>
    <h3 class="item-title">商品 {{ forloop.index }}</h3>
    <p class="item-price">¥1,000</p>
  </div>
{% endfor %}

このループは、ランキングがまだ設定されていない場合に表示されるダミー商品リストを生成します。各商品には、ダミー画像、タイトル、価格が表示されます。

4. コレクション選択時の商品の表示

{% for product in selected_collection.products limit: block.settings.items_on_display %}
  <div class="item-container">
    <a href="{{ product.url }}" class="item-link">
      <div class="collection-img-container">
        <!-- 順位アイコンの表示 -->
        <div class="label-star-container">
          <div class="label-star-text">{{ forloop.index }}</div>
          <div class="label-star">
            <img src="star-icon.png" alt="{{ forloop.index }}位のアイコン" />
          </div>
        </div>
        <!-- 商品画像の表示 -->
        <div class="collection-img-card">
          <img src="{{ product.media[1] | default: 'no-image.png' }}" alt="商品画像" class="collection-second-img" />
          <img src="{{ product.featured_image | default: 'no-image.png' }}" alt="商品画像" class="collection-featured-img" />
        </div>
      </div>
      <h3 class="item-title">{{ product.title }}</h3>
      <div class="collection-price-container">
        <p class="item-price">{{ product.price | money }}</p>
        <p class="item-price-discounted">{{ product.compare_at_price | money }}</p>
        <p class="product-sold-out">{{ block.settings.sold_out_text }}</p>
      </div>
    </a>
  </div>
{% endfor %}

この部分では、選択されたコレクション内の商品を表示します。各商品には、URLへのリンク、商品画像、タイトル、価格、売り切れの表示が含まれます。また、ランキングの順位を示すアイコンも表示されます。

5. CSSによるスタイル設定

.block-margin {
  margin: 0 16px;
  margin-top: 32px;
  margin-bottom: 32px;
}

.is-slider {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  align-items: start;
  height: auto;
}

.item-container {
  flex-shrink: 0;
  height: auto;
  border: 1px solid #e5e7eb;
  width: 100%;
  margin-right: 16px;
}

.img-ratio {
  width: 100%;
  height: auto;
  overflow-x: hidden;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.product-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.item-container:hover .product-image {
  transform: scale(1.05);
}

/* さらに他のスタイル設定... */

ここでは、HTML構造に対応するスタイルが設定されています。block-marginクラスは全体のマージンを調整し、is-sliderクラスはスライダー形式のレイアウトを定義します。また、item-containerクラスは各商品カードのスタイルを決定し、img-ratioクラスは商品画像のアスペクト比を維持する役割を果たします。

商品画像にマウスオーバーした際に、画像が拡大するエフェクトも設定されています。

ここまでで、Shopify でランキングを表示する際のサンプルコードの解説は終了です。

最後に

今回は、Shopify アプリを用いてランキングを実装する方法と、コーディングを用いてランキングを実装する方法の二つを紹介しました。

お疲れさまでした。

参考記事

今回は、以下の記事を参考にしています。