【2025年】Shopifyで商品の閲覧履歴を表示するには？おすすめアプリも紹介！

はじめに
Shopifyで商品の閲覧履歴を表示できる？
商品閲覧履歴とは？その効果
- 閲覧履歴機能の基本的な仕組み
- 閲覧履歴がもたらす主な効果
Shopifyで商品閲覧履歴を表示するメリット
Shopifyで商品閲覧履歴を表示するデメリット
Shopifyで商品閲覧履歴を実装する2つの方法
テーマのコード編集で実装する場合
アプリを利用して実装する場合
おすすめアプリ「シンプル商品閲覧履歴アプリ｜お手軽最近見た商品」
アプリのインストール手順
アプリの使用方法とカスタマイズ
商品閲覧履歴の効果的な活用法
まとめ
- 重要なポイントの振り返り
- 最後に
参考記事

はじめに

ECサイトにおいて、顧客の購買体験を向上させることは売上拡大の重要な要素です。その中でも**「最近見た商品」や「閲覧履歴」**の表示機能は、顧客の回遊性を高め、購買率を向上させる効果的な仕組みとして注目されています。

2025年現在、多くの大手ECサイトで採用されている商品閲覧履歴機能は、顧客が一度見た商品を再び簡単に見つけることができ、購買決定のサポートや回遊率の向上に大きく貢献しています。特にアパレルや雑貨、書籍などの商品数が多いストアでは、顧客が興味を持った商品を見失うことなく、スムーズな購買体験を提供できます。

本記事では、Shopifyストアに商品の閲覧履歴機能を実装する方法について、テーマのコード編集による方法とアプリを利用する方法の両面から詳しく解説し、特におすすめのアプリ「シンプル商品閲覧履歴アプリ｜お手軽最近見た商品」の使い方まで実践的な内容をお届けします。

初心者から上級者まで、それぞれのレベルに応じた実装方法を紹介していますので、ぜひ最後までご覧ください。

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

Shopifyで商品の閲覧履歴を表示できる？

結論から申し上げると、Shopifyストアに商品の閲覧履歴機能を実装することは可能です。ただし、Shopifyの標準機能では提供されていないため、独自に実装する必要があります。

実装方法は大きく分けて2つのアプローチがあります：

1. テーマのコード編集による実装
JavaScript、CSS、Liquidを使用してテーマファイルを直接編集し、閲覧履歴機能を自作する方法です。完全にカスタマイズ可能で、ブラウザのローカルストレージを活用して閲覧した商品の情報を保存・表示します。

2. Shopifyアプリを利用した実装
Shopifyアプリストアで提供されている専用アプリをインストールして実装する方法です。プログラミング知識がなくても、管理画面から直感的に設定できるのが特徴です。

どちらの方法を選ぶかは、技術的なスキル、予算、求める機能性、メンテナンスの負担などを総合的に考慮して決めることが重要です。本記事では両方の方法について詳しく解説していきます。

商品閲覧履歴とは？その効果

商品閲覧履歴（最近見た商品）とは、顧客がECサイト内で過去に閲覧した商品の情報を記録し、後から簡単にアクセスできるように表示する機能です。一般的に「最近見た商品」「閲覧履歴」「Recently Viewed」などの名称で呼ばれています。

閲覧履歴機能の基本的な仕組み

データの保存方法
閲覧履歴は主にブラウザのローカルストレージやセッションストレージに保存されます。これにより、ページを移動しても情報が保持され、再訪問時にも閲覧履歴を確認できます。

表示する情報

商品画像
商品名
価格
閲覧日時（オプション）
在庫状況（オプション）

表示場所の例

ホームページ
商品詳細ページ
カートページ
フッター部分
サイドバー

閲覧履歴がもたらす主な効果

1. 回遊率の向上
顧客が一度見た商品に簡単にアクセスできることで、サイト内の滞在時間と閲覧ページ数が増加します。特に商品を比較検討する際に、何度も見返すことができるため、ユーザビリティが大幅に向上します。

2. 購買率の向上
興味を持った商品を見失うことなく、購買決定までの導線がスムーズになります。実際の統計では、閲覧履歴機能の導入により、コンバージョン率が5-15%向上するという報告があります。

3. 顧客満足度の向上
ユーザーフレンドリーな機能により、顧客のショッピング体験が改善され、ブランドへの好感度が向上します。

4. 再訪問率の向上
気になった商品をブックマークする代わりに、サイトに再訪問して閲覧履歴を確認する行動が促進されます。

Shopifyで商品閲覧履歴を表示するメリット

1. 売上の直接的な向上

商品閲覧履歴の最大のメリットは、売上への直接的な貢献です。顧客が過去に興味を示した商品に簡単にアクセスできることで、以下のような効果が期待できます：

再購入の促進: 消耗品や定期購入商品の再注文
関連商品の購入: 閲覧した商品に関連するアイテムの追加購入
比較検討の促進: 複数の商品を比較して最適な選択肢を見つける

