はじめに

今回は、Shopify で new ラベル（アイコン）を実装する方法について考察しました。具体的には、HTML・CSS で new ラベル（バッジ）を実装する方法や、Liquid を用いて new ラベルを実装する方法を考察していきます。

さらに、ノーコードで簡単に new ラベル（バッジ）を導入できるアプリとして、シンプル商品バッジ｜お手軽アイコンラベル表示もご紹介していきます。

「Shopify new ラベル」を実装するために必要なポイントを、しっかりと押さえていきましょう。

今回は、以下の記事を参考にしています。

Shopify で new ラベル（アイコン）を実装する定義

EC サイトでは、ユーザーに新着商品や新しい取り組みを視覚的にわかりやすく伝えるために、「new」というラベルやアイコンを付けるケースがよくあります。例えば、「新商品の登場であること」「最近入荷したばかりであること」をひと目で伝えたい場合には、商品画像に重ねてアイコンやバッジを表示することで、ユーザーの注意を引きやすくなります。

Shopify で new ラベル（バッジ）を実装することで、次のような効果が期待できます。

新着商品をユーザーにわかりやすく伝えられる
商品一覧やコレクションページなど、あらゆるページで特定の商品をアピールできる
コーディングやテーマ編集による細かなカスタマイズで、デザインを自由にコントロールできる

Shopify で new ラベルを実装するメリット

それでは、Shopify で new ラベルを実装するメリットについて解説していきます。

1. 新商品の存在を強調できる

EC サイトでは、多数の商品が並ぶ中で新商品を探し出すのは大変です。そこで new ラベルが付いていれば、ユーザーに「新しい商品がある」という情報を瞬時に認識させることができます。結果的に、注目度やクリック率が向上し、購入機会を増やすことが期待できます。

2. 既存商品との差別化ができる

既存の商品と比較して、新商品に特別感を持たせられます。「今までにない商品が出た」とアピールすることで、リピーターも含めたユーザーの興味を惹きやすくなります。

3. 直感的なユーザー体験の提供

文字だけで「新商品」と書かれているよりも、目立つバッジやアイコンを表示するほうが、ユーザーにとって直感的に理解しやすいです。特に、モバイルユーザーの場合、小さな画面でも見やすいアイコンが役立ちます。

4. ストア全体のブランディングに貢献

バッジやアイコンのデザインをブランドカラーに合わせたり、オリジナルデザインを作成したりすることで、ストア全体の統一感が高まります。コレクションページや商品詳細ページのデザイン要素としても活躍し、サイトのクオリティを高める効果があります。

5. 販促イベントとの連動

セールやキャンペーン時には「Sale」「Limited」などのアイコンを併用できます。同様に、新商品には「New」のラベルを付けるなど、複数の要素を同時に強調できるため、販促イベントとも相性が良いです。

Shopify で new ラベルを実装するデメリット

次に、Shopify で new ラベルを実装するデメリットについて考察していきましょう。

1. コーディングやテーマ編集の知識が必要になる場合がある

シンプルな実装であれば HTML・CSS 程度のカスタマイズで済むこともありますが、商品ごとの表示・非表示を細かく制御したい場合は、Liquid で条件分岐を行うことが必要になります。テーマによっては該当箇所を特定しづらいケースもあり、開発コストがかさむ可能性があります。

2. デザインの一貫性を保つのが難しい場合がある

独自に new ラベルを実装すると、ストア全体のデザインとの整合性を保つ必要があります。アイコンのデザインが浮いてしまったり、テーマのレイアウトを崩してしまったりする恐れがあるので注意が必要です。

3. 運用管理が煩雑になることがある

商品を「新着」と判断する基準（公開から何日以内など）を自前で管理する場合、日数を経過したらラベルを外す処理が必要になります。放置すると古い商品にも new ラベルが付いたままになり、ユーザーを混乱させる原因となります。

