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

コレクションページは、すべての商品のコレクションの中心的なハブとして機能します。顧客はコレクションをクリックして、その中に含まれる商品を見ることができます。本記事では、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. カテゴリページの表示スタイルを選択します:

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

   画像とテキストまたは三階層画像とテキストを選択した場合は、画像のアスペクト比（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；最大サイズ：1 MB）。
     • リダイレクト先：画像をタップしたときにユーザーが移動する先を設定します（カテゴリ、カスタムページ、またはウェブページ）。
     • 並べ替え：カテゴリ内の商品をどのように並べ替えるか選択します（例：おすすめ）。
     • 有効化時間（任意）：画像と関連するエントリーが表示される時間をスケジュールします。

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

   • ＋ サブグループ名 をクリックして二次グループを作成します。サポートされている設定はメイングループと同じです。
   • ＋ 葉エントリ をクリックして葉エントリを作成します。葉エントリはグループの直下またはサブグループ内に直接追加できます。各葉エントリについて、表示名、リダイレクト先、エントリ画像、および有効化時間の制御を設定できます。

   

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

設定が完了すると、変更内容は自動的に保存されます。変更をアプリで利用可能にする準備ができたら、公開をクリックしてください。

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

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

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

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

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

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

3. 設定が完了すると、変更内容は自動的に保存されます。変更をアプリで利用可能にする準備ができたら、公開をクリックしてください。

デザインの保存と公開

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

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