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

解決済
machado
新規メンバー
3 0 0

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

 

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

machado_0-1619181933509.png

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

 

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

 

 

 

0 件の「いいね!」
Jizo_Inagaki
航海者
295 103 359

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

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

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

Jizo_Inagaki | フリーランスのwebデザイナー
- ある程度のテーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- 解決できなかった場合はその旨を記載いただければ助かります。
0 件の「いいね!」

成功

0 件の「いいね!」
machado
新規メンバー
3 0 0

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

0 件の「いいね!」
machado
新規メンバー
3 0 0

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

0 件の「いいね!」