4. ページ表示速度への影響が僅かにある

商品にバッジを挿入するためのスクリプトや画像が増えると、ページ表示のパフォーマンスがやや低下することがあります。特に、大規模なストアや高品質な画像を多用している場合は注意が必要です。

Shopify で new ラベルを実装する方法

それでは、Shopify で new ラベル（バッジ）を実装する方法について解説していきます。ここでは、HTML・CSS を使ったシンプルなサンプルコードをまず紹介し、次に Liquid を活用した応用編を考察していきます。

1. HTML・CSS で new ラベルを実装する例

以下は、商品画像の右上に「New」という小さなバッジを表示するサンプルコードです。

<!-- 商品画像のコンテナ -->
<div class="product-card">
  <img src="product-image.jpg" alt="Product Image" class="product-card__image">

  <!-- new ラベル（アイコン） -->
  <div class="product-card__badge">New</div>
</div>

<style>
  .product-card {
    position: relative;
    display: inline-block;
    width: 300px; /* 商品画像の幅に合わせて調整 */
    margin: 20px;
  }

  .product-card__image {
    width: 100%;
    display: block;
  }

  .product-card__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ff5555; /* バッジの背景色：ブランドカラーに合わせて変更可 */
    color: #fff;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    text-transform: uppercase; /* 「NEW」など大文字にしたい場合 */
    z-index: 10; /* 画像より前面に表示 */
  }
</style>

解説

.product-card に position: relative; を指定して、内部要素である .product-card__badge を絶対位置指定できるようにしています。
.product-card__badge を右上（top: 10px; right: 10px;）に配置し、「New」というラベルを表示しています。
バッジの背景色や文字色などは自由に変更可能です。ブランドカラーを使うと統一感が出ます。

2. Liquid を用いた応用例（商品追加日時で new を表示する）

Shopify の Liquid で実装する場合は、「商品が公開されてから何日以内なら new ラベルを表示する」といった条件分岐が考えられます。以下は、公開日から 14 日以内であれば new ラベルを表示するサンプルコードです。

{% assign today = 'now' | date: '%s' %}
{% assign published_date = product.published_at | date: '%s' %}

{% comment %}
  now => 現在日時（UNIX タイムスタンプ）
  product.published_at => 商品が公開された日時（UNIX タイムスタンプに変換）
{% endcomment %}

{% assign diff_in_seconds = today | minus: published_date %}
{% assign diff_in_days = diff_in_seconds | divided_by: 86400 %} 
{% comment %}
  86400 秒 = 1 日
{% endcomment %}

<div class="product-card">
  <img src="{{ product.featured_image.src | img_url: '400x' }}" alt="{{ product.title }}" class="product-card__image">

  {% if diff_in_days < 14 %}
    <!-- 14日以内であれば New ラベルを表示 -->
    <div class="product-card__badge">New</div>
  {% endif %}
</div>

<style>
  .product-card {
    position: relative;
    display: inline-block;
    width: 300px;
    margin: 20px;
  }

  .product-card__image {
    width: 100%;
    display: block;
  }

  .product-card__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ff5555;
    color: #fff;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    text-transform: uppercase;
    z-index: 10;
  }
</style>

解説

today には現在時刻を、published_date には商品公開日時をそれぞれ UNIX タイムスタンプで代入しています。
両者の差分 diff_in_seconds を日数に変換 (diff_in_days) し、14 日以内 (< 14) なら new ラベルを表示。
商品の公開日から一定期間だけ new バッジを表示し、経過したら自動的に消える仕組みを実装できます。
product.featured_image.src は代表的な商品画像を取得する Liquid のプロパティです。テーマによっては別のプロパティを使用する場合があります。

このように HTML・CSS に加え、Liquid の条件分岐を活用することで、Shopify で new ラベルを動的に管理できます。

Shopify アプリを用いて new ラベルを実装する方法