実際の事例では、商品閲覧履歴の導入により平均注文単価が10-20%向上したケースも報告されています。

2. ユーザビリティの大幅な改善

ナビゲーションの簡素化
商品数が多いストアでは、一度見た商品を再度見つけるのが困難な場合があります。閲覧履歴機能により、複雑な検索やカテゴリ移動をすることなく、ワンクリックで目的の商品にアクセスできます。

時間の節約
顧客がサイト内で商品を探す時間を大幅に短縮できます。特にモバイルデバイスでは、限られた画面サイズでの操作性が向上します。

3. パーソナライゼーションの基盤

閲覧履歴データは、顧客の興味や嗜好を理解するための重要な情報源となります：

おすすめ商品の精度向上: 閲覧パターンに基づいた商品推薦
ターゲティング広告の最適化: リターゲティング広告の効果向上
在庫管理の最適化: 人気商品の需要予測

4. カート放棄率の削減

閲覧履歴により、顧客が購買プロセスの途中で離脱した場合でも、簡単に元の状態に戻れます：

中断からの復帰: 後で購入を検討したい商品への再アクセス
比較購入の促進: 複数の選択肢から最適な商品を選択
衝動買いの機会創出: 過去に見た商品への再関心

5. モバイルユーザー体験の向上

スマートフォンでのショッピングが主流となった現在、閲覧履歴はモバイルユーザーにとって特に重要な機能です：

画面サイズの制約克服: 限られた画面で効率的な商品探索
操作性の向上: タップ操作での簡単なアクセス
ページ読み込み時間の短縮: 再度検索する必要がない

Shopifyで商品閲覧履歴を表示するデメリット

1. プライバシーの懸念

閲覧履歴機能は顧客の行動データを収集・保存するため、プライバシーに関する懸念が生じる可能性があります：

データ保護規制への対応

GDPRやCCPAなどの個人情報保護法への準拠が必要
クッキーポリシーの適切な設置と同意取得
データの保存期間と削除方針の明確化

顧客の心理的負担

閲覧履歴が他の家族に見られることへの懸念
プライベートな買い物行動の記録への不安
過度なパーソナライゼーションによる不快感

2. 技術的な実装の複雑さ

コード編集の場合

ブラウザ間での互換性の確保
ローカルストレージの容量制限への対応
データの整合性とエラーハンドリング
メンテナンスとアップデートの継続的な作業

パフォーマンスへの影響

追加のJavaScript処理によるページ速度への影響
大量の閲覧履歴データの管理
モバイルデバイスでの処理能力の制約

3. デザインとUXの課題

画面レイアウトの問題

閲覧履歴表示エリアによる他のコンテンツの圧迫
モバイル画面での表示領域の確保
ブランドデザインとの調和

情報の過多

古い閲覧履歴による混乱
在庫切れ商品の表示による顧客満足度の低下
過度な商品提案による選択疲れ

4. ビジネス上のリスク

顧客期待との乖離

閲覧履歴に基づいた在庫管理の困難さ
価格変動による顧客の混乱
セール期間終了後の価格差による不満

競合への情報漏洩

顧客の興味関心データの適切な管理
第三者への情報提供に関する透明性
データセキュリティの確保

Shopifyで商品閲覧履歴を実装する2つの方法

Shopifyストアに商品閲覧履歴機能を実装する方法を、それぞれの特徴と適用場面を含めて詳しく比較していきます。

方法1：テーマのコード編集による実装

概要
ShopifyのテーマファイルにJavaScript、CSS、Liquidコードを追加して、ブラウザのローカルストレージを活用した閲覧履歴機能を自作する方法です。

メリット

完全無料: 追加コストが一切かからない
完全なカスタマイズ性: デザインや機能を100%自由に設計可能
軽量な実装: 必要最小限のコードで効率的な動作が可能
外部依存なし: サードパーティサービスへの依存がない
データ制御: 閲覧履歴データの完全な制御が可能

デメリット

技術的知識が必要: HTML、CSS、JavaScript、Liquidの知識が必須
実装時間: 設計から実装、テストまで数日から数週間かかる
メンテナンス負担: バグ修正やアップデートを自己管理
テーマ更新リスク: テーマ更新時にコードが上書きされる可能性
ブラウザ制限: ローカルストレージの容量や仕様による制約

こんな方におすすめ

プログラミングスキルがある、または開発者を雇える
完全にオリジナルな機能とデザインが必要
長期的なコスト削減を重視
データの完全な制御を求める

方法2：Shopifyアプリを利用した実装

概要
Shopifyアプリストアから商品閲覧履歴機能を提供するアプリをインストールして実装する方法です。

メリット

