Shopify で商品の最終販売日時を表示する方法｜アプリ導入からコード実装まで解説

はじめに
記事の構成
Shopify で最終販売日時を表示できる？
最終販売日時を表示するメリット・デメリット
- メリット
- デメリット
テーマのコード編集とアプリ導入の比較
おすすめ Shopify アプリ「シンプル最後に売れた時間表示｜お手軽直近購入時刻表示」紹介
- アプリの基本情報
- できること
アプリのインストール手順
アプリをテーマに追加（有効化）
- 自動でテーマに追加
- 手動でテーマに追加
アプリの設定項目を理解する
すぐ使えるおすすめ設定例
関連施策との組み合わせ
テーマのコード編集で実装する場合のサンプルコード
運用のコツ
よくある質問
まとめ
参考記事

はじめに

Shopify ストアを運営していると「この商品、最近売れているのかな？」とお客様が気になる場面は多くあります。商品の最後に売れた時間や最終販売日時を商品ページに表示すれば、お客様に「この商品は人気がある」「ちゃんと売れている」と伝えることができます。

特に EC サイトでは、直近購入時間が見えるだけで「自分も買ってみよう」という気持ちが生まれやすくなります。しかし、Shopify のデフォルト機能には最終販売日時を表示する仕組みがありません。そのため、テーマのコード編集か専用アプリの導入が必要です。

この記事では、最終販売日時を表示するメリット・デメリットから、おすすめアプリの導入手順、テーマのコード編集による実装方法まで、幅広く解説します。

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

記事の構成

この記事は以下の流れで解説します。

Shopify で最終販売日時を表示できるのか
最終販売日時を表示するメリット・デメリット
テーマのコード編集とアプリ導入の比較
おすすめアプリ「シンプル最後に売れた時間表示｜お手軽直近購入時刻表示」の紹介
アプリのインストール手順
アプリをテーマに追加（有効化）する方法
アプリの設定項目を理解する
すぐ使えるおすすめ設定例
関連施策との組み合わせ
テーマのコード編集で実装する場合のサンプルコード
運用のコツ
よくある質問

Shopify で最終販売日時を表示できる？

結論から言うと、Shopify で商品の最終販売日時を表示することは可能です。方法は大きく2つあります。

テーマのコード編集で実装する方法: Liquid テンプレート、CSS、JavaScript を追加して自分で実装する
専用アプリを導入する方法: アプリをインストールしてテーマに追加するだけで表示できる

どちらの方法でも実現できますが、コーディングの知識がない場合はアプリを使うのが手軽でおすすめです。後半ではコード実装のサンプルも紹介しますので、技術的な知識がある方はそちらも参考にしてください。

最終販売日時を表示するメリット・デメリット

メリット

購買意欲の向上

「最後に売れた時間: 2時間前」と表示されていれば、お客様は「この商品、最近売れたばかりだ」と感じます。商品が動いている実感が伝わることで、自分も買ってみようという気持ちが自然に生まれます。

商品の人気度がひと目でわかる

最終販売日時が表示されることで、お客様はその商品がどれくらいの頻度で売れているのかを感覚的に把握できます。数時間前に売れた商品と1ヶ月前に売れた商品では、お客様が受ける印象はまったく違います。

信頼感の獲得

特に新しいストアや知名度がまだ低いストアでは「本当にこのお店で買って大丈夫？」と不安に感じるお客様がいます。最後に売れた時間が最近であれば、ストア自体が活発に運営されていることの証明になります。

「今買わなきゃ」という気持ちの後押し

直近購入時間が表示されていると、お客様は「この商品、売れているうちに自分も買っておこう」という心理になりやすくなります。EC サイトで購入を迷っているお客様の背中を押す効果が期待できます。

導入コストが低い

最終販売日時の表示は、レビュー収集やポイント制度のような大がかりな施策と比べて導入が簡単です。アプリを入れてテーマに追加するだけで始められるので、小さなストアでもすぐに試せます。

デメリット

古い販売日が逆効果になる可能性

もし最終販売日時が「3ヶ月前」だった場合、お客様には「この商品、全然売れていないんだ」と思われてしまいます。逆効果になるリスクがあるため、一定期間が経過したら表示を非表示にする工夫が必要です。

表示の管理が必要

商品数が多いストアでは、売れ筋商品とそうでない商品が混在します。すべての商品に一律で最終販売日時を表示すると、かえってマイナスの印象を与える商品が出てくる可能性があります。

