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

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

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

Shopper Appは、カテゴリページに以下の3つの表示スタイルを提供しています：

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

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

カテゴリページへのアクセスと設定

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

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

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

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

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

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

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

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

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

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

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

お知らせバナーの設定

お知らせバナーはページの上部に配置され、削除や並べ替えはできません。お知らせバナーを設定するには、コンテンツソースセクションで希望のコンテンツソースオプションを選択します：

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

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

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

検索バーは位置を変更できませんが、目のアイコンをクリックして非表示にすることができます。

ページネーションパーツの設定

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

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

カテゴリページの設定

Shopper Appは、カテゴリリストのパーツを2種類提供しており、カテゴリページのデザインに使用できます。より包括的で柔軟なカテゴリ管理体験を実現するために、新しいパーツの使用を推奨します。

• カテゴリリスト（旧）：Shopper App バージョン 2.3.0 以前をサポートしています。このパーツは廃止予定です。
• カテゴリリスト（新）：カテゴリグループと階層をより構造的に管理できるように再設計された設定パネルです。

カテゴリページの設定（カテゴリリスト – 旧）

カテゴリリスト（旧）パーツを使ってカテゴリページを設定するには、以下の手順に従ってください。

表示スタイルの設定

1. デザインエディターの左側メニューで、カテゴリリスト（旧）をクリックします。

2. カテゴリページの表示スタイルを選択します：

   • 画像とテキスト：名前と画像の両方を使って、上から下へカテゴリを表示します。
   • テキストのみ：テキストのみのリストでカテゴリを表示します。
   • 3レベル画像とテキスト：カテゴリを最大3レベルまで展開し、顧客が2階層目および3階層目のカテゴリを閲覧できるようにします。

   画像とテキストまたは3レベル画像とテキストを選択した場合は、画像のアスペクト比（2:3、3:4、または1:1）を選択してください。

カテゴリ設定の管理

1. 追加されたカテゴリをクリックして、アプリに表示したいカテゴリを選択し、次に適用をクリックします。

   

2. 設定の下で、カテゴリの横にある展開アイコンをクリックして、その設定を構成します：

   • カテゴリ画像：カスタム画像をアップロードします（オプション）。アップロードしない場合は、管理画面の画像が使用されます。
   • カテゴリ名：アプリに表示される名前を編集します。
   • 有効化時間（オプション）：開始時間と終了時間を設定するか、期限なしを有効にします。
   • 二次カテゴリの追加：メインカテゴリの下にサブカテゴリを追加します。

   

3. カテゴリを縦にドラッグして表示順を変更し、左右にドラッグして階層を調整します。カテゴリを削除するには、カテゴリにカーソルを合わせて削除アイコンをクリックします。

   

設定が完了したら、変更を後で保存するには保存をクリックし、設定をすぐにアプリに適用するには公開をクリックします。

カテゴリページの設定（カテゴリリスト – 新規）

カテゴリリスト（新規）パーツは構造化されたカテゴリグループベースの構成を使用しており、カテゴリページのより洗練された柔軟なデザインを可能にします。カテゴリリスト（新規）パーツでカテゴリページを設定するには、以下の手順に従ってください。

表示スタイルの設定  

1. 左側のメニューで、＋ パーツを追加 をクリックし、カテゴリリスト（新規） を選択します。
2. カテゴリリスト（新規） をクリックして、カテゴリ 管理パネルを開きます。

3. 設定パネルで、スタイル設定 タブを選択します。

   

4. 表示スタイル の下で、カテゴリの表示方法を選択します：

   • タブ付きグリッドスタイル： メインカテゴリをタブとして表示し、サブカテゴリの項目を下のグリッドに表示します。
   • 画像カタログ： 画像とテキストのレイアウトでカテゴリの項目を表示します。

   

