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
185 47 193

成功

4件の返信4

Jizo_Inagaki
Shopify Partner
989 373 690

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

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

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

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

成功

machado
訪問者
3 0 0

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

machado
訪問者
3 0 0

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