FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

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

解決済

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

KOTELOIDA
Shopify Partner
2 0 0

恐れ入ります。

 

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

 

https://mrtc.jp/384

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

 

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

 

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

1 件の受理された解決策

Qcoltd
Shopify Partner
1134 460 449

成功

@KOTELOIDA

 

ご質問いただいている、「Rise」テーマの特集コレクションにランキングバッチを表示する件ですが、

下記の様に調整いただくと表示できるかと思います。

※「Rise」テーマはバージョン15.2.0

 

設定方法

1.コード編集から、『featured-collection.liquid』を検索し開く

2.featured-collection.liquidの93行目に移動し、class="の後に下記コードを追加

{% if section.settings.show_ranking %}ranking {% endif %}

20241004-1.png

 

3.featured-collection.liquidの496行目に移動し、下記コードを追加

,
    {
      "type": "checkbox",
      "id": "show_ranking",
      "label": "ランキングアイコンを表示する",
      "default": false
    }

20241004-2.png

 

4.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を調整ください。

20241004-3.png

 

5.テーマのカスタマイズを開きランキングアイコンを表示させたい、特集コレクションを開き、『ランキングアイコンを表示する』にチェックを入れ保存ボタンをクリック

20241004-4.png

 

6.以上で対象の特集コレクションの先頭から5商品にランキングアイコンが表示されます。

20241004-5.png

 

 

ご参考まで。

(キュー小坂)

 

 

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1134 460 449

成功

@KOTELOIDA

 

ご質問いただいている、「Rise」テーマの特集コレクションにランキングバッチを表示する件ですが、

下記の様に調整いただくと表示できるかと思います。

※「Rise」テーマはバージョン15.2.0

 

設定方法

1.コード編集から、『featured-collection.liquid』を検索し開く

2.featured-collection.liquidの93行目に移動し、class="の後に下記コードを追加

{% if section.settings.show_ranking %}ranking {% endif %}

20241004-1.png

 

3.featured-collection.liquidの496行目に移動し、下記コードを追加

,
    {
      "type": "checkbox",
      "id": "show_ranking",
      "label": "ランキングアイコンを表示する",
      "default": false
    }

20241004-2.png

 

4.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を調整ください。

20241004-3.png

 

5.テーマのカスタマイズを開きランキングアイコンを表示させたい、特集コレクションを開き、『ランキングアイコンを表示する』にチェックを入れ保存ボタンをクリック

20241004-4.png

 

6.以上で対象の特集コレクションの先頭から5商品にランキングアイコンが表示されます。

20241004-5.png

 

 

ご参考まで。

(キュー小坂)

 

 

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
KOTELOIDA
Shopify Partner
2 0 0

小坂様

 

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

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

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