Riseテーマでランキングバッジを表示させたい

[KOTELOIDA]

恐れ入ります。

「Rise」テーマを使用しストアを構築中なのですが、アプリを使わずに任意のコレクションにランキングバッジを表示させたいです。

https://mrtc.jp/384

こちらの記事などを参考に編集して見ましたがうまくいきません。

コードの編集箇所や順序など、ご教示いただきたいです。

宜しくお願いいたします。

[Qcoltd · Accepted solution]

@KOTELOIDA

ご質問いただいている、「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商品にランキングアイコンが表示されます。

ご参考まで。

（キュー小坂）

[KOTELOIDA]

小坂様

ご丁寧にとてもわかりやすくご教示くださりありがとうございました！！

無事に表示させることができ、大変助かりました(泣)

本当にありがとうございました！！