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

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

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

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

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

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

カテゴリページの設定

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

お知らせバーの設定

お知らせバー はページの上部に配置され、削除や並べ替えはできません。お知らせバーを構成するには、コンテンツソース セクションで好みのコンテンツソースオプションを選択してください：

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

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

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

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

カテゴリページの設定

Shopper Appは、管理画面からカテゴリを取得します。カテゴリをShopper Appに同期するには、カテゴリにShopper Appチャネルを有効にしてください。

1. 左ペインで、カテゴリページをクリックしてカテゴリページの設定を開始します。
2. タイプを選択セクションで、カテゴリの表示スタイルを選択します。
   • 画像とテキスト：このスタイルを選択すると、オンラインストアのカテゴリと自動的に同期されません。カテゴリを手動で追加する必要があります。各カテゴリの右側にある三角アイコンをクリックして、カバー画像や名前を変更またはアップロードし、下位カテゴリを追加し、リリース時間をスケジュールします。
     
     各カテゴリの右側にある三角アイコンをクリックして、カバー画像や名前を変更またはアップロードし、下位カテゴリを追加し、リリース時間をスケジュールします。
     
   • プレーンテキストおよび3段階の画像とテキスト：これらの2つのスタイルを選択すると、オンラインストアのカテゴリが自動的に同期されます。
     
     各カテゴリの右側にある三角アイコンをクリックして、カテゴリ名を変更し、リリース時間をスケジュールします。カバー画像はオンラインストアから取得されます。
     
     

     ヒント： カテゴリを垂直にドラッグアンドドロップして、カテゴリの順序を調整します。カテゴリを水平にドラッグアンドドロップして、上位または下位レベルに移動します。

デザインの公開

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