ページの表示速度への影響

実装方法によっては、外部 API の呼び出しや JavaScript の処理が追加されるため、ページの表示速度に影響が出る可能性があります。軽量なアプリやコードを選ぶことが大切です。

テーマのコード編集とアプリ導入の比較

テーマのコード編集で実装する方法

メリット

月額費用がかからない
表示のデザインを完全にコントロールできる
外部サービスに依存しない

デメリット

Liquid、CSS、JavaScript の知識が必要
テーマのアップデートで動かなくなる可能性がある
バグが発生した場合、自分で対処する必要がある
メタフィールドの管理や Webhook の設定など、バックエンドの知識も必要

アプリを導入する方法

メリット

コーディング不要で導入できる
テーマエディタからカスタマイズできる
アプリ側がアップデートやバグ修正を行ってくれる
サポートに問い合わせができる

デメリット

月額費用がかかる
カスタマイズの自由度がアプリの機能に依存する

結論：最初はアプリで小さく試すのがおすすめ

最終販売日時の表示を初めて導入する場合は、まずアプリで試してみることをおすすめします。アプリなら数分で導入でき、効果を確かめた上でコード実装に切り替えることもできます。無料体験期間があるアプリを選べば、費用をかけずに検証できます。

アプリのインストール手順

それでは、実際にアプリをインストールしていきましょう。

手順1: ストア管理画面左下の「設定」をクリックします。

設定をクリック

手順2: 「アプリと販売チャネル」をクリックし、「Shopify App Store」に移動します。

Shopify App Store を開く

手順3: 検索窓に「シンプル最後に売れた時間表示｜お手軽直近購入時刻表示」と入力し、表示されたアプリをクリックします。

アプリを検索する

手順4: アプリの詳細画面から「インストール」ボタンをクリックしてストアにインストールします。

アプリをインストールする

手順5: 権限内容が表示されたら確認し、「インストール」を完了してください。

インストール完了

以上で、アプリのインストールは完了です。

アプリをテーマに追加（有効化）

インストールが完了したら、テーマにアプリブロックを追加して商品ページに表示させましょう。自動追加と手動追加の2つの方法があります。

自動でテーマに追加

手順1: アプリの管理画面を開き、追加したいテーマを選択して「テーマに追加」ボタンをクリックします。

テーマに追加

手順2: テーマ編集画面が開いたら、アプリブロックが有効化されていることを確認し、「保存する」をクリックしてください。

テーマ編集画面で保存する

以上で、自動追加は完了です。

手動でテーマに追加

自動追加がうまくいかない場合や、表示位置を細かく調整したい場合は、手動で追加してください。

手順1: Shopify 管理画面から「オンラインストア」→「テーマ」を開き、対象テーマの「カスタマイズ」をクリックします。

テーマをカスタマイズする

手順2: 商品ページテンプレートを開き、アプリを表示したい位置で「ブロックを追加」をクリックします。

商品ページでブロックを追加する

手順3: 「アプリ」タブから UR: Product Last Sold Label を選択して追加します。

UR: Product Last Sold Label を追加する

手順4: 表示位置や見え方を確認し、「保存する」をクリックしてください。

アプリブロックを保存する

以上で、手動でのブロック追加は完了です。

アプリの設定項目を理解する

テーマエディタの設定パネルでは、さまざまなカスタマイズが可能です。以下で各設定項目を詳しく解説します。

アプリの設定項目

コンテンツ設定

テキスト

表示するテキストのテンプレートを設定します。[date_time] と書くと、その部分が自動的に最終販売日時に置き換わります。

例:

最後に売れた時間: [date_time] → 「最後に売れた時間: 2時間前」
[date_time] に最後に購入されました → 「2時間前に最後に購入されました」
Last sold: [date_time] → 「Last sold: 2 hours ago」

日付フォーマット

日付の表示形式を3種類から選べます。

相対表示: 「2時間前」「3日前」のように現在時刻からの経過時間で表示
日付のみ: 「2026/04/16」のように日付だけを表示
日付と時刻: 「2026/04/16 14:30」のように日付と時刻の両方を表示

日付の並び順

年月日の並び順を変更できます。ストアのターゲット地域に合わせて設定してください。

YYYY/MM/DD（年/月/日） — 日本向け
MM/DD/YYYY（月/日/年） — アメリカ向け
DD/MM/YYYY（日/月/年） — ヨーロッパ向け

12時間表示（AM/PM）を使用

