prestiageのテーマで下記のサイトのようにランキングバッジを表示させたいです。
またTOP1,2,3の色も下記のサイトようにしたいです。
Topic summary
Prestigeテーマでランキングバッジを表示し、TOP1〜3位に異なる色を付けたいという質問です。
提案された解決策:
-
コーディングによる実装
- main-collectionファイルを編集してランキング機能を追加
- CSSのnth-childセレクタを使用して1〜3位の色を個別に指定
- 参考記事とMDNドキュメントが提供されています
-
アプリによる実装
- UnReact社の「シンプルランキング表示|お手軽ベストセラー」アプリの紹介
- ノーコードで高デザイン性のランキングバッジを挿入可能
- 画像付きで機能が説明されています
現状: 複数の実装方法が提案されており、質問者は選択肢を検討中と思われます。コーディングスキルに応じて、カスタム実装かアプリ導入かを選べる状況です。
Minorimitaniさま
はじめまして、フルバランスの渡邉です。
ご質問を確認いたしました。
ランキングがあるとお客様の関心も引けて良いですよね。
詳しい実装方法に関してはこちらの記事が参考になるかと思います。
商品一覧ページで実装されたい場合、Prestigeではmain-collectionというファイルが該当します。
１位〜３位まで色を変えるのはCSSでnth-childを使えば任意の色を指定できますので、お試しいただけますと幸いです。
参考記事：https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child
ご参考になりましたら幸いです。
私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。
分からない点があれば、またいつでもご連絡ください。
フルバランス 渡邉
はじめまして
株式会社UnReactの西川と申します。
弊社のアプリ「シンプルランキング表示｜お手軽ベストセラー」も有効な解決策の一つとしてご紹介させていただきます。
高いデザイン性のランキングバッジをノーコードで挿入できるアプリです。
下記、参考情報です。
Shopifyにランキングバッジを導入するアプリについて徹底解説｜ご利用ガイド
その他にも 45 個の Shopify アプリを開発しているので、ストア運用の際に参考にして頂ければ幸いです。