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

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

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

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

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

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

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

宜しくお願い致します。

210428.jpg
210428.jpg595×842 30.8 KB

2

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

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


  
    
      {% if on_sale and section.settings.show_sale_circle %}
        
          {{ 'products.product.sale' | t }}
        
      {% endif %}
      {% if sold_out and section.settings.show_sold_out_circle %}
        
          {{ 'products.product.sold_out' | t }}
        
      {% 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 -%}
        
        
          NEW
        
      {%- endif -%}

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

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

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

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

2 Likes
3

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

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

2 Likes