カートページのデザイン

よく設計されたカートページは、コンバージョン率の向上に役立ちます。

設定へのアクセス経路

SHOPLINE管理画面から、アプリ > Shopper App > App Design に進み、デザインボタンをクリックしてデザインエディターにアクセスします。上部のドロップダウンメニューからカートを選択してください。

設定手順

カートページエディターでは、表示したいコンテンツを選択できますが、パーツの追加や順序の並べ替えはできません。

• お知らせボードの設定：お知らせボードパーツはカートページの上部に表示されます。お知らせボードの内容は、アプリのトップページお知らせボードと同期するか、独立して設定することができます。アプリのトップページお知らせボードと同期するを選択した場合、お知らせボードのテキストや色などは編集できません。独立して設定するを選択した場合は、お知らせボードのテキストや色の編集、公開時間の設定、個別のお知らせボード内容の非表示設定が可能です。
  
  
   

• 商品レコメンドの設定：商品レコメンドモジュールの表示・非表示を設定でき、表示スタイルも設定可能です。
  

  注意：ストアには商品レコメンドアプリがインストールされており、商品詳細レコメンドが有効になっている必要があります。これにより、商品レコメンドの表示・非表示機能が利用可能となります。ストアに「商品レコメンド」プラグインがインストールされていないか、プラグインで商品詳細レコメンドが有効になっていない場合、商品レコメンドモジュールはグレーアウトされ、表示できません。以下の案内に従って対応してください。

• カスタムパーツの設定：Shopper App管理画面でカスタムパーツを作成し、ストアアプリのカートページに埋め込むことで、デザインや機能を強化できます。＋パーツを追加をクリックし、カスタムブロックセクションから目的のパーツを選択します。あるいは、＋カスタムブロックを作成をクリックしてパーツエディターを開き、新規作成も可能です。カスタムパーツの作成詳細については、こちらのヘルプセンター記事をご参照ください。
  
  
  開発中と表示されているパーツは未公開であり、ライブ版のアプリに直接適用できません。ただし、Snaplookを使ってプレビュー可能です。内容を確認後、コードエディターからパーツを公開し、ライブアプリに適用できます。詳細はデザインの保存と公開セクションをご覧ください。
  
   

• フローティングアイコンの設定：ユーザーがスクロールしても表示され続けるショッピングバッグページにフローティングアイコンを追加します。このアイコンは、ライブチャットサービスまたはイベントページにリンクさせることができ、顧客サポートの効率化やキャンペーンのエンゲージメント向上に役立ちます。

  設定オプションは2つあります：トップページのフローティングアイコンと同期を選択すると、アイコンはトップページの設定を継承し、変更できません。独立して設定を選択すると、ショッピングバッグページ専用のフローティングアイコンを別途設定でき、以下の設定が可能です。
  

  • 基本設定：アイコンの名前を付け、位置を選択し、アプリに表示するアイコン画像をアップロードします。
  • 機能タイプ：アイコンがリンクする先をイベントページまたはライブチャット機能から選択します：
    • イベントページを選択した場合：リダイレクト先のページを設定します。
    • ライブチャットを選択した場合：
      • 使用するチャットサービスを選択します。Shopper Appは現在、リアルタイムの顧客サポートのためのAI搭載ソリューションであるShulexとの連携をサポートしています。詳細はこちらのガイドをご参照ください。
      • 未読メッセージ通知を有効にするかどうかを決定します。有効にすると、未読メッセージがある場合に赤い点が表示されてユーザーに通知します。
  • 有効化時間：フローティングアイコンを公開するスケジュールを任意で設定できます。

   

• フローティングチェックアウトバーの設定：フローティングチェックアウトバーは、特定のセクションを画面に固定し、ユーザーが閲覧中いつでもチェックアウトに進めるようにします。これによりユーザー体験が向上し、コンバージョン率の向上に役立ちます。デフォルトでは、システムは割引コードフィールドの追加とチェックアウトボタンの2つのオプションを提供します。また、＋コンテンツを追加をクリックして、フローティングチェックアウトバーとして使用するカスタムパーツを挿入することもできます。詳細な手順については、カスタムパーツの設定セクションをご参照ください。
  
   

デザインの保存と公開

編集を完了し、プレビューが期待通りに表示されていることを確認したら、右上のオプションを使って次の操作を行えます：

• 保存： 編集中のすべての変更はリアルタイムで自動的に保存されます。手動での保存は不要です。
• Snaplookに公開： 最新の保存済み変更をSnaplookに公開し、プレビューとテストを行います。このオプションを使って、公開前に機能と表示を確認してください。詳細は「Snaplookを使ったブランドアプリのプレビュー」の記事を参照してください。
• 本番アプリに公開： 変更をストアのライブ版ブランドアプリに公開し、エンドユーザーに表示されるようにします。