FROM CACHE - jp_header

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

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

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

 

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

machado_0-1619181933509.png

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

 

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

 

 

 

1 件の受理された解決策

ベストソリューション
_osamu_iwasaki_
Shopify Partner
130 33 168

成功

forloop.index です

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

- Blog: https://note.com/osamuiwasaki
- Twitter: https://twitter.com/_osamu_iwasaki_

元の投稿で解決策を見る

4件の返信4
Jizo_Inagaki
Shopify Partner
607 246 565

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

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

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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
_osamu_iwasaki_
Shopify Partner
130 33 168

成功

forloop.index です

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

- Blog: https://note.com/osamuiwasaki
- Twitter: https://twitter.com/_osamu_iwasaki_
machado
新規メンバー
3 0 0
machado
新規メンバー
3 0 0