この「売れ筋ランキング」というコレクションに、共通の属性を持つ「売れ筋ランキング」を作るのが今回の課題です。
-本文中

(最終更新 2024年11月24日)

【Shopify小技】商品タイプが一致する商品の「売れ筋ランキング」を作成

Shopifyストアの全商品を対象にするのではなく、同じ商品カテゴリーの「売れ筋ランキング」の設置について考察します。順位付けはforloop.indexが使えないのd、別の方法を紹介します。

ECサイトにおいて、ユーザーの購買意欲向上はもちろん、サイト回遊の促進、コンバージョン率の向上やSEO効果など、様々なメリットがあると言われる「売れ筋ランキング」。

先日、forloop.indexを使って「売れ筋ランキング (セクション)」を作るという記事にて設置する方法などを紹介しました。

今回は、ストアの全商品を対象にするのではなく、同じ商品カテゴリーの「売れ筋ランキング」の設置について考察してみたいと思います。

設置案としては、同じ「商品タイプ」を持つ商品の「売れ筋ランキング」をセクションとして作成する方法になります。

こんなイメージ

女性用の化粧品を販売するストアのクレンジングオイル製品を例に挙げます。

その属性としては、例えば「クレンジング」「韓国コスメ」「自然由来成分」「コスパ抜群」「送料無料」「返品保証」などがあるとしたら、最上位分類は「クレンジング」になります。

この最上位分類を「商品タイプ」でカテゴライズし、さらに最も売れているラインナップを紹介するのが、本記事で紹介する実装イメージになります。

商品タイプとは

まず「商品タイプ」についておさえておきましょう。

「商品タイプ」とは、商品のカテゴリーを定義・使用する事が可能な機能です。

詳しい説明は、Shopify公式サイトの商品タイプをご確認ください。

なぜ「商品タイプ」を用いるのか

「商品タイプ」は「1商品=1カテゴリー」しか定義ができない仕様になっているため、(個人的な偏見かもしれません)コレクションやタグよりは、商品の最上位分類に適しているのかと思います。

前出の記事「forloop.indexを使って「売れ筋ランキング (セクション)」を作る」でも紹介しましたが、「売れ筋ランキング」というコレクションをベースにしています。

※【注意】本記事で説明する内容を理解するためには、まずforloop.indexを使って「売れ筋ランキング (セクション)」を作る (前の記事)をご確認いただく必要があります。

この「売れ筋ランキング」というコレクションに、共通の属性を持つ「売れ筋ランキング」を作るのが今回の課題です。

共通の属性を持たせる方法として最も一般的なのが「タグ」です。が、タグは1商品に対して複数付ける事ができるため、商品カテゴリーにするには作成面でも、運営面でもやや複雑な感じがします。

そこで、「1商品=1カテゴリー」の「商品タイプ」を商品の代表カテゴリーに位置付けし、今回紹介する方法にたどり着きました。

セクションを作成

では、商品ページにて商品タイプが一致する商品の「売れ筋ランキング」を表示させるためのセクションを作成します。

以下は、サンプルコードです。

{%- assign type = product.type -%} //表示中の商品の「商品タイプ」を変数「type」に格納

<div id="section-collection-products" data-aos="fade-up" data-aos-duration="1100">
<div class="container productBox">
<div class="collection-products-heading">
<h2>{{ type }}人気ランキング</h2>
</div>
<ul class="collection-products">
{%- for product in collections[section.settings.collection_handle].all_products limit:5 -%} //ループ
{% if product.type == type %} //商品タイプが位置すれば、以下を表示
<li class="collection-product-item">
<a href="{{ product.url }}">
<div class="collection-product-image">
<img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
</div>
<div class="collection-product-info">
<div class="collection-product-title"><p>{{ product.title }}</p></div>
</div>
</a>
</li>
{% endif %}
{%- endfor -%}
</ul>
</div>
</div>

{% schema %}
{
"name": "商品タイプ売れ筋ランキング",
"settings": [
{
"id": "collection_handle",
"type": "collection",
"label": "表示するコレクションを選択"
},
]
}
{% endschema %}

コードは至ってシンプルです。

見てのとおり、商品タイプを取得に用いるオブジェクト{{ product.type }}。これが一致する商品のみを表示させる仕組みです。

順位を付ける

では、「No1」「No2」と、順位を付ける方法について見てみましょう。

前の記事では、forloop.indexを用いて、以下のような実装方法を紹介しました。

{%- case forloop.index -%}
{%- when 1 -%} <span class="rank">No1</span>
{%- when 2 -%} <span class="rank">No2</span>
{%- when 3 -%} <span class="rank">No3</span>
{%- endcase -%}

しかし、forloop.indexは、「for文」全体のインデックスを返すため、条件({% if product.type == type %})で除外されたアイテム(商品)もカウントされてしまいます。

そのため、以下のような工夫が必要になります。

