コレクションに新着(NEW)アイコンをつけたい

YuTakashima
新規メンバー
2 0 0

画像のように、新商品に「NEW」等のアイコンが表示されるよう設定がしたいです。

設定用のコードがありましたらご教授願います。

今使用しておりますテーマは、「Minimal」です。

 

また、無料、有料テーマどちらとも、

そもそもこういった機能は無いのでしょうか。

 

宜しくお願い致します。

 

210428.jpg

0 件の「いいね!」
KOICHI_KAMIZURU
遊覧客
28 10 31

Minimalテーマの場合は、product-grid-item.liquidファイルをカスタマイズする必要があります。

以下コードのここから〜ここまでの間のコードを貼り付けていただくと、商品公開から7日以内の場合にNEWアイコンが表示されるようになります。

 

<div class="{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">
  <a href="{{ featured.url }}" class="grid-link{% if section.settings.center_grid_link %} text-center{% endif %}">
    <span class="grid-link__image grid-link__image--loading{% if section.settings.show_sold_out_circle %} grid-link__image-sold-out{% endif %} grid-link__image--product" data-image-wrapper>
      {% if on_sale and section.settings.show_sale_circle %}
        <span class="badge badge--sale">
          <span class="badge__text{% if sale_text.size > 7 %} badge__text--small{% endif %}">{{ 'products.product.sale' | t }}</span>
        </span>
      {% endif %}
      {% if sold_out and section.settings.show_sold_out_circle %}
        <span class="badge badge--sold-out">
          <span class="badge__text{% if sold_out_text.size > 9 %} badge__text--small{% endif %}">{{ 'products.product.sold_out' | t }}</span>
        </span>
      {% endif %}
      <!-- ここから -->
      {%- assign published_date = product.published_at | date: '%s' -%}
      {%- assign current_date = 'now' | date: '%s' -%}
      {%- assign passed_days = current_date | minus: published_date | divided_by: 86400 -%}
      {%- if passed_days <= 7 -%}
        <style>
          .badge--new {
            top: -12px;
            right: -12px;
            background-color: blue;
          }
	    </style>
        <span class="badge badge--new">
          <span class="badge__text">NEW</span>
        </span>
      {%- endif -%}
      <!-- ここまで -->
      <span class="grid-link__image-centered">

 

例としてCSSを含めておりますがこのままだとセールアイコンと被ってしまう為、CSSを削除していただくと左上に表示されるようになります。

ご参考になれば幸いです。

 

また、無料、有料テーマには基本的にはセールアイコンは表示されるように作られていますが、NEWアイコンを表示するようなテーマは見当たりませんでした。

(すべては確認しておりませんので存在していたらすみません)

テーマにNEWアイコンがない理由の1つは、コレクションの並べ替えに「新着順」があるからだと思います。

また、ユーザーは最初の数点しか見ない傾向があるのと、トップページにおすすめを掲載するほうが効果があるため、わざわざNEWをつける必要がないと考えるほうが自然です。