Zenn
😊

Shopifyで新商品の表示を実装する方法を考察

に公開
Shopify
tech

はじめに

今回は、Shopify で新商品の表示を実装する方法について考察しました。

多くのストアオーナーが、他の商品との差別化や注目度アップのために「Shopify 新商品 表示」の実装を求めています。そこで、HTML・CSS・Liquid を用いたコーディングによる表示方法と、便利な Shopify アプリ「シンプル商品バッジ｜お手軽アイコンラベル表示」を使った方法を比較しながら解説していきます。

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

それでは、頑張っていきましょう。

Shopify で新商品の表示を実装する定義

ECサイトにおいて「新商品であること」を視覚的にアピールすることは、とても重要です。「新商品」のバッジが付くだけで、購入を検討しているユーザーに対して、「今のトレンド商品だ」「ほかの商品とは違う特別感がある」というポジティブな印象を与えることができます。

Shopify で「Shopify 新商品 表示」を実装する方法には、以下の二つがあります。

  1. コーディングで Liquid や HTML・CSS を用いて新商品バッジを表示する
  2. アプリを導入してノーコードで新商品バッジを表示する

今回は、この二つの方法を考察していきます。

Shopify で新商品の表示を実装するメリット

まずは、Shopify で新商品バッジを実装するメリットについて解説していきましょう。

1. 商品の目立ちやすさ向上

新商品をバッジで明示することで、サイト訪問者が新しい商品に気づきやすくなります。特に多くの商品を扱っているストアでは、新商品の埋もれを防ぎ、スムーズに訴求が行えます。

2. 購買意欲の刺激

「新登場」「最新入荷」などといった言葉には、ユーザーの興味を引く力があります。新商品バッジを表示することで、「今だけの特別な商品かもしれない」「他よりも早く手に入れたい」といった感情を喚起し、購買意欲を高める効果が期待できます。

3. ブランディングやイメージ向上

新商品バッジをブランドのカラーやトーンに合わせてカスタマイズすれば、統一感のある魅力的な商品ページが作れます。視覚的に分かりやすく、洗練されたイメージを与えることで、ストア全体のブランディングにもつながります。

4. 情報提供の効率化

新商品がどれなのかユーザーに伝えるには、テキストで説明する方法もありますが、バッジを用いることで一目でわかります。テキストを多用せずに、直感的に新商品をアピールできる点は大きなメリットです。

Shopify で新商品の表示を実装するデメリット

次に、Shopify で新商品バッジを実装するデメリットについて考察していきます。

1. コードの管理・メンテナンスが必要

コーディングで実装する場合、テーマごとにコードを編集する必要があります。これに伴い、テーマをアップデートした際に修正が必要になるなど、メンテナンスコストが発生します。

2. デザインの不整合リスク

新商品バッジを追加する位置やスタイルがテーマのレイアウトと合わないと、ページデザインの統一感が崩れてしまう可能性があります。手動でデザインを調整する場合は、それなりの知識と手間がかかります。

3. 適切なタイミング管理が必要

「新商品」としてバッジを表示させる期間をどのように設定するか、また「新商品」から外すタイミングをどうするかを管理しないと、いつまでも新商品バッジが表示され続けるなどの混乱が生じる恐れがあります。

4. テーマによる制限

Shopify テーマによっては、商品ページやコレクションページでコードを自由に追加・編集することが難しい場合もあります。そのため、大幅なテーマ改修が必要になる可能性があります。

Shopify で新商品の表示を実装する方法

それでは、コーディングによって新商品バッジを実装する方法について考察していきます。

HTML・CSS・Liquid を用いた新商品の表示（バッジ）の実装

以下は、新商品バッジを表示するためのサンプルコードです。たとえば「商品が公開されてから 14 日以内ならバッジを表示する」というロジックを Liquid で書くイメージです。

{% assign fourteen_days_ago = 'now' | date: "%s" | minus: 1209600 %}

