はじめに

リピート商材を扱うECサイトにおいて、「前回いつ購入したか」「そろそろ買い替え時期かどうか」といった情報をユーザーに自然に伝えることは、再購入率・LTV向上に直結する重要なUX要素です。
しかしShopifyには、商品ページ上に前回購入日や再購入の目安を表示する標準機能は用意されていません。

本記事では、Shopifyの仕様や制約を踏まえたうえで、商品ページに「前回購入日」と「再購入日目安」を表示する実装方法を解説します。
パフォーマンスに配慮した実装設計をご紹介していますので、ぜひ最後までご覧ください！

実装前に理解しておきたいShopifyの仕様

まず前提として、Shopifyでは以下の点を理解しておく必要があります。

Shopifyでできること	Shopifyでできないこと
ログイン中の顧客情報の取得	未ログインユーザーの購入履歴参照
顧客の過去の購入履歴参照	商品単位で「前回購入日」を直接取得
注文日時や購入商品の情報取得	商品ページで大量の購入履歴を高速検索

このため、本記事の実装は以下を前提とします。

• 表示対象はログイン中ユーザーのみ
• 購入履歴の検索件数は制限する
• 再購入の目安は商品側で管理する

実装方法

1. 専用メタフィールドを設定

商品ごとの再購入目安日数を管理できるよう、メタフィールドを設定します。
管理画面で設定 > メタフィールドとメタオブジェクト > 商品 と進み、「定義を追加する」から下記内容で新規メタフィールドを作成します。

• 名前例：再購入サイクル
• ネームスペース：custom / キー：reorder_cycle_days
• タイプ：整数（数値）

作成されたメタフィールドに「30」「60」「90」など商品に応じた日数を入力すれば、個別に推奨再購入サイクルを管理できるようになります。

2. 商品ページに前回購入日＆再購入日目安を表示するためのコードを組み込む

「main-product.liquid」の任意の箇所に下記Liquidコードを追加します。（画像はクリックで拡大します）
今回は、商品情報ブロックの上部に表示されるようにしています。
※スタイルを調整したい場合は必要に応じてクラスを付与してください。

{% if customer %}
  {% assign last_purchase_date = blank %}
  {% assign is_purchased = false %}

  {% for order in customer.orders limit: 20 %}
    {% for line_item in order.line_items %}
      {% if line_item.product_id == product.id %}
        {% assign last_purchase_date = order.created_at %}
        {% assign is_purchased = true %}
        {% break %}
      {% endif %}
    {% endfor %}
    {% if is_purchased %}
      {% break %}
    {% endif %}
  {% endfor %}
{% endif %}
{%- if is_purchased and product.metafields.custom.reorder_cycle_days -%}
  {% assign reorder_days = product.metafields.custom.reorder_cycle_days %}
  {% assign reorder_seconds = reorder_days | times: 86400 %}
  {% assign reorder_timestamp = last_purchase_date | date: "%s" | plus: reorder_seconds %}
  {% assign reorder_date = reorder_timestamp | date: "%Y年%-m月%-d日" %}
{%- endif -%}
{% if is_purchased %}
  <div class="reorder-info">
    <p>あなたの前回のご購入日： <strong>{{ last_purchase_date | date: "%Y年%-m月%-d日" }}</strong></p>

    {% if reorder_date %}
      <p class="reorder-suggest">
        次回のご購入日の目安： <strong>{{ reorder_date }}</strong> ごろ
      </p>
    {% endif %}
  </div>
{% endif %}

Point 購入履歴（customer.orders）の検索回数に上限を設けることで、パフォーマンス負荷を抑えた運用が実現できます。

3. 商品ごとにメタフィールドを設定

再購入日目安を設定したい商品のメタフィールドに、任意の日数を整数で入力し、保存します。

上記手順により、商品ページ上に前回購入日と次回購入日の目安が表示されるようになります。

まとめ

いかがでしたか？
商品ページにこれらの情報を表示することで、ユーザーが購入判断を行う際の補助情報を提供することができます。
一方でShopifyでは取得できるデータや処理性能に一定の制約があるため、実装時には、表示対象・検索件数の制限やパフォーマンスとUXのバランスなどを意識する必要があります。

本記事でご紹介した方法は、テーマへの影響が限定的かつ、既存ストアにも導入しやすい構成です。
リピート購入が前提となる商品を扱っている場合は、一つのUX要素として積極的に検討する価値のあるカスタマイズといえるでしょう。
ぜひサイト制作の際にご活用くださいね。

弊社では、ECサイト制作だけでなくその後の運用までを、成果にコミットした万全のバックアップ体制でご支援しています。
売上最大化のために必要な運用すべてをサポートさせていただきますので、マーチャント様からの運用フェーズのご相談などでお困りの制作者様もお気軽にご連絡ください！