テーマ「Mobilia」 でcollection内のプロダクト画像左上にランキング表示をしたいのですが方法わかりますか？

[machado]

テーマ「Mobilia」 でcollection内のプロダクト画像右上にランキング表示をしたいのですが、MobiliaでのLiquidコード分かる方教えていただけますでしょうか？

具体的に実装したいことは、以下画像のようにコレクション内商品のTop５位まで、商品画像左上にランキング（数字）表示させることです。

参考サイト：https://francfranc.com/

よろしくお願いしますm(_ _)m

[Jizo_Inagaki]

Mobiliaテーマは把握していませんがLiquidでの対応はそれなりに大変だと思いますので、以下のようなCSSを使う方法の方が比較的容易かなと思います。

• beforeやafterなどの擬似要素とnth-of-typeなどの擬似クラスを使って、指定の順番にある要素に装飾をつける

Shopifyに限らない方法のためHTMLとCSSさえわかれば実装できるはずです。
「CSS ランキング」あたりのワードで検索いただくとサンプルがいろいろ見つかると思います。

[_osamu_iwasaki_ · Accepted solution]

forloop.index です

https://shopify.dev/docs/themes/liquid/reference/objects/for-loops#forloop-index

[machado]

ご返信ありがとうございます。トライしてみます。

[machado]

ご回答ありがとうございます！一度試してみます！