ショッピングバッグページのデザイン

よくデザインされたショッピングバッグページは、コンバージョン率の向上に役立ちます。

設定へのアクセス経路

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

設定手順

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

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

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

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

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

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

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

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

   

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

デザインの保存と公開

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

• 保存：現在の編集内容を一時的に保存し、今後の更新に備えます。これはストアアプリのライブ版には影響しません。
• 公開 > Snaplookに公開：パーツをSnaplookに公開してプレビューとテストを行います。ライブにする前に機能や見た目を確認するためにこのオプションを使用してください。詳細は関連するヘルプセンターの記事をご参照ください。
• 公開 > ライブアプリに公開：変更内容をストアアプリのライブ版に公開し、エンドユーザーに表示されるようにします。