ナビゲーションバー | Shopper App

4. EC + SC (EN).png

12. ブランド会員購物 App.png

ボトムナビゲーションバーは、アプリのトップページの下部に表示され、顧客がトップページ、カート、お気に入り登録などの主要なページに迅速にアクセスできるようにします。コンテンツ、アイコン、色をカスタマイズできます。

 

ステップ 1. アプリページエディタに移動

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

Screenshot 2025-09-02 at 1.37.54 PM.png

 

ステップ 2. パーツエディタに入る

左側のパーツパネルで、下部のボトムナビゲーションをクリックします。
EN_1.png
 

 

ステップ 3. テキストを表示するかどうかを設定

この機能はデフォルトで有効になっています。オフにするにはクリックします。トグルがオフのとき、ボトムナビゲーションにはアイコンのみが表示されます。

Screenshot 2025-11-04 at 12.47.57 PM.png

 

ステップ 4. デフォルトタブを設定

10個のデフォルトタブは「ホーム」、「ストア」、「カテゴリ」、「メンバーカード」、「カート」、「メッセージ」、「メンバーセンター」、「すべての商品」、「お気に入り登録」、「プロモーション」、および「トップランキング」です。

「ホーム」、「カテゴリ」、「メッセージ」、「メンバーセンター」タブはデフォルトでオンになっています。

*Note: 2025年10月31日以前にShopper Appページエディタに入った場合、「メンバーセンター」タブは「アカウント」タブとして表示されます。必要に応じて名前を変更できます。

Screenshot 2025-11-04 at 12.49.15 PM.png

 

次のアクションを実行できます:

  • 右側のcloseeye.pngおよびopeneye.pngボタンをクリックして表示または非表示にします。3〜5タブをオンにできます。
  • 右側のScreenshot 2024-10-24 at 12.36.02 PM.pngボタンをクリックしてテキストとアイコン画像を設定します。デフォルトのアイコン画像またはカスタムアイコン画像を使用することを選択できます。カスタム画像を使用する場合は、通常の状態と選択された状態の両方をアップロードしてください。推奨サイズは60*60 pxで、PNG / JPG / JPEG形式をサポートしています。
  • 左側のScreenshot 2024-10-24 at 4.13.30 PM.pngボタンをクリックして順序を調整します。

*Note: 「すべての商品」、「お気に入り登録」、およびカスタム」はプラットフォームバージョン1.12の一部です; 「プロモーション」はプラットフォームバージョン1.13の一部です。[Shopper App管理] > [アプリ公開設定]に移動して現在のバージョンを確認してください。

これらのタブをオンにする前に、アプリを更新し、最新バージョンの高いユーザー採用を確認することをお勧めします。これらのタブをオンにしても、顧客が最新バージョンに更新していない場合、これらのタブをクリックするとトップページにリダイレクトされます。

Screenshot 2025-03-24 at 4.57.49 PM.png

 

ステップ 5. カスタムタブを設定(オプション)

デフォルトタブに加えて、+ カスタムをクリックしてカスタムテキスト、アイコン画像、およびジャンプリンクを持つ新しいタブを作成できます。

*Note: ジャンプリンクは「http://」または「https://」でフォーマットされたURLのみをサポートします。

Screenshot 2024-11-05 at 3.38.08 PM.png

Screenshot 2024-11-05 at 3.38.58 PM.png

 

ステップ 6. 色を設定

左側のテーマ設定アイコンをクリックし、を選択します。

Screenshot 2024-11-05 at 3.33.41 PM.png

 

「ボトムナビゲーション」セクションで背景/フォントの色を設定します。カラーパレットを使用するか、色コードを直接入力できます。

Screenshot 2024-11-05 at 3.36.07 PM.png

 

さらに読む

 

 

この記事はAIを使用して翻訳されており、不正確な情報が含まれている可能性があります。最も正確な情報については、元の英語版を参照してください。

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

コメント