簡単導入: 数分でインストールと設定が完了
ノーコード設定: 管理画面から直感的に設定可能
定期アップデート: 新機能や改善が自動的に適用
サポート体制: 問題発生時にサポートを受けられる
即座に利用開始: 設定後すぐに動作開始
テーマ互換性: 多くのテーマで動作確認済み

デメリット

月額費用: 通常$2〜$10程度の継続費用
カスタマイズ制限: アプリの機能範囲内での設定に限定
アプリ依存: アプリの不具合やサービス終了のリスク
パフォーマンス: アプリによってはページ速度に影響
データ制限: アプリの仕様による機能制限

こんな方におすすめ

プログラミング知識がない、または時間を節約したい
すぐに閲覧履歴機能を導入したい
基本的な機能で十分
サポートを受けながら安心して運用したい

実装方法の選択フローチャート

以下の質問に答えることで、最適な実装方法を選択できます：

技術的スキルはありますか？
- はい → コード編集を検討
- いいえ → アプリ利用を推奨
予算に余裕はありますか？
- 月額$5程度なら問題ない → アプリ利用も選択肢
- できるだけ無料で → コード編集を検討
導入を急いでいますか？
- 今すぐ必要 → アプリ利用を推奨
- 時間に余裕がある → どちらでも可
特殊な機能が必要ですか？
- 基本機能で十分 → アプリ利用で対応可能
- 独自の機能が必要 → コード編集を推奨

テーマのコード編集で実装する場合

ここでは、実際にコードを編集して商品閲覧履歴機能を実装する方法を、ステップバイステップで解説します。

実装前の準備

1. テーマのバックアップ
必ず現在のテーマを複製してバックアップを作成してください。

管理画面 → オンラインストア → テーマ
現在のテーマの「アクション」→「複製」をクリック

2. 開発環境の準備

Shopifyテーマエディタ、またはVSCodeなどのコードエディタ
Chrome DevToolsなどのデバッグツール

3. 実装場所の決定
閲覧履歴を表示したいページと位置を決定します（ホームページ、商品ページ、など）

基本的な閲覧履歴機能のサンプルコード

以下は、基本的な商品閲覧履歴機能の実装例です。

Step 1: 閲覧履歴の記録（JavaScript）
assets/theme.jsまたは新規ファイルassets/viewed-products.jsに追加：

// 商品閲覧履歴の管理
class ViewedProducts {
  constructor() {
    this.storageKey = 'shopify_viewed_products';
    this.maxItems = 12; // 最大保存件数
    this.init();
  }

  init() {
    // 商品ページでのみ実行
    if (this.isProductPage()) {
      this.addCurrentProduct();
    }
  }

  isProductPage() {
    return window.location.pathname.includes('/products/') && 
           typeof window.ShopifyAnalytics !== 'undefined' && 
           window.ShopifyAnalytics.meta.product;
  }

  addCurrentProduct() {
    const product = this.getCurrentProduct();
    if (product) {
      this.saveProduct(product);
    }
  }

  getCurrentProduct() {
    try {
      // Shopifyの商品メタデータから情報を取得
      const productMeta = window.ShopifyAnalytics.meta.product;
      const productTitle = document.querySelector('.product__title, h1')?.textContent?.trim();
      const productImage = document.querySelector('.product__media img, .product-single__photo img')?.src;
      const productPrice = document.querySelector('.price, .product__price')?.textContent?.trim();

      return {
        id: productMeta.id,
        handle: productMeta.handle,
        title: productTitle || productMeta.title,
        price: productPrice || '',
        image: productImage || '',
        url: window.location.pathname,
        timestamp: Date.now()
      };
    } catch (error) {
      console.error('Error getting current product:', error);
      return null;
    }
  }

  saveProduct(product) {
    let viewedProducts = this.getViewedProducts();
    
    // 同じ商品が既に存在する場合は削除（最新を先頭に移動）
    viewedProducts = viewedProducts.filter(item => item.id !== product.id);
    
    // 新しい商品を先頭に追加
    viewedProducts.unshift(product);
    
    // 最大件数を超える場合は古いものを削除
    if (viewedProducts.length > this.maxItems) {
      viewedProducts = viewedProducts.slice(0, this.maxItems);
    }
    
    // ローカルストレージに保存
    try {
      localStorage.setItem(this.storageKey, JSON.stringify(viewedProducts));
    } catch (error) {
      console.error('Error saving to localStorage:', error);
    }
  }

  getViewedProducts() {
    try {
      const stored = localStorage.getItem(this.storageKey);
      return stored ? JSON.parse(stored) : [];
    } catch (error) {
      console.error('Error reading from localStorage:', error);
      return [];
    }
  }

  removeProduct(productId) {
    let viewedProducts = this.getViewedProducts();
    viewedProducts = viewedProducts.filter(item => item.id !== productId);
    localStorage.setItem(this.storageKey, JSON.stringify(viewedProducts));
  }

  clearAll() {
    localStorage.removeItem(this.storageKey);
  }
}

