サイドバーナビゲーション｜Shopper App

サイドバーにプロモーション、商品カテゴリ、ブログ投稿、または他の外部リンクなどの特集リンクを設定することができ、顧客がこれらのページに便利にアクセスできるようになります。

この記事では、以下の内容をカバーします：

• 全体設定
• セクション設定
  • トップセクション
  • ミドルセクション
  • ボトムセクション

1. 全体設定

SHOPLINE管理画面に移動し、> [Shopper App管理] > [アプリデザイン] > [トップページデザイン] > [現在のテンプレート]を選択します。セットアップをクリックしてアプリページエディタに入ります。

*注意：この設定は、シンプルテンプレートとモールテンプレートの両方に適用されます。現在使用中のテンプレートを選択することをお勧めします。

左側の要素パネルでサイドバーナビゲーションをクリックして、以下の設定を構成します。

i. サイドバーナビゲーションの表示

左側の要素パネルでボタンをクリックして、サイドバーナビゲーションを開閉します。

顧客は左上隅のボタンをクリックして開くことができます。

*注意：サイドバーナビゲーションはトップナビゲーションの左側に固定されており、ボタンの色は[テーマ設定] > [色] > [トップナビゲーション]で設定したフォントの色に一致します。

ii. ボトムナビゲーションの色設定を適用

このオプションを有効にすると、ボトムナビゲーションの背景色とテキスト色がサイドバーナビゲーションに適用されます。無効にすると、サイドバーはデフォルトで白い背景に黒いテキストになります。

*注意：あなたのShopper Appプラットフォームのバージョンが1.13未満の場合、サイドバーのテキスト色は[テーマ設定] > [色] > [トップナビゲーション]で設定したフォントの色に一致します。明るい色に設定した場合、システムはアプリ側で適切に表示されるようにフォントを自動的に黒に調整します。

iii. タイトルテキストの配置

ミドルおよびボトムセクションのタイトルテキストの配置を設定します。左揃えまたは中央揃えを選択できます。

iv. リリーススケジュール（オプション）

リリース時間を設定した場合、サイドバーナビゲーションはアプリに表示されるようにスケジュールされます。

2. セクション設定

i. トップセクション

トップセクションにはロゴ、登録/ログインボタン、システム/カスタムタブが表示され、最大4つのタブをサポートしています。

*注意：

• 登録/ログインボタンの色は、[テーマ設定] > [色] > [ボタン]で設定した色に一致します。
• 顧客がすでにログインしている場合、登録/ログインボタンは非表示になります。

A. システムデフォルトタブ

サポートされている12のタブは「クーポン」、「最新イベント」、「マイオーダー」、「履歴」、「すべての商品」、「クーポンセンター」、「お気に入り登録」、「カート」、「メッセージ」、「カスタマーサービス」、「ストア情報」、「プロモーション」、および「トップランキング」です。最初の4つのタブはデフォルトで有効になっており、以下のアクションを実行できます：

• 右側のとボタンをクリックして、表示または非表示にします。
• 右側のボタンをクリックして、テキストとアイコン画像を設定します。
• 左側のボタンをクリックして、順序を調整します。

*注意：

• 「最新のイベント」タブを選択した場合、プロモーションとリワードを設定する必要があります。システムは、プロモーション期間内にストアで作成された最新のキャンペーンを自動的に表示します。また、特定のキャンペーンを手動で選択することもできます。
  
   
• 「クーポン」タブを選択した場合、メンバーのアカウントにクーポンを表示機能を有効にする必要があります。
• 「クーポンセンター」タブを選択した場合、クーポンセンターにクーポンを追加する必要があります。
• 「ストア情報」タブを選択した場合、ストア情報設定にストアの詳細を追加する必要があります。

B. カスタムタブ

+ カスタムをクリックして、カスタムタブを追加します。

テキスト、アイコン画像、ジャンプリンクをカスタマイズできます。

ii. 中央セクション

中央セクションは上部セクションの下に表示され、「テキスト」と「画像とテキスト」の2つのスタイルをサポートしています。

*注意：「カテゴリ」グループは「テキスト」スタイルのみをサポートしています。

A. システムデフォルトグループ

「カテゴリ」グループはデフォルトで表示され、システムはオンラインストアで設定した商品カテゴリに自動的にアクセスします。以下の操作を行うことができます：

• 右側のとボタンをクリックして、表示または非表示にします。
• 右側のボタンをクリックして、グループ名を入力します。
• 左側のボタンをクリックして、順序を調整します。

B. カスタムグループ

+ カスタムグループをクリックして、カスタムグループを追加します。サポートされている14のリンク先は「すべての商品」、「カテゴリ」、「選択したカテゴリ」、「クーポンセンター」、「マイオーダー」、「メッセージ」、「カスタマーサービス」、「プロモーション」、「ストア情報」、「お気に入り登録」、「カート」、「最近見た」、「カスタムURL」、「プロモーション」、および「トップランキング」です。

*注意：最大5つのグループを設定できます。

グループ名とジャンプリンクをカスタマイズできます。

+ コンテンツを追加をクリックして、コンテンツ名とジャンプリンクを設定します。

*注意：最大8つのコンテンツを設定できます。

iii. 下部セクション

下部セクションは中央セクションの下に表示され、メンバーシップおよびアプリ設定に関連する情報を提供します。このセクションは非表示または削除することはできません。

A. メンバーシップ

「メンバーシップカード」、「メンバープロフィール」、「メンバー特典」、「紹介リワード」の4種類のコンテンツをサポートしています。以下の操作を行うことができます：

• 右側のとボタンをクリックして、表示または非表示にします。
• 右側のボタンをクリックして、グループ名を入力し、コンテンツを表示または非表示にします。
• 左側のボタンをクリックして、順序を調整します。

*注意：

• メンバー特典を設定していない場合、メンバー特典オプションは表示されません。
• 「リファラルリワード」オプションを選択した場合、アプリメンバーリファラルキャンペーンを追加する必要があります。

B. 概要

「利用規約」、「プライバシーポリシー」、「現在のバージョン」の3種類のコンテンツをサポートしています。以下の操作を行うことができます：

• 右側のとボタンをクリックして、表示または非表示にします。
• 右側のボタンをクリックして、グループ名を入力し、コンテンツを表示または非表示にします。
• 左側のボタンをクリックして、順序を調整します。

C. 設定

「私の住所」、「言語」、「プッシュ設定」の3種類のコンテンツをサポートしています。以下の操作を行うことができます：

• 右側のとボタンをクリックして、表示または非表示にします。
• 右側のボタンをクリックして、グループ名を入力し、コンテンツを表示または非表示にします。
• 左側のボタンをクリックして、順序を調整します。

設定が完了したら、右上の保存をクリックします。内容が正しいことを確認したら、更新して使用をクリックして公開します。