Customizing Your Shopper App Branding with Brand Kit

Shopper App's Brand kit module in the design editor provides three settings—Color palette, Logo, and Icon—that help you customize the appearance of your top and bottom navigation bars. You can define consistent color schemes, upload and manage your store logos, and adjust icon names and images to align with your brand. These settings make it easier to build a cohesive and recognizable brand identity across your mobile shopping experience.

Follow this guide to learn how to access the Brand kit editor and configure each setting step by step.

Accessing the Brand Kit Editor

To access the Brand kit editor:

1. From your SHOPLINE admin panel, go to Channels > Shopper App > App Design and click Design.

   

2. In the design editor, click the palette icon (Brand kit) in the left sidebar.

   

3. After making your changes, click Save to temporarily save them or Publish to make them effective immediately.

   

The Brand Kit module includes three settings: Color palette, Logo, and Icon. Each setting will be described in detail in the sections below.

Customizing the Color Palette

Within the Color palette section of the Brand kit, you can customize the following components:

• Bottom navigation: Configure the text and icon colors for the bottom navigation bar, including the colors for selected icons.
• Badges: Set the colors for item quantity badges on the shopping bag and wishlist icons.
• Buttons: Customize the background and text colors of buttons, including the border and text colors for outline buttons.
• Icon buttons: Adjust the colors of the wishlist heart icon and the review star icon.
• Discount-related elements: Set the background and text colors for discount labels, the text color for discounted prices, and the background color for coupons.

Customizing the Logo Settings

In the Logo section, you can upload your store logos to maintain consistent branding across your app. Upload logo images directly from your device, and they will be applied as the default option when the logo is added to the top navigation bar of your home page.

Customizing the Icon Settings

The Icon section of Brand Kit allows you to manage the icons used throughout your app. You can adjust the settings of SHOPLINE’s default icons or upload custom icons to better align with your brand style.

Adjusting Default Icons

Click any default icon you want to configure to expand the available options. For each default icon, you can:

• Change the icon name (the text displayed to customers).
• Keep the system’s default image or switch to a custom image. If using a custom image, you can upload two versions:
  • Icon - default: The icon in its normal state.
  • Icon - selected (optional): An alternate image that appears when the icon is selected or active, such as when a customer taps it in the navigation bar.

Adding Custom Icons

You can click + Add custom icon to upload your own icons and customize their details. 

For each custom icon, you can:

• Assign a name to the icon (the text displayed to customers).
• Link it to a designated custom page or website.
• Choose an icon from the predefined options or upload a custom image. If using a custom image, you can upload two versions:
  • Icon - default: The icon in its normal state.
  • Icon - selected (optional): An alternate image that appears when the icon is selected or active, such as when a customer taps it in the navigation bar.