// 初期化
document.addEventListener('DOMContentLoaded', function() {
  window.viewedProducts = new ViewedProducts();
});

Step 2: 閲覧履歴の表示（HTML + Liquid）
表示したいページ（例：sections/recently-viewed.liquid）に追加：

<div id="recently-viewed-products" class="recently-viewed" style="display: none;">
  <div class="recently-viewed__container">
    <h3 class="recently-viewed__title">最近見た商品</h3>
    <div class="recently-viewed__grid" id="recently-viewed-grid">
      <!-- 商品が動的に挿入される -->
    </div>
    <button class="recently-viewed__clear" id="clear-viewed-products" style="display: none;">
      履歴をクリア
    </button>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const container = document.getElementById('recently-viewed-products');
  const grid = document.getElementById('recently-viewed-grid');
  const clearButton = document.getElementById('clear-viewed-products');
  
  function displayViewedProducts() {
    if (!window.viewedProducts) return;
    
    const products = window.viewedProducts.getViewedProducts();
    
    // 現在の商品ページの商品は除外
    const currentProductId = window.ShopifyAnalytics?.meta?.product?.id;
    const filteredProducts = products.filter(product => 
      product.id !== currentProductId
    );
    
    if (filteredProducts.length === 0) {
      container.style.display = 'none';
      return;
    }
    
    grid.innerHTML = '';
    
    filteredProducts.slice(0, 8).forEach(product => {
      const productElement = createProductElement(product);
      grid.appendChild(productElement);
    });
    
    container.style.display = 'block';
    clearButton.style.display = 'inline-block';
  }
  
  function createProductElement(product) {
    const productDiv = document.createElement('div');
    productDiv.className = 'recently-viewed__item';
    
    productDiv.innerHTML = `
      <a href="${product.url}" class="recently-viewed__link">
        <div class="recently-viewed__image-wrapper">
          <img src="${product.image}" alt="${product.title}" class="recently-viewed__image" loading="lazy">
        </div>
        <h4 class="recently-viewed__product-title">${product.title}</h4>
        <p class="recently-viewed__product-price">${product.price}</p>
      </a>
      <button class="recently-viewed__remove" onclick="removeViewedProduct('${product.id}')" aria-label="削除">
        ×
      </button>
    `;
    
    return productDiv;
  }
  
  function removeViewedProduct(productId) {
    if (window.viewedProducts) {
      window.viewedProducts.removeProduct(productId);
      displayViewedProducts();
    }
  }
  
  // クリアボタンのイベント
  clearButton.addEventListener('click', function() {
    if (confirm('閲覧履歴をすべて削除しますか？')) {
      window.viewedProducts.clearAll();
      container.style.display = 'none';
    }
  });
  
  // 初期表示
  setTimeout(displayViewedProducts, 500);
  
  // グローバル関数として定義（HTML内のonclickから呼び出すため）
  window.removeViewedProduct = removeViewedProduct;
});
</script>

Step 3: CSSスタイリング
assets/theme.cssまたは新規ファイルに追加：

/* 閲覧履歴のスタイル */
.recently-viewed {
  margin: 40px 0;
  padding: 0 20px;
}

.recently-viewed__container {
  max-width: 1200px;
  margin: 0 auto;
}

.recently-viewed__title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}

.recently-viewed__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.recently-viewed__item {
  position: relative;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.recently-viewed__item:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.recently-viewed__link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 15px;
}

.recently-viewed__image-wrapper {
  width: 100%;
  padding-bottom: 100%; /* 1:1 アスペクト比 */
  position: relative;
  overflow: hidden;
  background: #f9f9f9;
  margin-bottom: 10px;
}

.recently-viewed__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.recently-viewed__item:hover .recently-viewed__image {
  transform: scale(1.05);
}