チェックを入れると、時刻が12時間表示になります（例: 2:30 PM）。チェックを外すと24時間表示になります（例: 14:30）。

販売なしのメッセージを表示

まだ一度も売れていない商品にもメッセージを表示するかどうかの設定です。有効にすると、販売実績のない商品に「Be the first to buy this product!」のようなテキストが表示されます。

指定日数経過後に非表示（日）

最終販売日から何日経過したら表示を隠すかを設定します。0 の場合は常に表示されます。たとえば 30 を設定すると、30日以上前に売れた商品では販売日時が非表示になります。古い情報が逆効果にならないよう、30〜60日程度の設定がおすすめです。

文字設定

文字の大きさ

テキストのフォントサイズを 10px 〜 24px の範囲で調整できます。商品ページの他のテキストとバランスを取りながら設定してください。

文字の色

テキストの色を自由に設定できます。テーマの配色に合わせて調整することで、デザインの統一感を保てます。

アイコン設定

アイコンを表示

テキストの左側にアイコンを表示するかどうかの設定です。

アイコンの種類

5種類のアイコンから選択できます。

時計: 時間のイメージ。落ち着いた印象
炎: 売れ筋・人気商品のイメージ。目を引きやすい
カート: 購入・ショッピングのイメージ
タグ: セール・お得感のイメージ
チェック: 実績・安心のイメージ

アイコンの大きさ

アイコンのサイズを 12px 〜 32px の範囲で調整できます。

アイコンの色

アイコンの色を自由に設定できます。テキストと同じ色にするのがシンプルですが、赤やオレンジなど目立つ色にして注目を集めるのも効果的です。

レイアウト設定

テキスト配置

テキストの配置を左揃え・中央揃え・右揃えから選べます。商品ページのデザインに合わせて選択してください。

アニメーション

テキストの表示時にアニメーションを付けることができます。全10種類から選べます。

なし（デフォルト）
フェードイン: ふわっと表示
バウンス: 弾むように表示
スライドイン（左から / 右から）: 横からスライドして表示
シェイク: 小さく揺れて注目を集める
パルス: 点滅して目を引く
グロー: テキストが光る
ハートビート: 鼓動のようにリズミカルに拡大縮小
タイプライター: 文字が1文字ずつ表示

余白設定

上部余白 / 下部余白

ブロックの上下の余白を 0px 〜 40px の範囲で設定できます。前後のコンテンツとの間隔を調整するのに使います。

追加設定

追加の CSS

テーマエディタから独自の CSS を記述できます。標準の設定項目では実現できない細かなスタイル調整に使います。

すぐ使えるおすすめ設定例

設定例1: シンプルな相対表示（初心者向け）

最もスタンダードな設定です。迷ったらまずはこれを試してください。

テキスト: 最後に売れた時間: [date_time]
日付フォーマット: 相対表示
指定日数経過後に非表示: 30日
アイコンを表示: オフ
文字の大きさ: 14px
文字の色: #666666
アニメーション: なし

設定例2: 目立たせる設定（販売促進向け）

売れ筋商品をしっかりアピールしたい場合の設定です。

テキスト: [date_time] に売れました！
日付フォーマット: 相対表示
指定日数経過後に非表示: 14日
アイコンを表示: オン
アイコンの種類: 炎
アイコンの色: #E74C3C（赤）
文字の大きさ: 16px
文字の色: #E74C3C（赤）
アニメーション: パルス

設定例3: 具体的な日時表示（信頼性重視）

具体的な日時を表示して、データの透明性をアピールする設定です。

テキスト: 最終販売日時: [date_time]
日付フォーマット: 日付と時刻
日付の並び順: YYYY/MM/DD
12時間表示: オフ
指定日数経過後に非表示: 60日
アイコンを表示: オン
アイコンの種類: チェック
アイコンの色: #27AE60（緑）
文字の大きさ: 13px
文字の色: #555555

文言のテンプレ例

ストアの雰囲気やターゲットに合わせて、テキストテンプレートを変えてみてください。

カジュアルなアパレル系ストア

[date_time] に誰かがゲットしました
直近購入: [date_time]

食品・日用品系ストア

最後に売れた時間: [date_time]
[date_time] にお買い上げいただきました

高級感のあるストア

最終販売: [date_time]
Last purchased: [date_time]

英語圏向けストア

Last sold: [date_time]
Someone bought this [date_time]

テーマのコード編集で実装する場合のサンプルコード

