カテゴリページのデザイン

カテゴリページは、すべての商品カテゴリの中心的なハブとして機能します。顧客はカテゴリをクリックして、その中に含まれる商品を表示できます。この文書では、カテゴリページをShopper Appのデザインエディタを使用してカスタマイズする方法について説明します。

カテゴリページのスタイル

Shopper App は、カテゴリページのための3つの表示スタイルを提供します：

• グラフィックとテキスト
• プレーンテキスト
• 3層のグラフィックとテキスト

カテゴリページを設定する前に、ストアのデザインやビジネスニーズに最も合ったスタイルを選択してください。詳細については、カテゴリページの設定セクションを参照してください。

カテゴリページの設定

SHOPLINEの管理画面から、アプリ>Shopper App>アプリデザインに移動し、デザインエディタにアクセスするためにデザインボタンをクリックします。上部のドロップダウンメニューからカテゴリページを選択します。

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

トップナビゲーションモジュールでは、商品カテゴリページのヘッダーに表示されるコンポーネントをカスタマイズできます。このモジュールには、左上アイコン、中央、右上アイコンの3つの設定可能なセクションが含まれています。各セクションは、ナビゲーションを強化し、ユーザーエンゲージメントを向上させるように設計されています。

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

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

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

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

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

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

• • アイコン： + アイコンを追加をクリックして、最大3つの事前定義されたオプションを挿入します。
  • 画像：必要に応じてブランディングまたはプロモーション画像をアップロードします。
  • 検索バー：顧客がサイトを便利にブラウズできるように事前定義された検索バーを追加します。
  • ページタイトル：商品カテゴリページのタイトルを表示します。

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

お知らせバナーの設定

お知らせバナーはページの上部に配置されており、削除や順序変更はできません。お知らせバナーを設定するには、コンテンツソースセクションで好みのコンテンツソースオプションを選択します：

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

検索バーの有効化または無効化

検索バーセクションでは、お知らせバナーの下に検索バーを表示するかどうかを選択できます。これにより、顧客は商品を迅速かつ簡単に見つけることができます。

検索バーは再配置できませんが、目 アイコンをクリックすることで非表示にすることができます。

ページネーションコンポーネントの設定

このページネーションパーツはお知らせバナーの下にあり、削除や順序の変更はできません。ウェブサイトのカテゴリページに異なるタブを設定するには、以下の手順に従ってください：

1. デフォルトでは、ページネーションパーツは無効になっています。ページネーションパーツをクリックして有効にします。
2. 各セクションをクリックしてタブの名前を編集します。最大10個のタブを追加するには、ページネーションパーツを追加をクリックします。
3. デザインしたいページを選択し、必要に応じてそれぞれのカテゴリページ設定を構成します。右側のプレビューパネルは、タブを動的に切り替え、適用された効果をリアルタイムで表示します。

カテゴリページの設定

Shopper Appは管理画面からカテゴリを取得します。カテゴリがShopper Appと同期されるようにするには、管理画面で各希望するカテゴリに対してShopper App - モバイルアプリビルダーチャネルを有効にする必要があります。

1. 左側のメニューでカテゴリページをクリックして、カテゴリのレイアウトを設定します。
   
2. カテゴリページのレイアウトスタイルを選択します：画像-テキスト、テキストのみ、三層画像-テキスト。画像-テキストまたは三層画像-テキストを選択した場合は、好みの画像のアスペクト比を選択する必要があります。
   
3. 必要に応じてカテゴリ設定を構成します：
   
   • カテゴリを追加： カテゴリ追加をクリックし、アプリに表示したいカテゴリを選択して適用をクリックします。
     
   • カテゴリを編集： カテゴリの隣にある下向き三角形のアイコンをクリックして設定を展開します。Shopper Appは自動的に管理画面からカテゴリの名前とカバー画像を同期しますが、カスタムカバー画像をアップロードしたり、カテゴリ名を編集したり、カテゴリの有効化時間をスケジュールしたりできます。さらに、このメインカテゴリの下にサブカテゴリを追加し、それらの詳細をカスタマイズできます。
     
   • カテゴリを並べ替え： カテゴリを垂直にドラッグ＆ドロップして、カテゴリの順序を再配置します。階層内でカテゴリを上位または下位に移動するには、左右にドラッグ＆ドロップします。
     
   • カテゴリを削除：カテゴリにカーソルを合わせて、ゴミ箱アイコンをクリックして削除します。

浮遊アイコンの設定

浮遊アイコン機能を使用すると、ユーザーがスクロールしても常に表示されるショートカットを追加できます。アイコンをライブチャットまたは指定されたイベントページにリンクさせることで、顧客サポートの効率を向上させ、キャンペーンのエンゲージメントを促進できます。設定するには、以下の手順に従ってください：

1. 左側のメニューで浮遊アイコンをクリックします。次に、カテゴリページでアイコンを設定する方法を選択します：

• • ホームページの浮遊アイコンから同期：すべての設定はホームページの設定に従い、変更できません。
  • 独立して設定： ホームページのものとは異なるカテゴリページに浮遊アイコンを設定します。設定手順については、ステップ2に進んでください。

2. 独立して設定を選択した場合は、浮遊アイコンを追加をクリックし、アイコンのための以下のオプションを設定します：

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

3. 保存をクリックして設定を保存し、後で変更できるようにするか、適用をクリックして設定を即座に適用します。
   

デザインの公開

編集が完了し、プレビューで全てが正しく表示されていることを確認したら、右上の適用ボタンをクリックしてデザインをアプリに公開します。公開を保留したい場合は、保存をクリックして編集内容を保持できます。