マイアカウントページのデザイン

マイアカウントは顧客の個人ハブであり、ここで個人情報、注文、メンバーシップを確認し、プリファレンス設定を行うことができます。このページに表示されるレイアウトやコンテンツをカスタマイズし、他のページへのリンクを設定することで、顧客が関心を持つ情報やあなたが伝えたい内容を効果的に表示できます。

マイアカウントページエディターへのアクセス

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

＜strong data-end="261" data-start="247"＞マイアカウント＜/strong＞エディターでは、以下のセクションで説明する機能を設定できます。

トップナビゲーションの設定

トップナビゲーションモジュールでは、マイアカウントページのヘッダーに表示されるコンポーネントをカスタマイズできます。このモジュールは、左上アイコン、中央、右上アイコンの3つの設定可能なセクションで構成されており、それぞれがナビゲーションの向上とユーザーエンゲージメントの強化を目的としています。

各セクションで利用可能なコンポーネント

トップナビゲーションパーツの設定

以下の手順でトップナビゲーションモジュールを設定できます：

1. マイアカウントページに移動し、トップナビゲーションをクリックしてメニューを開きます。

2. 設定したいセクションを選択します：左上アイコン、中央、または右上アイコン。

   

3. ドロップダウンのパーツタイプから、追加したいパーツを選択します：

• アイコン：＋をクリックして、最大3つの定義済みオプションを追加します。
• 画像：必要に応じてブランドまたはプロモーション画像をアップロードします。
• 検索バー：定義済みの検索バーを追加し、顧客がサイトを便利に閲覧できるようにします。
• ページタイトル：マイアカウントページのタイトルを表示します。

4. 変更内容は自動的に保存されます。準備ができたら、公開をクリックしてアプリで利用可能にします。

お知らせバナー

お知らせバナーはページの上部に配置され、移動できません。トップページのお知らせバナーと同期するか、別々に設定することができます。

• トップページのお知らせバナーから同期：テキスト、色、その他の設定はトップページで設定されたものを継承し、編集できません。
• 独立して設定：最大3つのお知らせを追加でき、テキスト、色、その他の設定をカスタマイズし、公開時間を設定し、個別のお知らせを非表示にできます。

登録／ログイン

登録／ログインカードのテキストをカスタマイズできます。ただし、位置の変更や非表示はできません。

ページに表示されるコンテンツ

プリセットのパーツを修正したり、カスタムのパーツを追加したりできます。最大で50個のパーツが許可されています。

• プリセットパーツ：以下の表はプリセットパーツと実行可能なアクションを示しています。なお、メンバーおよびメッセージパーツは、対応するアプリがインストールされている場合にのみ機能しますのでご注意ください。

  パーツ	名前変更	アイコンを追加	削除	再配置	非表示
  個人情報	✔	✔	✘	✔	✘
  メンバー	✔	✔	✘	✔	✔
  注文	✔	✔	✘	✔	✘
  設定	✔	✔	✘	✔	✘
  ヘルプ＆情報	✔	✔	✘	✔	✘
  利用規約	✔	✔	✘	✔	✘
  メッセージ	✔	✔	✘	✔	✔

  
  

  注： ヘルプ＆情報 と 利用規約 セクションのカスタマイズ方法を学びましょう。

• カスタムパーツの追加: 追加をクリックして、含めたいパーツを選択します。カスタムアイテムや区切り線を追加できます。カスタムコンテンツは名前の変更、カスタムアイコンの割り当て、削除、位置の変更、非表示が可能です。
  

フローティングアイコン

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

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

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

デザインの保存と公開

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

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