Brand Kitを使ったShopper Appのブランディングのカスタマイズ

Shopper Appのブランドキットモジュールは、デザインエディタ内でカラーパレット、ロゴ、アイコンの3つの設定を提供し、上部と下部のナビゲーションバーの外観をカスタマイズするのに役立ちます。 一貫したカラースキームを定義し、ストアのロゴをアップロードおよび管理し、アイコンの名前や画像をブランドに合わせて調整できます。 これらの設定により、モバイルショッピング体験全体で一貫した認識可能なブランドアイデンティティを構築しやすくなります。

このガイドに従って、ブランドキットエディタにアクセスし、各設定をステップバイステップで構成する方法を学びましょう。

ブランドキットエディタへのアクセス

ブランドキットエディタにアクセスするには：

1. SHOPLINEの管理画面から、チャネル> Shopper App > アプリデザインに移動し、デザインをクリックします。

   

2. デザインエディタで、左のサイドバーにあるパレットアイコン（ブランドキット）をクリックします。

   

3. 変更を加えた後、保存をクリックして一時的に保存するか、公開をクリックして即座に有効にします。

   

ブランドキットモジュールには、カラーパレット、ロゴ、アイコンの3つの設定が含まれています。 各設定は、以下のセクションで詳細に説明します。

カラーパレットのカスタマイズ

ブランドキットのカラーパレットセクション内で、以下のパーツをカスタマイズできます：

• 下部ナビゲーション：下部ナビゲーションバーのテキストとアイコンの色を設定し、選択されたアイコンの色も含めます。
• バッジ：ショッピングバッグとお気に入り登録アイコンのアイテム数量バッジの色を設定します。
• ボタン：ボタンの背景色とテキスト色をカスタマイズし、アウトラインボタンの境界線とテキストの色も含めます。
• アイコンボタン：お気に入り登録ハートアイコンとレビュー星アイコンの色を調整します。
• 割引関連要素：割引ラベルの背景色とテキスト色、割引価格のテキスト色、クーポンの背景色を設定します。

ロゴ設定のカスタマイズ

ロゴセクションでは、アプリ全体で一貫したブランディングを維持するために、ストアのロゴをアップロードできます。 デバイスからロゴ画像を直接アップロードし、ホームページの上部ナビゲーションバーにロゴが追加されたときにデフォルトオプションとして適用されます。

アイコン設定のカスタマイズ

ブランドキットのアイコンセクションでは、アプリ全体で使用されるアイコンを管理できます。 SHOPLINEのデフォルトアイコンの設定を調整するか、ブランドスタイルに合わせてカスタムアイコンをアップロードできます。

デフォルトアイコンの調整

設定したいデフォルトアイコンをクリックすると、利用可能なオプションが展開されます。 各デフォルトアイコンについて、以下のことができます：

• アイコン名を変更する（顧客に表示されるテキスト）。
• システムのデフォルト画像を保持するか、カスタム画像に切り替えます。 カスタム画像を使用する場合は、2つのバージョンをアップロードできます：
  • アイコン - デフォルト：通常の状態のアイコン。
  • アイコン - 選択済み（オプション）：アイコンが選択またはアクティブなときに表示される代替画像。たとえば、顧客がナビゲーションバーでタップしたときなど。

カスタムアイコンの追加

+ カスタムアイコンを追加をクリックして、自分のアイコンをアップロードし、詳細をカスタマイズできます。

各カスタムアイコンについて、以下のことができます：

• アイコンに名前を付ける（顧客に表示されるテキスト）。
• 指定されたカスタムページまたはウェブサイトにリンクします。
• 定義済みのオプションからアイコンを選択するか、カスタム画像をアップロードします。 カスタム画像を使用する場合は、2つのバージョンをアップロードできます：
  • アイコン - デフォルト：通常の状態のアイコン。
  • アイコン - 選択済み（オプション）：アイコンが選択またはアクティブなときに表示される代替画像。たとえば、顧客がナビゲーションバーでタップしたときなど。