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

ishigaki

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

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

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

Recently Viewed Items の概要

Shopify App Storeの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 のテーマ構築に携わっている方の参考にしていただけたらと思います。

開発のお悩み、フロントエンドから解決しませんか?

あなたのチームのお悩みはなんですか? 「腕の良いエンジニアに重要でない作業まで任せてしまっている」「腕の良いデザイナーに主業務以外も任せてしまっている」「すべての手が足りず細かいことまで手が回らない」などなど… 。

そんなときは、相談相手としてGaji-Laboにお気軽にお声がけください。あなたの開発チームに足りていない役割や領域を適切に捉えてカバーすることで、チーム全体の生産性と品質をアップさせるお手伝いをします。

オンラインでのヒアリングとフルリモートでのプロセス支援に対応していますので、リモートワーク対応可のパートナーをお探しの場合もぜひ弊社にお問い合わせください!

お悩み相談はこちらから!

ishigaki

投稿者 Ishigaki Shotaro

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。