Shopper Appのブランドキットを使ったブランドカスタマイズ方法

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

このガイドに従って、ブランドキットエディターへのアクセス方法と各設定のステップバイステップの構成方法を学んでください。

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

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

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

   

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

   

3. 変更内容は自動的に保存されます。右上の角にあるSnaplookに公開をクリックして最新の変更をプレビューおよびテストするか、本番アプリに公開をクリックしてライブのストアアプリに公開します。

   注：Snaplookを使ったストアアプリのプレビューについての詳細は、「Snaplookを使ったストアアプリのプレビュー」の記事をご参照ください。

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

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

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

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

ロゴ設定のカスタマイズ

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

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

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

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

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

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

カスタムアイコンの追加

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

各カスタムアイコンについて、以下の操作が可能です：

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