<ul class="collection-products">
{%- assign rank_counter = 0 -%} //任意のカウンター変数を設定し初期化
{%- for product in collections[section.settings.collection_handle].all_products limit:5 -%}
{% if product.type == type %}
{%- assign rank_counter = rank_counter | plus: 1 -%} //カウンター変数をインクリメント
<li class="collection-product-item">
{%- case rank_counter -%}
{%- when 1 -%} <span class="rank">No1</span>
{%- when 2 -%} <span class="rank">No2</span>
{%- when 3 -%} <span class="rank">No3</span>
{%- endcase -%}
<a href="{{ product.url }}">
<div class="collection-product-image">
<img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
</div>
<div class="collection-product-info">
<div class="collection-product-title"><p>{{ product.title }}</p></div>
</div>
</a>
</li>
{% endif %}
{%- endfor -%}
</ul>

ループが開始する前に、任意のカウンター変数rank_counterを「0」に初期化します。

ループが開始し、条件({% if product.type == type %})が一致したら、カウンター変数が「+1」ずつインクリメントする・・各アイデムに番号札が付けられるとイメージしてください。

その後、「case」と「when」の構文を使って、

・番号札「1」の場合は「No1」
・番号札「2」の場合は「No2」
・番号札「3」の場合は「N3」

と、表示させるのです。

※「case」と「when」の構文についてもっと知りたい方は、以下の記事をご確認ください。

Shopify Liquid 通知設置によく登場する「case」と「when」の使い方

以上、同じ「商品タイプ」を持つ商品の「売れ筋ランキング」をセクションとして作成する方法について紹介しました。

もちろん、最上位分類の商品カテゴリーが「商品タイプ」ではなくても大丈夫です。「コレクション」や「タグ」を用いても構わないですが、1つの商品に対して複数設定が可能なため、色々工夫は必要だと思います。

他にも、ユーザービリティや回遊率向上に役立つ「関連商品リスト」を実装するための、記事をご用意しておりますので、ご興味のある方はぜひご一読ください。

【Shopify小技】商品ページごとに違う関連商品リスト(コレクション)を表示させたい

【Shopify小技】ブログ記事に同じタグを持つ「商品一覧」を実装したい

【Shopify Liquid】同じnamespaceを持つメタフィールドをfor文で一覧表示作る

初めまして。運営者ホリと申します。

当ブログは「Shopifyを一緒に悩んで楽しむ仲間」に向けて情報を発信するブログです。

ここで扱うテーマは、構築やカスタマイズにとどまらず、SEOマーケティングやロジスティクスといった運営全般に広がります。

中でも最も重要視するのは、Shopifyを使った構築や運営に携わる中で「大掛かりな開発と投資に頼らなくても目的を達成できる工夫」。

確かな知識と経験を土台にしながら、日々の学びを記事にまとめて、同じように試行錯誤している方々とシェアしています。 日々の実践から得た知見を記事にまとめることで、Shopifyを使う仲間たちの小さなヒントや発想のきっかけになればうれしいです。

「ちょっと聞いてみたい」「これで大丈夫?」といった気軽な相談も大歓迎です。 Shopifyを通じて一緒に試行錯誤しながら、学び合える場として、このサイトを活用していただければ幸いです。

このブログと運営者について

お問い合わせ

BLOG More

設定

1週間前

【Shopify豆知識】テーマレイアウトをカスタマイズしたい?なら「grid-template」を知っておくべき

「スマホではロゴを左側に、PCではロゴを中央に」といった調整も、「grid-template」の設定次第で柔軟に実現できます。..

Liquid

4週間前

【Shopify小技】PC版に左のサイドバーを設置!まず「theme.liquid」の構造を知ろう

もし「type」を設定しなかったり、誤って設定したりしてしまうと、Shopifyはそのセクションをどの領域に表示すべきか判断できません。..

設定

1か月前

【Shopify小技】商品ページごとのFAQをメタオブジェクトで実装してみた

実際には「ピックアップ可能な店舗情報」や「割れやすい商品の配送注意点」など、商品ごとに異なる補足情報‥..

Liquid

1か月前

【Shopify Liquid】テーマで実際使用される「render」の引数と渡り値 その役割を解説

それぞれの変数の意味を押さえておけば、ある程度は読み解くことができると思います。..

アプリ

1か月前

【Shopifyアプリ】シンプル&レスポンシブ!直感的に使えるカレンダー「The Shop Calendar」でイベント・営業日を表示

The Shop Calendarは、カレンダー形式・一覧形式に加え、現在(2025年9月時点)β版としてアコーディオン形式にも対応しています。..

アプリ

2か月前

写真ギャラリーが複数作成できる!Shopify無料アプリ「GA Image Gallery」

ただし、「Advanced Setup」の方は動画を見ても最初はすんなり理解しづらいかもしれません。..

SEO

2か月前

【Shopify豆知識】だからSEOに強いのか!構造化データ(JSON-LD)について解説

しかし実際には、検索結果やGoogleショッピングにおいて、価格や在庫、バリエーション情報を正しく表示するための大事な役割を担っています。..

Liquid

2か月前

【Shopify豆知識】スキーマ設定(JSON)「t:」から始まる文字列とは‥実は変数パスではない?

Shopifyは「"t:"」以下のパスをたどって "label" の値(ここでは「クマさんのお顔」)を取得し、テーマエディタ上で表示します。..

