ボトムナビゲーションバーは、アプリのトップページの下部に表示され、顧客がトップページ、カート、お気に入り登録などの主要なページに迅速にアクセスできるようにします。コンテンツ、アイコン、色をカスタマイズできます。
ステップ 1. アプリページエディタに移動
SHOPLINE管理画面に移動 > [Shopper App管理] > [アプリデザイン] > [トップページデザイン] > [現在のテンプレート]。セットアップをクリックしてアプリページエディタに入ります。
ステップ 2. パーツエディタに入る
左側のパーツパネルで、下部のボトムナビゲーションをクリックします。
ステップ 3. テキストを表示するかどうかを設定
この機能はデフォルトで有効になっています。オフにするにはクリックします。トグルがオフのとき、ボトムナビゲーションにはアイコンのみが表示されます。
ステップ 4. デフォルトタブを設定
10個のデフォルトタブは「ホーム」、「ストア」、「カテゴリ」、「メンバーカード」、「カート」、「メッセージ」、「メンバーセンター」、「すべての商品」、「お気に入り登録」、「プロモーション」、および「トップランキング」です。
「ホーム」、「カテゴリ」、「メッセージ」、「メンバーセンター」タブはデフォルトでオンになっています。
*Note: 2025年10月31日以前にShopper Appページエディタに入った場合、「メンバーセンター」タブは「アカウント」タブとして表示されます。必要に応じて名前を変更できます。
次のアクションを実行できます:
- 右側の
および
ボタンをクリックして表示または非表示にします。3〜5タブをオンにできます。
- 右側の
ボタンをクリックしてテキストとアイコン画像を設定します。デフォルトのアイコン画像またはカスタムアイコン画像を使用することを選択できます。カスタム画像を使用する場合は、通常の状態と選択された状態の両方をアップロードしてください。推奨サイズは60*60 pxで、PNG / JPG / JPEG形式をサポートしています。
- 左側の
ボタンをクリックして順序を調整します。
*Note: 「すべての商品」、「お気に入り登録」、およびカスタム」はプラットフォームバージョン1.12の一部です; 「プロモーション」はプラットフォームバージョン1.13の一部です。[Shopper App管理] > [アプリ公開設定]に移動して現在のバージョンを確認してください。
これらのタブをオンにする前に、アプリを更新し、最新バージョンの高いユーザー採用を確認することをお勧めします。これらのタブをオンにしても、顧客が最新バージョンに更新していない場合、これらのタブをクリックするとトップページにリダイレクトされます。
ステップ 5. カスタムタブを設定(オプション)
デフォルトタブに加えて、+ カスタムをクリックしてカスタムテキスト、アイコン画像、およびジャンプリンクを持つ新しいタブを作成できます。
*Note: ジャンプリンクは「http://」または「https://」でフォーマットされたURLのみをサポートします。
ステップ 6. 色を設定
左側のテーマ設定アイコンをクリックし、色を選択します。
「ボトムナビゲーション」セクションで背景/フォントの色を設定します。カラーパレットを使用するか、色コードを直接入力できます。
さらに読む
この記事はAIを使用して翻訳されており、不正確な情報が含まれている可能性があります。最も正確な情報については、元の英語版を参照してください。

コメント