カスタムページのデザイン方法

Shopper Appでは、ビジネスのニーズに応じてカスタムページを作成できます。例えば、クリスマスキャンペーン用のページを作成することが可能です。

カスタムページの作成

1. SHOPLINE管理画面から、アプリ > Shopper App > アプリデザイン に移動し、デザイン ボタンをクリックしてデザインエディターにアクセスします。

2. 上部のドロップダウンメニューから カスタムページ を選択します。

   

3. + ページを作成 をクリックします。カスタムページは最大5ページまで作成可能です。

   

4. ページにタイトルを付けて、確認 をクリックします。

   

5. 次のセクションでページのデザイン方法を学びます。

デザインの作成

自動的にカスタムページエディターに移動します。先ほど入力したタイトルでカスタムページを識別してください。

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

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

各セクションで利用可能なパーツ

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

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

1. カスタムページに移動し、トップナビゲーションをクリックしてメニューを展開します。

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

   

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

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

4. 保存または公開をクリックして設定を適用します。

お知らせバナー

お知らせバナーはカスタムページの上部に表示され、配置を変更することはできません。トップページのお知らせボードと同期するか、別々に設定することができます。

• トップページのお知らせバナーから同期： コピーやテキストカラーなど、お知らせボードの変更はできません。
• 独立して設定： コピー、テキストカラー、表示スタイルを編集でき、必要に応じて公開時間をスケジュールできます。お知らせは最大3件まで表示可能です。お知らせは削除できませんが、必要に応じて非表示または編集が可能です。

ページコンテンツ

＋コンポーネントを追加をクリックし、追加したいパーツを選択して設定パネルで構成します。対応するパーツタイプはトップページデザインで使用されるものと一致しています。詳細な設定手順については、「アプリのトップページのデザイン：本文パーツ」の記事セクションをご参照ください。

フローティングアイコン

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

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

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

ページの名前変更または削除

右上のその他をクリックして、ページの名前を変更するか削除します。

デザインの保存と公開

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

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

カスタムページへのリダイレクトをサポートするホームページコンポーネント

トップページの特定のパーツでは、カスタムページへのリダイレクトリンクの設定が可能です。対象のパーツは、カルーセル、カスタマイズ画像バナー、カスタマイズ動画バナー、商品カルーセル、商品ショーケース、商品カテゴリ表示、および下部ナビゲーションです。これらのパーツの設定方法については、詳細な手順が記載されたアプリのトップページのデザインをご参照ください。