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

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に公開してプレビューとテストを行います。ライブ公開前に機能や見た目を確認するためにこのオプションを使用してください。詳細は関連するヘルプセンターの記事をご参照ください。
• 公開 > ライブアプリに公開: 変更内容をストアアプリのライブ版に公開し、エンドユーザーに表示されるようにします。

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

トップページの特定のパーツは、カスタムページへのリダイレクトリンクの設定をサポートしています。対象のパーツは、カルーセル、カスタム画像バナー、カスタム動画バナー、ベントグリッド、商品カルーセル、商品ショーケース、商品カテゴリ表示、およびボトムナビゲーションです。 これらのパーツの設定方法については、アプリのトップページのデザインをご参照ください。