ここまでご紹介した方法は、ある程度のコーディング作業が必要でした。特に Liquid での条件分岐や、テーマ編集が苦手な方にはハードルが高いかもしれません。そこで、ノーコード（またはローコード）で簡単に new ラベル（アイコン）を実装する方法として、以下のアプリを紹介します。

シンプル商品バッジ｜お手軽アイコンラベル表示

シンプル商品バッジ｜お手軽アイコンラベル表示は、商品画像にテキストやアイコンのバッジを追加できる Shopify アプリです。新商品・セール・在庫わずかなど、多彩なバッジを簡単に設定できます。

以下のShopify公式のアプリストアからインストールできます。

主な機能

あらゆるページにバッジを表示可能（商品一覧、コレクション、商品詳細ページなど）
ノーコードでバッジのデザイン（画像・サイズ・色・テキスト）を自由にカスタマイズ
セールや在庫切れ、新着などの情報を強調表示して、クリック率や購入意欲を向上
特定のコレクションや商品だけにバッジを付けるなどの絞り込み設定も可能
英語および日本語に対応
月額 $5.99、7 日間の無料お試し期間あり

アプリの導入メリット

ノーコードで簡単に実装できる
テーマ編集を行わなくても、管理画面から必要なバッジを選択し、デザインをカスタマイズするだけで新しいラベルを表示できます。コーディングが苦手な方でも気軽に挑戦できます。
デザインの自由度が高い
用意されているアイコンやカラーパレットを利用するだけでなく、オリジナル画像のバッジをアップロードしたり、サイズや位置を細かく調整したりと、高いカスタマイズ性を持っています。
特定商品への絞り込み表示が可能
新商品だけに「New」バッジを付けたり、逆に在庫切れ時には「Sold Out」バッジを付けるなど、さまざまな条件で表示を切り替えられます。
操作ガイドが充実
日本語のマニュアルやサポートがあるため、困ったときにすぐに問い合わせが可能。初期設定でつまずくリスクを減らせます。

アプリの詳細

開発者：株式会社UnReact
価格：月額 $5.99（7 日間無料体験あり）
ストアリンク：シンプル商品バッジ｜お手軽アイコンラベル表示
評価：0.0 (0 レビュー)
インストール：簡単インストールで即日利用可能

このように、シンプル商品バッジ｜お手軽アイコンラベル表示 は、Shopify で new ラベルをはじめ各種バッジを簡単に導入できるアプリです。コーディングの手間なく導入できる点が大きな魅力と言えます。

シンプル商品バッジ｜お手軽アイコンラベル表示で new ラベル（アイコン）を表示する方法

それではここから、シンプル商品バッジ｜お手軽アイコンラベル表示 を用いて、new ラベル（アイコン）を実装する方法の概要を解説していきます。

こちらのアプリを用いると、ノーコードで商品画像にnew ラベル（アイコン）を付与することができます。

こちらのアプリを用いると、さまざまなページにnew ラベル（アイコン）を簡単に追加できます。

画像やテキストの商品バッジを追加できます。これにより、new ラベル（アイコン）を実現できます。

特定のコレクションや商品に対して、new ラベル（アイコン）を追加できます。

ノーコードで new ラベル（アイコン）をカスタマイズできます。

以下のShopifyの公式のアプリからインストールできます。

最後に

今回は、Shopify で new ラベル（アイコン）を実装する方法を、コーディングで実装するケースと、ノーコードでできるアプリを活用するケースの両方から解説しました。

HTML・CSS を使ったシンプルな new バッジ表示
Liquid での公開日条件分岐による動的表示
シンプル商品バッジ｜お手軽アイコンラベル表示 を使ったノーコード導入

これらをうまく組み合わせることで、ストアの新着商品をより魅力的にアピールできるはずです。「Shopify new ラベル」を実装して、サイトの売上アップにぜひ活用してみてください。

参考記事

今回は、以下の記事を参考にしています。

Discussion