恐れ入ります。
「Rise」テーマを使用しストアを構築中なのですが、アプリを使わずに任意のコレクションにランキングバッジを表示させたいです。
こちらの記事などを参考に編集して見ましたがうまくいきません。
コードの編集箇所や順序など、ご教示いただきたいです。
宜しくお願いいたします。
Topic summary
Riseテーマ（バージョン15.2.0）で、アプリを使わずに特集コレクションにランキングバッジを表示する方法についての質問と解決。
実装手順:
featured-collection.liquidファイルを編集- 93行目のclass属性にランキング表示用のコードを追加
- 496行目にチェックボックス設定を追加
- 199行目にCSSスタイルを追加（1位～5位までのバッジデザイン）
- テーマカスタマイザーで「ランキングアイコンを表示する」にチェック
結果:
- コレクションの先頭5商品にランキングバッジが表示される
- 各順位ごとに背景色とテキスト色をカスタマイズ可能（1位:金色、2位:銀色、3位:銅色など）
質問者は解決し、感謝の意を表明。コード例とスクリーンショットが提供され、具体的な実装方法が共有された。
ご質問いただいている、「Rise」テーマの特集コレクションにランキングバッチを表示する件ですが、
下記の様に調整いただくと表示できるかと思います。
※「Rise」テーマはバージョン15.2.0
設定方法
１．コード編集から、『featured-collection.liquid』を検索し開く
２．featured-collection.liquidの93行目に移動し、class="の後に下記コードを追加
{% if section.settings.show_ranking %}ranking {% endif %}
３．featured-collection.liquidの496行目に移動し、下記コードを追加
,
{
"type": "checkbox",
"id": "show_ranking",
"label": "ランキングアイコンを表示する",
"default": false
}
４．featured-collection.liquidの199行目に移動し、下記コードを追加
{% style %}
.ranking li::after {
padding: 0;
margin: 0;
font-size:14px;
width:30px;
height:30px;
line-height:30px;
text-align:center;
display:block;
position: absolute;
top: 0;
left: 0;
}
.ranking li:nth-child(1)::after {
content: "1";
background:#D4AF37;
color: #ffffff;
}
.ranking li:nth-child(2)::after {
content: "2";
background:#C0C0C0;
color: #ffffff;
}
.ranking li:nth-child(3)::after {
content: "3";
background:#ac6b25;
color: #ffffff;
}
.ranking li:nth-child(4)::after {
content: "4";
background: #ffffff;
color: #999999;
}
.ranking li:nth-child(5)::after {
content: "5";
background: #ffffff;
color: #999999;
}
{% endstyle %}
※各ランキングの背景色や文字色、サイズ等は上記cssを調整ください。
５．テーマのカスタマイズを開きランキングアイコンを表示させたい、特集コレクションを開き、『ランキングアイコンを表示する』にチェックを入れ保存ボタンをクリック
６．以上で対象の特集コレクションの先頭から5商品にランキングアイコンが表示されます。
ご参考まで。
（キュー小坂）
小坂様
ご丁寧にとてもわかりやすくご教示くださりありがとうございました！！
無事に表示させることができ、大変助かりました(泣)
本当にありがとうございました！！