アプリを使わずに、テーマのコードを直接編集して最終販売日時を表示する方法を紹介します。この方法は Liquid、CSS、JavaScript の知識がある方向けです。

実装の流れ

商品のメタフィールドに最終販売日時を保存する仕組みを用意する（Shopify Flow や外部システムとの連携が必要）
Liquid テンプレートで HTML を追加する
CSS でスタイルを整える
JavaScript で日時のフォーマットや相対表示を行う

ここでは、メタフィールド（namespace: custom、key: last_sold_at）にISO 8601形式の日時が保存されている前提でのフロントエンド実装を紹介します。

HTML を追加

商品テンプレートの適切な位置（main-product.liquid や product.liquid など）に以下のコードを追加します。

{%- assign last_sold = product.metafields.custom.last_sold_at.value -%}
{%- if last_sold != blank -%}
  <div class="last-sold-time" data-last-sold="{{ last_sold | date: '%Y-%m-%dT%H:%M:%S%z' }}">
    <span class="last-sold-time__icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"/>
      </svg>
    </span>
    <span class="last-sold-time__text">
      最後に売れた時間:
      <time class="last-sold-time__value" datetime="{{ last_sold | date: '%Y-%m-%dT%H:%M:%S%z' }}">
        {{ last_sold | date: '%Y/%m/%d %H:%M' }}
      </time>
    </span>
  </div>
{%- endif -%}

CSS を追加

テーマの CSS ファイルまたは <style> タグ内に以下を追加します。

.last-sold-time {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
  font-size: 14px;
  color: #666666;
  line-height: 1.4;
}

.last-sold-time__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.last-sold-time__icon svg {
  fill: #666666;
}

.last-sold-time__text {
  margin: 0;
}

JavaScript を追加

テーマの JavaScript ファイルまたは <script> タグ内に以下を追加します。このコードは、サーバーサイドで出力された日時を「〇時間前」「〇日前」のような相対表示に変換します。

(function() {
  'use strict';

  // 最終販売日時の表示要素を取得
  var container = document.querySelector('.last-sold-time');
  if (!container) return;

  var rawDatetime = container.dataset.lastSold;
  if (!rawDatetime) return;

  // 日時文字列をパース（Safari互換）
  var normalized = rawDatetime.replace(/([+-]\d{2})(\d{2})$/, '$1:$2');
  var date = new Date(normalized);
  if (isNaN(date.getTime())) return;

  // 指定日数経過後に非表示（例: 30日）
  var HIDE_AFTER_DAYS = 30;
  if (HIDE_AFTER_DAYS > 0) {
    var diffMs = Date.now() - date.getTime();
    var diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
    if (diffDays >= HIDE_AFTER_DAYS) {
      container.style.display = 'none';
      return;
    }
  }

  // 相対時間を計算して表示
  var valueEl = container.querySelector('.last-sold-time__value');
  if (!valueEl) return;

  var relativeTime = getRelativeTime(date);
  valueEl.textContent = relativeTime;

  /**
   * 相対時間を取得する関数
   * @param {Date} date - 日付オブジェクト
   * @returns {string} 相対時間の文字列（例: 「2時間前」「3日前」）
   */
  function getRelativeTime(date) {
    var now = Date.now();
    var diffMs = now - date.getTime();
    var diffSec = Math.floor(diffMs / 1000);
    var diffMin = Math.floor(diffSec / 60);
    var diffHour = Math.floor(diffMin / 60);
    var diffDay = Math.floor(diffHour / 24);

    // Intl.RelativeTimeFormat が使えるブラウザでは自動ローカライズ
    try {
      var locale = document.documentElement.lang || 'ja';
      var rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });

      if (diffDay > 30) {
        // 30日以上前はローカライズされた日付を返す
        return date.toLocaleDateString(locale);
      } else if (diffDay >= 1) {
        return rtf.format(-diffDay, 'day');
      } else if (diffHour >= 1) {
        return rtf.format(-diffHour, 'hour');
      } else if (diffMin >= 1) {
        return rtf.format(-diffMin, 'minute');
      } else {
        return rtf.format(0, 'second'); // 「たった今」
      }
    } catch (e) {
      // フォールバック（日本語）
      if (diffDay >= 1) return diffDay + '日前';
      if (diffHour >= 1) return diffHour + '時間前';
      if (diffMin >= 1) return diffMin + '分前';
      return 'たった今';
    }
  }
})();