.recently-viewed__product-title {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 8px;
  line-height: 1.4;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recently-viewed__product-price {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: #000;
}

.recently-viewed__remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.recently-viewed__item:hover .recently-viewed__remove {
  opacity: 1;
}

.recently-viewed__remove:hover {
  background: rgba(0, 0, 0, 0.9);
}

.recently-viewed__clear {
  display: block;
  margin: 20px auto 0;
  padding: 10px 20px;
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  transition: background-color 0.3s ease;
}

.recently-viewed__clear:hover {
  background: #e0e0e0;
}

/* モバイル対応 */
@media screen and (max-width: 749px) {
  .recently-viewed {
    margin: 30px 0;
    padding: 0 15px;
  }
  
  .recently-viewed__title {
    font-size: 20px;
    margin-bottom: 15px;
  }
  
  .recently-viewed__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .recently-viewed__link {
    padding: 10px;
  }
  
  .recently-viewed__product-title {
    font-size: 12px;
  }
  
  .recently-viewed__product-price {
    font-size: 14px;
  }
}

/* 非常に小さい画面用 */
@media screen and (max-width: 374px) {
  .recently-viewed__grid {
    grid-template-columns: 1fr;
  }
}

Step 4: テーマへの組み込み
表示したいページのテンプレートファイルに、以下のコードを追加：

<!-- ホームページに表示する場合 -->
{% comment %} templates/index.liquid または sections/の適切なファイル {% endcomment %}
{% render 'recently-viewed' %}

カスタマイズのポイント

1. 表示件数の調整

// ViewedProductsクラス内
this.maxItems = 20; // 保存する最大件数
// 表示時
filteredProducts.slice(0, 6).forEach(product => { // 表示する件数

2. 表示する商品情報の追加

// 在庫状況や商品タグなどの追加情報
return {
  id: productMeta.id,
  handle: productMeta.handle,
  title: productTitle,
  price: productPrice,
  image: productImage,
  url: window.location.pathname,
  timestamp: Date.now(),
  availability: this.getProductAvailability(), // 在庫状況
  tags: productMeta.tags // 商品タグ
};

3. 表示条件の設定

// 特定のページでのみ表示
function shouldDisplayViewedProducts() {
  const currentPath = window.location.pathname;
  const allowedPaths = ['/', '/collections/', '/pages/'];
  return allowedPaths.some(path => currentPath.startsWith(path));
}

よくあるトラブルと対処法

1. ローカルストレージが使用できない

function isLocalStorageAvailable() {
  try {
    localStorage.setItem('test', 'test');
    localStorage.removeItem('test');
    return true;
  } catch (error) {
    return false;
  }
}

2. 商品情報の取得エラー

getCurrentProduct() {
  try {
    // フォールバック方法を複数用意
    const productMeta = window.ShopifyAnalytics?.meta?.product;
    if (!productMeta) {
      return this.getProductFromDOM();
    }
    // ... 既存のコード
  } catch (error) {
    console.warn('Failed to get product info:', error);
    return null;
  }
}

3. パフォーマンスの最適化

// 初期化の遅延実行
document.addEventListener('DOMContentLoaded', function() {
  setTimeout(() => {
    window.viewedProducts = new ViewedProducts();
  }, 1000);
});

// 画像の遅延読み込み
<img src="${product.image}" alt="${product.title}" loading="lazy">

アプリを利用して実装する場合

アプリを使用した実装は、技術的な知識がなくても簡単に商品閲覧履歴機能を導入できる方法です。ここでは、アプリ選びのポイントと実装の流れを解説します。

アプリを選ぶ際の重要なチェックポイント

1. 機能性の確認

表示する商品情報の種類（画像、価格、在庫状況など）
表示件数の設定可能範囲
表示位置の選択肢（ホーム、商品ページ、カートページなど）
フィルタリング機能（在庫切れ商品の非表示など）
モバイル対応とレスポンシブデザイン

2. カスタマイズ性

デザインの自由度（色、サイズ、レイアウト）
CSSの追加編集が可能か
文言のカスタマイズ（多言語対応）
アニメーション効果のオプション

3. パフォーマンス

ページ速度への影響（レビューやテスト結果を確認）
軽量なコードで実装されているか
遅延読み込みなどの最適化機能
Core Web Vitalsへの影響

4. 互換性

使用中のテーマとの互換性
Online Store 2.0対応
他のアプリとの競合情報
多通貨・多言語対応

5. サポート体制

日本語サポートの有無
レスポンスタイムとサポート品質
ドキュメントの充実度
アップデート頻度と新機能追加

6. 価格とコストパフォーマンス

月額料金と提供機能のバランス
無料プランや無料トライアルの有無
追加料金や従量課金の有無
長期利用時のコスト計算

アプリ導入の一般的な流れ

Step 1: アプリの検索と選定

Shopifyアプリストアで「viewed products」「recently viewed」「閲覧履歴」などで検索
レビュー評価と件数を確認
機能一覧と価格を比較
デモストアで実際の動作を確認

Step 2: インストール前の準備

現在のテーマのバックアップ
他のアプリとの競合可能性を確認
必要な権限を理解
表示位置と設定内容の計画

Step 3: インストールと初期設定

「アプリを追加」ボタンをクリック
必要な権限を承認
初期設定ウィザードに従って基本設定
テーマへのアプリブロック追加

Step 4: カスタマイズ

デザイン設定（色、サイズ、レイアウト）
表示条件の設定（ページ、商品数）
文言やラベルの設定
モバイル用の調整

Step 5: テストと最適化

各デバイスでの表示確認
閲覧履歴の記録と表示テスト
ページ速度の測定
必要に応じて調整

アプリ利用時の注意点

1. アプリの依存リスク

定期的にアプリの更新状況を確認
代替アプリの候補を把握
重要な設定のバックアップ
アプリ開発会社の信頼性を評価

2. コストの管理

月額料金の累積を計算
利用状況に応じたプラン変更
不要になったアプリの削除
ROIの定期的な評価

3. パフォーマンスの監視

Google PageSpeed Insightsでの定期測定
Core Web Vitalsへの影響確認
必要に応じて軽量なアプリへの切り替え
ページ読み込み時間の追跡

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

ここでは「シンプル商品閲覧履歴アプリ｜お手軽最近見た商品」の詳細なインストール手順を、画像を交えながら初心者の方でも迷わずに設定できるよう丁寧に説明していきます。

Step 1: Shopifyアプリストアでの検索とアクセス

Shopify管理画面にログイン
左側メニューの「アプリ」をクリック
「Shopify App Storeにアクセス」をクリック
検索窓に「シンプル商品閲覧履歴」と入力
検索結果から「シンプル商品閲覧履歴アプリ｜お手軽最近見た商品」を選択

あるいは、こちらのリンクから直接アクセスすることも可能です。

Step 2: アプリ詳細の確認とインストール

アプリページで機能と価格を確認
- 月額$2.89（7日間の無料トライアル）
- 日本語対応
- Dawn対応
「インストール」ボタンをクリック
必要な権限の確認画面が表示されます
- ストアフロントへのアクセス（商品情報の取得のため）
- テーマの編集（アプリブロック追加のため）
「インストール」ボタンをクリックして承認

Step 3: 初期設定とテーマへの追加

インストールが完了すると、自動的にアプリの管理画面に移動します。

自動追加による設定

閲覧履歴登録機能の有効化
- アプリ管理画面で使用するテーマを選択
- 「閲覧履歴登録機能」の「テーマに追加」をクリック
- テーマエディタが開き、自動で機能が有効化される
- 「保存」をクリック
閲覧履歴表示機能の追加
- 「閲覧履歴表示機能」の「テーマに追加」をクリック
- ホームページにアプリブロックが自動追加される
- 「保存」をクリック

手動追加による設定

自動追加がうまくいかない場合の手順：

閲覧履歴登録機能の手動有効化
- アプリ管理画面から「テーマをプレビュー」をクリック
- テーマエディタの「埋め込みアプリ」アイコンをクリック
- 「シンプル商品閲覧履歴アプリ」を有効化
- 「保存」をクリック
閲覧履歴表示機能の手動追加
- 表示したいページのテーマエディタを開く
- 「セクションを追加」または「ブロックを追加」をクリック
- 「アプリ」タブから「シンプル商品閲覧履歴アプリ」を選択
- アプリブロックが追加される
- 「保存」をクリック

Step 4: 動作確認

閲覧履歴の記録テスト
- ストアの商品ページを複数閲覧
- 各商品ページで閲覧履歴が記録されることを確認
表示確認
- ホームページや設定したページで閲覧履歴が表示されることを確認
- PC、スマホ両方での表示を確認

インストール時のトラブルシューティング

問題1: アプリブロックが表示されない

解決策: テーマを最新バージョンに更新
Online Store 2.0対応テーマか確認
ブラウザのキャッシュをクリア

問題2: 閲覧履歴が記録されない

解決策: 閲覧履歴登録機能が有効化されているか確認
プライベートブラウジングモードでないか確認
JavaScript有効か確認

問題3: 設定が保存されない

解決策: ブラウザを再読み込み
別のブラウザで試す
アプリを一度無効化してから再有効化

アプリの使用方法とカスタマイズ

インストールが完了したら、実際にアプリを設定してカスタマイズしていきましょう。「シンプル商品閲覧履歴アプリ｜お手軽最近見た商品」の詳細な設定方法を解説します。

基本的な使用方法

1. アプリブロックの選択

テーマエディタでカスタマイズしたいページ（通常はホームページ）を開き、サイドバーから「シンプル商品閲覧履歴アプリ｜お手軽最近見た商品」のブロックを選択します。

2. 設定パネルの確認

アプリブロックを選択すると、右側に設定パネルが表示されます。以下のような設定項目が利用できます。

詳細な設定項目

1. 全体設定

最大表示数: 閲覧履歴として表示する商品の最大数を1〜12個の範囲で設定できます。推奨は6〜8個です。
画像比: 商品画像のアスペクト比を以下から選択：
- 画像に合わせる（オリジナルの比率を維持）
- 正方形（1:1）
- ポートレート（3:4）
画像の枠線を表示する: 商品画像の周りに枠線を表示するかどうかのオン/オフ

2. レイアウト設定

PCでの列数: デスクトップ表示時のカラム数を2列、3列、4列から選択
スマホでの列数: モバイル表示時のカラム数を1列、2列から選択

商品数とページレイアウトに応じて最適な列数を選択しましょう：

商品数が多い場合: PCで4列、スマホで2列
商品数が少ない場合: PCで3列、スマホで2列
シンプルなデザインを求める場合: PCで3列、スマホで1列

3. 余白設定

上部の余白: ブロック上部の余白をピクセル単位で調整
下部の余白: ブロック下部の余白をピクセル単位で調整

4. 見出し設定

見出しの文言: デフォルトの「最近閲覧した商品」から任意のテキストに変更可能
- 例: 「あなたが見た商品」「チェックした商品」「最近見た商品」
見出しのフォントサイズ（スマホ）: モバイル表示時のフォントサイズ
見出しのフォントサイズ（PC）: デスクトップ表示時のフォントサイズ
見出しの文字色: カラーピッカーで自由に設定
見出し下部の余白: 見出しと商品リストの間隔を調整

5. 商品情報の表示設定

商品タイトルの文字色: 商品名の文字色をカスタマイズ
商品タイトルのフォントサイズ（スマホ）: モバイルでの商品名フォントサイズ
商品タイトルのフォントサイズ（PC）: デスクトップでの商品名フォントサイズ
商品価格の文字色: 価格表示の文字色
商品価格のフォントサイズ（スマホ）: モバイルでの価格フォントサイズ
商品価格のフォントサイズ（PC）: デスクトップでの価格フォントサイズ

6. 追加のCSS

より細かなカスタマイズが必要な場合は、CSSコードを直接入力できます

カスタマイズのベストプラクティス

1. ブランドに合わせた色設定

ストアのブランドカラーに合わせて統一感のあるデザインにしましょう：

2. 表示件数の最適化

ページのレイアウトと顧客の行動パターンに応じて表示件数を調整：

ホームページ: 6〜8個（多すぎると他のコンテンツが埋もれる）
商品ページ: 4〜6個（関連商品との重複を避ける）
カートページ: 4個程度（追加購入を促進）

3. モバイル最適化

モバイルユーザーが70%以上を占める現在、モバイル表示を重視した設定を：

スマホでは2列表示を推奨（1列だと縦に長くなりすぎる）
フォントサイズは読みやすさを重視
タップしやすいサイズの商品画像

商品閲覧履歴の効果的な活用法

商品閲覧履歴機能を単に設置するだけでなく、戦略的に活用することで、その効果を最大化できます。実践的な活用法とベストプラクティスを紹介します。

コンバージョン率を最大化する戦略

1. 表示位置の戦略的配置

ホームページ: 再訪問ユーザーの関心を即座に惹きつける
商品ページ: 比較検討を促進し、関連購入を誘発
カートページ: 追加購入やアップセルの機会を創出
404エラーページ: 離脱を防ぎ、他の商品への誘導

2. メッセージの最適化

閲覧履歴の見出しを顧客の心理に響くものに変更：

基本: 「最近見た商品」
改善例: 
- 「あなたが気になった商品」
- 「もう一度チェック」
- 「検討中の商品はこちら」
- 「まだ迷っていませんか？」

基本的な質問

Q1: 商品閲覧履歴は本当に売上向上に効果があるのですか？

A: はい、確実に効果があります。統計データによると：

平均してコンバージョン率が5-15%向上
回遊率が20-30%増加
特にリピート顧客で効果が高い
ただし、適切な実装と表示位置が重要

Q2: プライバシーの問題はありませんか？

A: 適切に実装すれば問題ありません。注意点：

データはブラウザのローカルストレージに保存
サーバーに個人情報は送信されない
ユーザーが履歴をクリアできる機能の提供
プライバシーポリシーでの明記が推奨

Q3: モバイルでも正常に動作しますか？

A: はい、モバイルでも問題なく動作します：

レスポンシブデザインでモバイル最適化
タッチ操作に対応
ページ速度への影響も最小限
ただし、表示件数の調整が重要

技術的な質問

Q4: 他のアプリと競合することはありますか？

A: 可能性はありますが、対処法があります：

同種の機能を持つアプリとの重複確認
CSSセレクタの競合回避
JavaScript イベントの重複防止
必要に応じてアプリの優先順位を調整

Q5: 閲覧履歴が保存されない場合の原因は？

A: 以下を確認してください：

ブラウザでJavaScriptが有効になっているか
プライベートブラウジングモードでないか
ローカルストレージが利用可能か
アプリの閲覧履歴登録機能が有効か

Q6: 表示件数を増やすとページが重くなりますか？

A: 適切な実装であれば大きな影響はありません：

推奨表示件数は6-8個
12個までなら大きな影響なし
画像の遅延読み込みを活用
必要に応じてキャッシュ機能を実装

運用に関する質問

Q7: どのページに表示するのが最も効果的ですか？

A: 以下の優先順位で設置することを推奨：

ホームページ（最も効果的）
商品詳細ページ
カートページ
コレクションページ
ただし、ストアの特性や顧客行動に応じて調整が必要

Q8: 閲覧履歴をリセットする頻度は？

A: 推奨リセット頻度：

自動削除：30-60日
手動削除：常時利用可能
セッション削除：ブラウザ終了時（オプション）
季節商品：シーズン終了時

Q9: 在庫切れ商品も表示すべきですか？

A: ケースバイケースです：

表示する場合

再入荷通知の登録促進
類似商品への誘導
顧客の関心維持

表示しない場合

購入機会の最大化
顧客満足度の向上
在庫回転率の向上

トラブルシューティング

Q10: 一部の商品だけ閲覧履歴に表示されません

A: 以下を確認してください：

商品ページのURL構造が統一されているか
商品メタデータが正しく設定されているか
画像URLが有効かどうか
商品の公開状況（下書き状態でないか）

Q11: デザインが崩れて表示されます

A: 解決方法：

ブラウザのキャッシュをクリア
テーマとの CSS 競合を確認
アプリのバージョンを最新に更新
他のアプリとの相互作用を確認

Q12: ページの読み込みが遅くなりました

A: 最適化方法：

表示件数を減らす（6個程度に）
画像サイズを最適化
遅延読み込みを有効にする
不要なCSS・JavaScriptを削除

まとめ

Shopifyストアに商品閲覧履歴機能を実装することは、顧客体験の向上と売上増加に直結する重要な施策です。本記事では、実装方法から活用法まで幅広く解説してきました。

重要なポイントの振り返り

1. 実装方法の選択

コード編集：完全なカスタマイズが可能だが技術力が必要
アプリ利用：簡単で安定しているが月額費用が発生
スキルと予算、求める機能に応じた選択が重要

2. 成功のための要素

適切な表示位置と件数の設定
ブランドに調和したデザイン
モバイルファーストの設計思想
継続的な効果測定と改善

3. 避けるべき失敗

古すぎる閲覧履歴の表示
プライバシーへの配慮不足
過度な画面占有
パフォーマンスへの悪影響

最後に

商品閲覧履歴機能は、現代のECサイトにとって必須の機能となっています。適切に設計・実装された閲覧履歴機能は、顧客の利便性を向上させるだけでなく、売上の増加にも確実に貢献します。

特に「シンプル商品閲覧履歴アプリ｜お手軽最近見た商品」は、月額$2.89という手頃な価格で必要十分な機能を提供しており、初めての方にも自信を持っておすすめできます。7日間の無料トライアルを活用して、まずは効果を実感してみてください。

シンプル商品閲覧履歴アプリ｜お手軽最近見た商品

ECサイトの競争が激化する中、顧客体験の向上は差別化の重要な要素です。商品閲覧履歴機能の導入により、より良いショッピング体験を提供し、ビジネスの成長を実現していきましょう。

本記事が、あなたのShopifyストアの成功に少しでも貢献できれば幸いです。ご質問やご不明な点がございましたら、お気軽にお問い合わせください。

商品閲覧履歴で、顧客に寄り添うショッピング体験を実現し、ストアの成長を加速させましょう！

参考記事

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

ブログTOP お問い合わせ

【2025年】Shopifyで商品の閲覧履歴を表示するには？おすすめアプリも紹介！

目次

はじめに

Shopifyで商品の閲覧履歴を表示できる？

商品閲覧履歴とは？その効果

閲覧履歴機能の基本的な仕組み

閲覧履歴がもたらす主な効果

Shopifyで商品閲覧履歴を表示するメリット

1. 売上の直接的な向上

2. ユーザビリティの大幅な改善

3. パーソナライゼーションの基盤

4. カート放棄率の削減

5. モバイルユーザー体験の向上

Shopifyで商品閲覧履歴を表示するデメリット

1. プライバシーの懸念

2. 技術的な実装の複雑さ

3. デザインとUXの課題

4. ビジネス上のリスク

Shopifyで商品閲覧履歴を実装する2つの方法

方法1：テーマのコード編集による実装

方法2：Shopifyアプリを利用した実装

実装方法の選択フローチャート

テーマのコード編集で実装する場合

実装前の準備

基本的な閲覧履歴機能のサンプルコード

カスタマイズのポイント

よくあるトラブルと対処法

アプリを利用して実装する場合

アプリを選ぶ際の重要なチェックポイント

アプリ導入の一般的な流れ

アプリ利用時の注意点

おすすめアプリ「シンプル商品閲覧履歴アプリ｜お手軽最近見た商品」

アプリの基本情報

主要な特徴と機能

このアプリが選ばれる理由

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

Step 1: Shopifyアプリストアでの検索とアクセス

Step 2: アプリ詳細の確認とインストール

Step 3: 初期設定とテーマへの追加

Step 4: 動作確認

インストール時のトラブルシューティング

アプリの使用方法とカスタマイズ

基本的な使用方法

詳細な設定項目

カスタマイズのベストプラクティス

商品閲覧履歴の効果的な活用法

コンバージョン率を最大化する戦略

基本的な質問

技術的な質問

運用に関する質問

トラブルシューティング

まとめ

重要なポイントの振り返り

最後に

参考記事