【Shopify】新商品や最新記事に「New」アイコンをつける方法！Liquidをカスタマイズして実装しよう！

新商品や新規記事に「New」アイコンをつけるメリット

「New」アイコンを商品やブログに付けることには多くのメリットがあります。

新規性を強調することで、ユーザーの目を引きやすくなり、視覚的にアピールする効果

「New」アイコンを使うことで、ユーザーの目を引きやすくなり、視覚的なアピールが強化されます。

特にECサイトでは、ユーザーの視線を誘導し、特定の商品や情報に注目させることが重要です。
調査によれば、視覚的な要素が購買意欲に与える影響は最大94%にもなるとされており、新規性を強調するアイコンはユーザーの購買行動に直接的な影響を与える可能性が高いです。

目立つ「New」アイコンはクリック率の向上にも影響し、サイト内の回遊率を高める

「New」アイコンは視覚的に目立つため、ユーザーの興味を引き、クリック率の向上につながります。

特に、検索結果や商品一覧で新商品を目立たせることで、他の商品との差別化が図れます。アイコンやバッジを用いた製品表示は、クリック率を最大30%向上させる可能性があり、サイト内の回遊率を高めるためにも有効です。

常に新しいコンテンツが提供されている印象を与えることで、リピーターの増加やブランドイメージの向上

「New」アイコンを定期的に更新することで、サイト全体が常に新鮮であるという印象を与えます。

ユーザーは新しい情報を求める傾向が強いため、常に新しいコンテンツがあると感じることで、リピーターが増加します。ユーザーの70%以上が最新情報を求めることが判明しており、新規性の強調はブランドイメージの向上にも影響します。

コンバージョン率の改善や顧客満足度の向上と、SEO対策としても有効な手段

「New」アイコンを使用することで、商品やコンテンツの新規性が明示され、これが顧客の購買意欲を促進します。

また、SEOの観点からも新しいコンテンツは検索エンジンに評価されやすく、ランキング向上に貢献します。コンバージョン率が改善することで、ユーザー満足度も向上し、結果的にリピーターの増加と長期的な収益性の向上が期待できます。

ShopifyのLiquidをカスタマイズして実装

商品に「New」アイコンをつける場合

商品をカスタマイズする場合、productオブジェクトから商品の登録日、もしくは、商品の公開日を取得します。

• product.created_at　商品の登録日
• product.published_at　商品の公開日

“published_at”は公開日になります。下書きの商品を公開（アクティブ）にした時のタイムスタンプを取得できます。

Liquidのソースコード編集

このコードでは、"published_at”（公開日）を使用して解説します。
公開してから60日間アイコンを表示させる方法です。

{%- assign today = 'now' | date: '%s' | plus: 0 -%}
{%- assign published = product.published_at | date: '%s' -%}
{%- assign add_day = 60 | times: 24 | times: 60 | times: 60 -%}
{%- assign show_period = published | plus: add_day | plus: 0 -%}
{%- if show_period > today -%}
	Newアイコン
{%- endif -%}

日付の計算や比較は、日付を秒数に変換してから行います。

今日の日付を取得してdateフィルターを使用して秒数に変換しています。

{%- assign today = 'now' | date: '%s' | plus: 0 -%}

商品の公開日を取得してdateフィルターを使用して秒数に変換しています。

{%- assign published = product.published_at | date: '%s' -%}

“ | plus: 0”は、取得した値が文字列型でなく、数値型として扱うために記述しています。

---

加算する日付を取得します。
今回は60日間表示する計算になります。

{%- assign add_day = 60 | times: 24 | times: 60 | times: 60 -%}

{%- assign add_day = ◯日 | times: 24 | times: 60 | times: 60 -%}

分数を秒数に変換する ・・・ ◯ × 60
時間を秒数に変換する ・・・ ◯ × 3600（60分（1時間） × 60秒）
日数を秒数に変換 ・・・ ◯ × 86400（24時間（1日） × 3600秒（時間を秒数に変換））

---

加算日を取得したら、公開日にたします。

{%- assign show_period = published | plus: add_day | plus: 0 -%}

“ | plus: 0”は、取得した値が文字列型でなく、数値型として扱うために記述しています。

---

加算日を追加した公開日が、今日より未来であるかを条件分岐します。

{%- if show_period > today -%}
	Newアイコン
{%- endif -%}

これで「New」アイコンを表示することができます！

ブログ記事に「New」アイコンをつける場合

ブログ記事は商品と同じく“created_at”と“published_at”の他に、“updated_at”があります。
“updated_at”は記事の更新日を取得できます。

• article.created_at　記事の登録日
• article.published_at　記事の公開日
• article.updated_at　記事の更新日

まとめ

いかでしたでしょうか？
今回の記事では、ShopifyのLiquidを編集して、Newアイコンをつけるカスタマイズを解説しました！

「New」アイコンはユーザーに対してのアピールやブランド力向上、SEO対策と多岐に渡り効果があります！
この記事を参考にしてShopifyのLiquidをカスタマイズしてよりよいオンラインストアにしていただければと思います！

最後までお読みいただきありがとうございました！