5. 選択したスタイルに基づいて追加の表示オプションを設定します：
   • タブ付きグリッドスタイル が選択されている場合、以下のオプションがあります：
     • リーフ項目の表示スタイル： グリッド内でリーフレベルの項目をどのように表示するか選択します（例：1行あたりのアイテム数）。
     • リーフ項目の画像比率： リーフレベルの項目の画像比率を選択します（1:1、2:3、3:4、または元の比率）。
     • グリッドタイトルの配置： 項目タイトルの配置を左揃えまたは中央揃えから選択します。
   • 画像カタログ が選択されている場合、以下のオプションがあります：
     • カテゴリグループのデフォルト画像ソース： カテゴリグループにカスタム画像を使用するか、他の利用可能な画像ソースを使用するか選択します。
     • カテゴリグループの画像比率： カテゴリグループの項目の画像比率を選択します（1:1、2:3、3:4、または元の比率）。
     • リーフ項目の表示スタイル： リーフレベルの項目の表示方法を選択します（例：テキスト付きサムネイル）。
     • リーフ項目の画像比率： リーフレベルの項目の画像比率を選択します。

カテゴリ設定の管理

1. カテゴリリスト（新規）設定パネルで、カテゴリ管理タブに切り替えます。

   

2. カテゴリグループを追加をクリックして、新しいカテゴリグループを作成します。

   

3. カテゴリグループ内で、以下を設定します：

   

   • グループ名：カテゴリグループ名をクリックして、以下のオプションを設定します：
     • カスタムグループ名：このカテゴリグループにアプリで表示される名前を設定します（タブ付きグリッドスタイルと画像カタログスタイルの両方に適用されます）。
     • カテゴリグループ画像： 画像カタログ表示スタイルが選択されている場合のみ利用可能です。カテゴリグループの画像ソースを選択します：
       • 自動取得カテゴリ/商品画像が選択されている場合、対応する商品カテゴリを指定する必要があります。
       • カスタム画像が選択されている場合は、カスタム画像をアップロードします。
     • 有効化時間（オプション）：カテゴリグループが表示される時間を設定します（タブ付きグリッドスタイルと画像カタログスタイルの両方に適用されます）。
   • グループ画像：＋の画像を追加をクリックして、グループに最大3つの画像をアップロードします。アップロード後、画像をクリックして画像編集パネルを開き、以下を設定します：
     • カスタム画像：画像をアップロード、置換、または削除します（対応形式：.png、.jpg、.jpeg、.gif；最大サイズ：1MB）。
     • リダイレクト先：画像をタップしたときにユーザーが移動する先を設定します（カテゴリ、カスタムページ、またはウェブページ）。
     • 並び替え：カテゴリ内の商品をどのように並べるか選択します（例：おすすめ）。
     • 有効化時間（オプション）：画像と関連するエントリーが表示される時間をスケジュールします。

4. 必要に応じてカテゴリ構造を追加および管理します：

   • ＋ サブグループ名 をクリックして、2階層目のグループを作成します。サポートされている設定はメイングループと同じです。
   • ＋ リーフエントリー をクリックしてリーフエントリーを作成します。リーフエントリーはグループの直下またはサブグループ内に直接追加できます。各リーフエントリーについて、表示名、リダイレクト先、エントリー画像、アクティベーション時間の制御を設定できます。

   

5. 必要に応じて、上記の手順を繰り返して追加のカテゴリグループを追加します。

設定が完了したら、保存をクリックして後で変更を保持するか、公開をクリックして設定をすぐにアプリに適用します。

フローティングアイコンの設定

フローティングアイコン機能では、ユーザーがスクロールしても常に表示されるショートカットを追加できます。アイコンはライブチャットまたは指定されたイベントページにリンクでき、顧客サポートの効率化やキャンペーンのエンゲージメント向上に役立ちます。設定手順は以下の通りです：

1. 左側のメニューでフローティングアイコンをクリックします。次に、コレクションページのアイコンの設定方法を選択します：

• トップページのフローティングアイコンと同期：すべての設定はトップページのものに従い、変更できません。
• 独立して設定：トップページとは異なるコレクションページ用のフローティングアイコンを設定します。設定手順はステップ2に進んでください。

2. もし独立して設定を選択した場合は、フローティングアイコンを追加をクリックし、以下のオプションを設定します：

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

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

デザインの公開

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