はじめに

様々なECサイトを見ていると、商品一覧などで「NEW」というような新入荷を表すラベルやバッジを表示させているストアをよく見かけます。
ShopifyでECサイトを運用されているマーチャントさんも、このような表示を付けたいと考えたことがある方は多いのではないでしょうか？

新着ラベルを簡単に表示させるには、一般的に専用の外部アプリを使う方法が便利とされています。
ですが、外部アプリは機能の過不足や費用とのバランスなど、課題も多くありますよね。

外部アプリ以外では、商品タグを利用する方法がネット上でよく紹介されています。
しかし、商品タグは幅広い用途で使用できてとても便利な一方、タグの付け忘れの懸念があったり、次々とタグが増えていき管理が煩雑になったりといったデメリットもあります。

そこで本記事では、ShopifyのDawnテーマにおいてアプリもタグも使わず簡単に新着ラベルを表示させる方法をご紹介します。
たった2ステップで完了しますので、これまでラベルの活用を迷われていたマーチャントさんはぜひこの機会にお試しください！

実装方法

今回は、公開から14日以内の商品にラベルを自動表示させる方法となります。
以下でご紹介するコードをそのままコピーしてお使いいただけます。

1. 「card-product.liquid」にラベル用のコードを追記

添付画像のように、「card-product.liquid」の該当箇所に下記コードを挿入します。（画像はクリックで拡大します）

<!-- 新着バッジ -->
{%- assign published_date = card_product.published_at | date: '%s' -%}
{%- assign current_date = 'now' | date: '%s' -%}
{%- assign passed_days_from_publish = current_date | minus: published_date | divided_by: 86400 -%}

{%- if passed_days_from_publish <= 14 -%}
<div class="card__badge">
    <span class="badge badge_new_custom">NEW</span>
</div>
{%- endif -%}
<!-- ここまで -->

2. CSSで配置とデザインを整える

「card-product.liquid」内または別CSSファイルに下記スタイルを追加します。

.badge_new_custom {
    position: absolute;
    top: 0;
    padding: 1rem 0;
    background: #ff9c07;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    align-content: center;
    font-size: 13px;
}

上記方法でこのような新着ラベルを表示することができます。

今回は、売り切れ表示などと被らないようにするため、商品画像の左上に配置しました。
配置やデザインを変更したい方はお好みに調整してみてくださいね。

まとめ

新着ラベルの表示は、商品がエンドユーザーの目に留まりやすくなるため、定期的に新商品が入荷する場合や商品数が多いマーチャントさんにとても有効的です。

本記事でご紹介した方法の中で、コードの追加箇所や公開日からの日数変更方法など、ご不明な点やアレンジのご要望がある方はぜひお気軽にお問い合わせください！