<div class="product-item">
  <!-- 商品画像やタイトルなど -->
  <h2>{{ product.title }}</h2>
  <!-- 新商品判定ロジック -->
  {% assign product_created_at_unix = product.created_at | date: "%s" %}
  {% if product_created_at_unix >= fourteen_days_ago %}
    <span class="new-badge">NEW</span>
  {% endif %}
</div>

<style>
  .product-item {
    position: relative;
    margin: 20px;
    border: 1px solid #ccc;
    padding: 15px;
  }
  .new-badge {
    display: inline-block;
    padding: 5px 10px;
    background-color: #ff4a4a;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    margin-left: 10px;
  }
</style>

ポイント解説

  • product.created_at から UNIX タイムスタンプを取得し、現在の時刻から 14 日を引いた時刻と比較しています。
  • 判定期間を変更したい場合は 1209600（14 日）を変更すれば OK です。
  • 「NEW」の文言やデザインは自由にカスタマイズできるので、ブランドカラーに合わせるとよいでしょう。

上記の方法はシンプルでわかりやすい反面、テーマのコード編集や判定期間のメンテナンスが必要になります。これらをノーコードで解決したい場合は、次の Shopify アプリを利用する方法がおすすめです。

Shopify アプリを用いて新商品の表示を実装する方法

ここでは、株式会社UnReact が提供しているシンプル商品バッジ｜お手軽アイコンラベル表示というアプリを紹介します。月額$5.99、7日間の無料トライアルが利用できるうえ、ノーコードで新商品バッジを表示できる便利なツールです。

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

https://apps.shopify.com/ur-smart-product-badge?locale=ja

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

  • 価格設定: 月額$5.99（USD）。7日間の無料体験期間あり
  • 評価: 0.0 (0 レビュー)
  • 開発者: 株式会社UnReact
  • 特徴:
    • ノーコードで商品画像にバッジを追加できる
    • さまざまなページに商品バッジを簡単に追加できる
    • 画像やテキストの商品バッジを自由にカスタマイズ可能
    • 特定のコレクションや商品にだけバッジを表示することもできる
    • バッジで商品を目立たせ、購買意欲を高める

このアプリを利用することで、以下のような恩恵が得られます。

  1. コード不要: テーマのコードを直接編集しなくてよいため、デザイン崩れやアップデート時の不具合が少ない
  2. バッジの自由なカスタマイズ: 色、形、テキストなどブランドに合わせてデザインを簡単に変更
  3. 特定商品のみ表示: 新商品だけでなく、「セール商品」「在庫残りわずか」など、様々な切り口でバッジを表示
  4. 時短・簡単管理: 直感的な管理画面を通して、バッジの追加や削除が行えるため、運用がとてもラク

コードを直接触るのが難しい方、あるいはデザインの自由度を重視する方は、「シンプル商品バッジ｜お手軽アイコンラベル表示」の導入を検討してみる価値があります。

シンプル商品バッジ｜お手軽アイコンラベル表示を用いて新商品の表示を行う概要

ここからは、シンプル商品バッジ｜お手軽アイコンラベル表示を用いて新商品の表示を用いて、新商品の表示を行う方法について解説していきます。

ノーコードで商品画像にバッジを追加できることで、新商品の表示を行うことができます。

さまざまなページに商品バッジを簡単に追加できます。

特定のコレクションや商品に対して商品バッジを追加できることで、新商品の表示を実現できます。

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

https://apps.shopify.com/ur-smart-product-badge?locale=ja

最後に

今回は、Shopify で新商品の表示を実装する方法について、コーディングによる実装方法と Shopify アプリを活用した方法を解説しました。

  • コーディング: Liquid の条件分岐や HTML・CSS を用いて、新商品バッジを表示するロジックを組む
  • アプリ: 「シンプル商品バッジ｜お手軽アイコンラベル表示」を用いてノーコードで実装し、バッジのデザインや表示対象を自由に設定

「Shopify 新商品 表示」を実装する手段として、運用やデザイン、メンテナンスを踏まえながら、自分のストアに最適な方法を選んでみてください。お疲れさまでした。

参考記事

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

Discussion