Shopifyストアで最近身た商品を表示できる閲覧履歴アプリについて徹底解説｜ご利用ガイド
シンプル商品閲覧履歴アプリ｜お手軽最近見た商品 ご利用ガイド
はじめに
今回の記事は、Shopify アプリである「シンプル商品閲覧履歴アプリ｜お手軽最近見た商品」の解説記事です。
Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームを拡張する機能のようなものです。WordPress のプラグインのようなもの、とご認識頂いて大丈夫です。
「シンプル商品閲覧履歴アプリ｜お手軽最近見た商品」は、ストアに最近見た商品を自動表示し、リピート購入や回遊を促進するアプリです。
アプリを利用することで、あらゆるページに閲覧履歴を設置し、訪問者の回遊性を高め、離脱防止やリピート購入を促進することができます。また、表示件数やレイアウトをノーコードで簡単に設定できるため、専門知識がない方でもスムーズに導入が可能です。
ご興味のある方は、以下の URL からインストールしてみてください。
「シンプル商品閲覧履歴アプリ｜お手軽最近見た商品」でできること
Shopify アプリである「シンプル商品閲覧履歴アプリ｜お手軽最近見た商品」は、以下のように店舗内のあらゆるページに最近見た商品を表示できるアプリです。
主な特徴は次のとおりです。
-
コード不要・簡単設置
インストールしてテーマに追加するだけで、すぐにストアに閲覧履歴を表示できます。 -
柔軟なカスタマイズ
表示件数やレイアウトを簡単に調整でき、ストアのデザインに合わせてカスタマイズ可能です。 -
どこにでも表示可能
商品ページ・トップページなど、必要な場所に設置できます。
これらを活用することで、訪問者の興味を維持し、再訪問や追加購入につなげることができます。
ストアのあらゆるページに商品の閲覧履歴を表示できる
トップページや商品ページなど、必要な箇所に最近見た商品を表示して、訪問者の回遊性を高めましょう。
見た目をノーコードでカスタマイズできる
表示件数、レイアウト、余白などをノーコードで設定できます。HTML や CSS の知識がなくても、カンタンにデザインを整えられます。
1 クリックでテーマに追加できる
アプリをインストール後、1 クリックでストアへの商品閲覧履歴アプリブロックを追加できます。難しいコードの編集作業は一切必要ありません。
シンプル商品閲覧履歴アプリのインストール
それでは、実際にアプリをインストールしていきましょう。
アプリの料金は、月額$2.89（1 週間の無料期間あり）となっております。
ストア管理画面左下の「設定」をクリックします。
「アプリと販売チャネル」をクリックし、「Shopify App Store」に移動してください。
検索窓に「シンプル商品閲覧履歴アプリ｜お手軽最近見た商品」と入力し、表示されたアプリをクリックします。
アプリの詳細画面から「インストール」ボタンをクリックしてストアにインストールします。こちらのアプリは月額$2.89 でご利用いただけます（1 週間の無料期間あり）。
「インストールボタン」をクリックすると、必要な権限が表示されますので確認して「インストール」を完了してください。
以下のアプリ管理画面が表示されます。
以上で、アプリのインストールは完了です。
シンプル商品閲覧履歴アプリのアプリブロックをテーマに追加
「シンプル商品閲覧履歴アプリ｜お手軽最近見た商品」を実際にテーマに組み込み、最近見た商品をストア上に表示できるように設定していきましょう。
当アプリでは、閲覧履歴登録機能を有効化した上で、閲覧履歴表示機能を追加する必要があります。
それぞれ設定していきましょう。
閲覧履歴登録機能を有効化する
まず、閲覧履歴登録機能を有効化していきましょう。
自動でアプリをテーマに追加
アプリの管理画面を開いてください。
『テーマに最近見た商品を追加」の「テーマを選択」でアプリブロックを追加したいテーマを選択してください。
「閲覧履歴登録機能」セクション内の「テーマに追加」ボタンをクリックします。
テーマ編集画面が開き、アプリが有効化されます。
「保存する」をクリックして、有効化は完了です。
以上で、テーマに自動的に閲覧履歴登録機能を追加できました。
手動でアプリをテーマに追加
自動追加がうまくいかない場合は以下の手順で行ってください。
アプリ管理画面を開いて下さい。
「テーマを選択」でアプリを手動追加したいテーマを選択し、「閲覧履歴登録機能」セクション内の「テーマをプレビュー」ボタンをクリックします。
テーマエディタが開くので、サイドバーの埋め込みアプリアイコンをクリックします。
すると埋め込みアプリ一覧が表示されるので、「シンプル商品閲覧履歴アプリ｜お手軽最近見た商品」のアプリを有効化します。
アプリを有効化できたら「保存する」ボタンをクリックしてください。
以上で、手動での登録機能の有効化は完了です。
閲覧履歴表示機能を追加する
自動でアプリをテーマに追加
アプリ管理画面より「テーマを選択」でアプリを手動追加したいテーマを選択し、「閲覧履歴表示機能」内の「テーマに追加」ボタンをクリックします。
テーマ編集画面が開き、アプリブロックが自動追加されます。（※追加時点では閲覧履歴がまだ無いためアプリブロックは表示されません）
「保存する」をクリックして、有効化は完了です。
以上で、テーマに自動的に商品閲覧履歴アプリブロックが追加されます。
手動でアプリをテーマに追加
自動追加がうまくいかない場合や、TOP ページ以外にアプリブロックを追加したい場合は以下の手順で行ってください。
アプリ管理画面を開いて下さい。
「テーマを選択」でアプリを手動追加したいテーマを選択し、「閲覧履歴表示機能」内の「テーマをプレビュー」ボタンをクリックします。
テーマエディタが開くので、アプリを追加したい画面に移動します。
サイドバーの「セクションを追加」または「ブロックを追加」をクリックします。
「アプリ」のタブに「シンプル商品閲覧履歴アプリ｜お手軽最近見た商品」アプリブロックが表示されるので、クリックして追加します。
アプリセクションが追加されその中にアプリブロックが追加されました。「保存する」ボタンをクリックしてください。
以上で、手動でのブロック追加は完了です。
シンプル商品閲覧履歴アプリのカスタマイズ
テーマにアプリブロックを追加したら、カスタマイズ画面より見た目のカスタマイズを行えます。
※まだ閲覧履歴がない場合は閲覧履歴セクションが表示されないので、いくつか商品ページを開き閲覧履歴セクションを表示させてから見た目をカスタマイズしてください。
カスタマイズ画面のサイドバーから、「シンプル商品閲覧履歴アプリ｜お手軽最近見た商品」のアプリブロックをクリックします。
下記のような設定項目が表示されます。
全体設定
「最大表示数」では、閲覧履歴として表示する商品の最大数を設定できます。スライダーを動かして 1〜12 個の範囲で調整可能です。
「画像比」では、商品画像のアスペクト比を「画像に合わせる」・「正方形」「ポートレート」から選択できます。ストアのデザインに合わせて最適な比率を選んでください。
「画像の枠線を表示する」をオンにすると、商品画像の周りに枠線が表示されます。
PC での列数
PC 表示時のカラム数を 2 列、3 列、4 列から選択できます。ストアのレイアウトや商品数に応じて最適な列数を設定してください。
スマホでの列数
スマホ表示時のカラム数を 1 列、2 列から選択できます。モバイルユーザーの見やすさを考慮して設定しましょう。
余白設定
「上部の余白」「下部の余白」でブロックの上下の余白をピクセル単位で調整できます。周囲のコンテンツとのバランスを考慮して設定してください。
見出し設定
「見出しの文言」では、デフォルトで「最近閲覧した商品」と表示される見出しテキストを変更できます。
「見出しのフォントサイズ（スマホ）」「見出しのフォントサイズ（PC）」で、それぞれのデバイスでの見出しのサイズをピクセル単位で調整できます。
「見出しの文字色」では、見出しテキストの色を自由に設定できます。ストアのブランドカラーに合わせて調整しましょう。
「見出し下部の余白」で、見出しと商品リストの間の余白を調整できます。
商品タイトル・価格設定
「商品タイトルの文字色」「商品タイトルのフォントサイズ（スマホ）」「商品タイトルのフォントサイズ（PC）」で、商品名の表示をカスタマイズできます。
「商品価格の文字色」「商品価格のフォントサイズ（スマホ）」「商品価格のフォントサイズ（PC）」で、価格表示の見た目を調整できます。
追加の CSS
「追加の CSS」で設定項目以外に CSS を使って見た目をカスタマイズすることができます。直接 CSS のコードを入力して下さい。クラス名などは検証を利用して取得してください。
おわりに
今回は「シンプル商品閲覧履歴アプリ｜お手軽最近見た商品」の解説を行いました。
- あらゆるページに最近見た商品を表示して、訪問者の回遊性を向上
- 表示件数やレイアウトをノーコードで簡単カスタマイズ
- 月額$2.89で利用可能（1 週間の無料期間あり）
閲覧履歴を活用して訪問者の興味を維持し、リピート購入や追加購入の促進にぜひお役立てください。
ここまでお読みいただき、誠にありがとうございました。
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
