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:
-
From your SHOPLINE admin panel, go to Channels > Shopper App > App Design and click Design.
-
In the design editor, click the palette icon (Brand kit) in the left sidebar.
-
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.
|
Note: If Dark mode is enabled, ensure you configure the color schemes for both Light mode and Dark mode. |
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.
|
Notes:
|
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.
| Note: Custom icon images must be single-color .svg files with a 1:1 aspect ratio, under 50 KB in size. |