Shopifyで「最近見た商品」一覧を表示する方法を解説。商品ページで閲覧履歴をローカルストレージに保存し、任意のページに一覧として表示できます。購入までの導線が長いショップでも、ユーザーが再度商品を見つけやすくなり、離脱防止や回遊率アップに効果的です。
運用中の食材専門ECサイトで、「初めて訪問したユーザーに会員登録を促すキャンペーンを行おう」という話が出ました。内容は、会員登録をすると500円クーポンをプレゼントするというもの。
しかし実際に検討してみると、初訪問ユーザーの多くはオーガニック検索から商品ページに直接アクセスしており、会員登録後のリダイレクト先がデフォルトで“マイアカウントページ”になることが問題に。せっかく商品に興味を持って登録してくれても、商品ページから離れてしまうと迷子になってしまうのです。
そこで思いついたのが、補助的ではありますが「最近見た商品」一覧を表示させる方法。登録後も自分が見ていた商品を辿りやすくすることで、離脱を防ぎ、購入までの導線を自然に整えることができます。
この記事では、その「最近見た商品」機能をShopifyで簡単に実装する方法を紹介します。
ざっくりいうとこんな感じ
実装の流れはとてもシンプルです。
まず、商品ページのLiquidテンプレート（たとえば「main-product.liquid」）にJavaScriptコードを埋め込み、ユーザーが見た商品の情報をブラウザのローカルストレージに保存します。
次に、任意のセクションファイル（例：「recently-viewed.liquid」）を作成し、ローカルストレージに保管されたデータを取得して一覧表示します。
これにより、トップページやコレクションページなど、どのページにも「最近見た商品」を表示できるようになります。
もっとシンプルに言うと、商品ページで「自分はこれを見ました」と自己申告をしておき、一覧セクションでその「台帳を取り出して発表」するような仕組みです。
ShopifyのLiquidとシンプルなJavaScriptだけで完結するので、外部アプリに頼らず軽量に実装できるのが特徴です。
実装コードを見てみましょう
では、実装コードを見てみましょう！
商品ページに実装するJs
<script>
document.addEventListener("DOMContentLoaded", function() {
const STORAGE_KEY = 'recentProducts';
const product = {
handle: "{{ product.handle }}",
title: "{{ product.title | escape }}",
image: "{{ product.featured_image | image_url: width: 300 }}",
url: "{{ product.url }}"
};
// 履歴を取得
let viewed = JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
// 重複を除外して先頭に追加
viewed = viewed.filter(p => p.handle !== product.handle);
viewed.unshift(product);
// 最大10件まで保存
const maxItems = 10;
if (viewed.length > maxItems) viewed = viewed.slice(0, maxItems);
localStorage.setItem(STORAGE_KEY, JSON.stringify(viewed));
});
</script>簡単に解説します。
・商品ページが読み込まれると DOMContentLoaded イベントが発火し、処理が始まります。
・STORAGE_KEYは localStorage（ブラウザ内の小さな保存箱）のラベル名。ここでは「recentProducts」 という箱を使って商品データを保管します。
・すでに保存されているデータを取得し、同じ商品があれば削除してから先頭に追加。
・保存件数の上限は10件。これは必須ではありませんが、無限に増えるとデータが肥大化し、ブラウザの動作が重くなる可能性があるため設定しています。
最近見た商品一覧を作成
{% schema %}
{
"name": "Recently Viewed Products",
"settings": [
{
"type": "range",
"id": "limit",
"label": "表示件数",
"min": 1,
"max": 10,
"step": 1,
"default": 4
}
],
"presets": [
{
"name": "Recently Viewed Products"
}
]
}
{% endschema %}
<div id="recently-viewed-products-{{ section.id }}" class="recently-viewed">
<h2>最近見た商品</h2>
<div class="recently-viewed__inner" style="display:flex; flex-wrap:wrap; gap:10px;"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const STORAGE_KEY = 'recentProducts';
const container = document.querySelector('#recently-viewed-products-{{ section.id }} .recently-viewed__inner');
if (!container) return;
// localStorage から履歴を取得
let items = JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
// 商品ページでは、今見ている商品を除外
{% if template.name == 'product' %}
items = items.filter(p => p.handle !== "{{ product.handle }}");
{% endif %}
// 表示件数を schema の設定で制御
const limit = {{ section.settings.limit }};
items = items.slice(0, limit);
// 履歴がなければメッセージ表示
if (items.length === 0) {
container.innerHTML = '<p class="recently-viewed__empty">閲覧履歴はまだありません。</p>';
return;
}
// シンプルなタイトルリスト（最小構成）
items.forEach(p => {
const itemHTML = `
<div class="recently-viewed__item">
<a href="${p.url}">
<p>${p.title}</p>
</a>
</div>
`;
container.insertAdjacentHTML('beforeend', itemHTML);
});
});
</script>簡単に解説します。
・「STORAGE_KEY = ‘recentProducts’」に保存してある履歴（商品情報の配列）を取得します。
・表示しているページが商品ページの場合は、現在の商品をリストから除外します。
・セクション設定の表示件数（limit）で出力数を制御します。
・DOM操作でシンプルなリストを生成して表示します（最小構成なのでまずはタイトルのみ）。
＊＊＊
以上、Shopifyで「最近見た商品」一覧を作成する方法でした。
商品数が多かったり、購入までの導線が複雑なショップでは、ユーザーが途中で迷子になってしまうこともあります。そんなとき、閲覧履歴として「最近見た商品」が表示されていれば、再訪や購入のきっかけをつくる助けになります。
特別なアプリを入れなくても、LiquidとシンプルなJavaScriptだけで実装できるので、ユーザー体験のちょっとした改善にぜひ試してみてください！