Liquid

3か月前

【Shopify Liquid】スニペットファイルを呼び出す「render」引数と渡り値とは?

この仕組みによって、スニペットは渡されたデータに基づき、表示ロジックに沿って商品画像や商品名、価格などを表示できるようになります。..

制作アイディア

3か月前

Shopify構築をフリーランスへ代行依頼する手順(1~6)と選ぶポイント

私自身の体験としておすすめしたいのが「電話対応ができるフリーランス」を選ぶことです。..

Liquid

3か月前

【Shopify Liquid】オブジェクトの絞り込みに用いる「where」フィルタとは

たとえば、「販売元(vendor)」が「Nintendo」の商品だけを抽出したい場合は、以下のように書きます。..

制作アイディア

3か月前

Shopify構築をフリーランスへ依頼するメリットは費用だけではない!課題点も紹介

その「必死さ」や「ファイティングスピリット」は、柔軟かつ誠実な対応として依頼主にとって大きな安心材料となることも..

制作アイディア

3か月前

【リアルレポート】Shopify構築をフリーランスに依頼する際の相場と費用内訳

ECストアは今や単なる販売ツールではなく、実店舗と同じ、あるいはそれ以上に重要性と存在感を持つものとなっています。..

Js

3か月前

Shopifyにおける「カート追加」の仕組みを理解する!form送信 vs fetch API活用

fetch APIに用いられる「/cart/add.js」は、form送信の「/cart/add」と同様、「仮想的なエンドポイント」になります。..

Js

4か月前

【JavaScript】Shopify「cart.js」を読み解くための「Webコンポーネントメソッド」一覧

商品数や金額といった情報は、HTMLの「data-attribute」を使って要素ごとに管理されており、JavaScript側でそれを読み取って処理‥..

Js

4か月前

Shopifyのカスタマイズに役立つJavaScript「配列メゾット」11選を初心者向けに解説

「2005年新着!夏の水着一覧」という配列があるとします。最安値順に並び替えたいとき、「.sort()」というメソッドを使えば‥..

Js

4か月前

ShopifyではLiquidがあるのになぜJavaScriptが多用されるの?

その理由を一言で言えば、「Liquidは表示前、JavaScriptは表示後に働くから」です。..

Liquid

4か月前

Shopify 関連やおすすめ商品リストが自動生成「recommendations」活用・応用シーン

しかしカートページには、そもそも表示中の商品が存在しないため、このレコメンドの仕組みが機能しないのです。..

Liquid

5か月前

【Shopify Liquid】関連商品・おすすめ商品作成に用いられるオブジェクト「recommendations」について

このオブジェクトは、顧客の行動やストア内でのさまざまなデータを基に、自動的に関連商品を選出します。..

SEO

5か月前

Google、AIモードの導入を発表!収益減少が懸念される中、最も有力なマネタイズとは

このホテル、評価高いし、割引ついてるよ。数ステップで簡単に予約できるけど、今やる?..

SEO

5か月前

AI時代のSEOはオワコン?その真実と「違います」と言える4つの理由

たとえば「近くのコンビニを教えて」といったシンプルな質問に、毎回AIが複雑な推論や自然言語生成をしていたら、とんでもないコストになります。..

設定

5か月前

【Shopify豆知識】ヘッドレス(Headless)ってなに?

少し不気味で怪談を連想させるような響きですが、実際にはShopifyのメリットとして注目されている仕組みのひとつです。..

Liquid

5か月前

【Shopify小技】商品の「カートに追加」の仕組みをシンプルに解説(サンプルコード))

この仕組みにはLiquidだけでなく、JavaScriptやAjax、さらにはサーバー側で動くRubyなど、複数の技術が関わっている..

Liquid

5か月前

カートのノーティフィケーションやドロワーで1注文での同時購入を防ぐ方法は可能?

ノーティフィケーション(画面上部に一瞬表示される通知型カート)については、やや難易度が高めです。..

Liquid

5か月前

【Shopify Liquid】カート内で1つの注文に同時購入を防ぐシンプルな方法

ここで使われているのが、Liquidでよく用いられる「フラグ(真偽)」という考え方です。..

STORY

5か月前

なぜ鳥の巣はあんなに頑丈なのか?成功における「うまくいかない瞬間」の重要性

鳥の巣の初期段階のように、私たちの挑戦も、最初は失敗と不安定の連続です。..

Liquid

5か月前

【Shopify Liquid】商品ページの「オプション」を色か画像にしたい

そもそもShopifyの商品オプションに画像や色を登録できるのか?..

STORY

5か月前

現代言語哲学の巨人が教えてくれた「失敗する人の口癖」とは

あの時もし、あの会社に転職していたら・・..

アプリ

6か月前

【Shopifyアプリ】商品ページから簡単に見積もりを送信!履歴から下書き注文作成も可能

旅行会社、工事や建築、リフォーム業、OEM制作、ノベルティ制作、レンタル業なども十分対応できる‥..

STORY

6か月前

40代・50代にとって新たな挑戦が「苦痛」である理由・・私が救われたニーチェの言葉

苦しみがあるからこそ、深みが生まれる。..