「Rise」のテーマで商品にNEWバッジのつける方法について

日本語 ディスカッション 技術的なQ＆A
,
1

こんにちは！

現在「Rise」のテーマを使用しているのですが、新しい商品を出した時に商品の左上に「NEW」などのバッジをつけたいです。調べてみたら色々出るのですがいまいちわからず。。。

出してから14日までの商品につけたいです。

Riseにおける「NEW」バッジをつける方法、もしくはCSSコードなどございましたら教えていただけると幸いです。

2

初めまして。

下記コードでバッジを表示することができたので共有いたします。

snippets/card-product.liquid の 31行目 に下記コードを挿入 ( {%- if card_product and card_product != empty -%} の下にコピペしてください)

{% assign days_limit = 14 %}
{% assign publish_date = card_product.published_at | date: '%s' %}
{% assign current_date = 'now' | date: '%s' %}
{% assign diff_in_days = current_date | minus: publish_date | divided_by: 86400 %}

{% if diff_in_days < days_limit %}
  NEW

{% endif %}

assets/base.css に下記コードを挿入

.new-badge {
  /* 位置調整 */
  top: 15px;
  left: 15px;
  /* サイズ */
  padding: 5px 10px;
  /* 角丸 */
  border-radius: 20px;
  /* フォントサイズ */
  background-color: #ff4444;
  color: white;
  position: absolute;
  font-size: 12px;
  font-weight: bold;
  z-index: 2;
}

.product-card {
  position: relative;
}

デザインはcssの値を変更して適宜調整してください。

ご参考になりましたら幸いです。

3

Improvさん

ご回答ありがとうございます！！

無事につけることができました！（；；）

本当にありがとうございます、、、！！