「Recently Viewed Items」で Shopify サイトにユーザーの閲覧履歴を表示する

こんにちは、 Gaji-Labo 石垣です。

Gaji-Labo では、Shopify Theme Kit による Shopify テーマ構築を行っています。

今回の記事では、Shopify サイト上にユーザーがこれまで閲覧した商品の履歴を表示できるアプリ「Recently Viewed Items」の概要と、カスタマイズ方法についてご紹介したいと思います。

Recently Viewed Items の概要

「Recently Viewed Items」は、サイト上にユーザーがこれまで閲覧した商品の履歴を表示できるアプリです。

TOP、商品詳細ページ、商品一覧ページ、カートページに閲覧履歴の商品リストを表示することができ、それぞれどのページに表示させるかを設定することが可能です。

大まかな概要は以下の通りです。

料金

• $1/月、または月額$0.50をまとめて年に1回$6請求、追加料金なし
• 7日間の無料体験期間あり

機能

• TOP, 商品詳細ページ, 商品一覧ページ, カートへの最近チェックした商品の表示
• 商品名、画像、在庫切れの表示
• カートへの追加機能
• セクションのタイトルやその他の選択したテキストの設定
• 表示位置、色などの設定（デフォルトはフッターの直前に表示されます）

サンプルストアで表示の確認をすることができます。

導入は他のShopify アプリ同様、アプリページの「アプリを追加する」ボタンから行います。

導入後、管理画面のアプリ一覧から設定画面を表示できます。

設定項目は以下の通りです。

• Recently Viewed Items
  • 表示/非表示の切り替え
• Display Settings
  • セクションをどのページに表示するかの設定など
• Slider Settings
  • スライダーの動作設定
• Other Settings
  • Buy Now ボタンの表示/非表示の切り替えなど
• Color Settings
  • セクションの色の設定
• Button Animation Settings
  • カートに入れるボタンのスタイルの設定

テーマファイルからカスタマイズする

アプリを導入すると、以下のファイルがテーマファイル内に作成されます。

• snippets/recently-home-slider.liquid
• snippets/recently-product-slider.liquid
• snippets/recently-collection-slider.liquid
• snippets/recently-cart-slider.liquid
• assets/recentlyview.css

これらのファイルがテーマファイル内で呼び出され、サイト上に表示されています。

HTMLは snippets/recently-*-slider.liquid、 CSS は assets/recentlyview.css に全て記述されているため、これらを編集することで、要素の追加・削除やスタイルの変更といったアプリページから行えることの範囲を超えたカスタマイズをすることが可能になります。

まとめ

今回は、Shopify サイト上にユーザーがこれまで閲覧した商品の履歴を表示できるアプリ「Recently Viewed Items」の概要と、カスタマイズ方法についてご紹介しました。

Shopify のテーマ構築に携わっている方の参考にしていただけたらと思います。

Shopifyでのサイト構築やテーマ開発に興味がある方、実践でのポイントを吸収したいと思っている方などにおすすめの内容です。