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

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

カスタムページの作成

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

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

   

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

   

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

   

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

デザインの作成

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

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

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

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

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

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

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

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

   

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

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

4. 変更内容は自動的に保存されます。右上のSnaplookに公開をクリックして、最新の変更をプレビューおよびテストするか、本番アプリに公開をクリックしてライブのブランドアプリに公開します。

お知らせバナー

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

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

ページコンテンツ

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

フローティングアイコン

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

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

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

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

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

デザインの保存と公開

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

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

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

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