Brand Kit Overview

Brand Kit allows you to set key elements that define your brand's theme that get used throughout the app. It's really important to take a moment to configure your Brand Kit settings when you first install Tapcart as it will greatly improve the speed at which you can develop your app by ensuring your brand is represented in all of our Design Block templates we provide you. 

Accessing Brand Kit 

1. Open your Tapcart Dashboard
2. Hover over App Studio in the header
3. Select Brand Kit from the drop down

BrandKit consists of 4 key areas

• Colors: controls the color palette used to style design blocks
• Typography: controls the font used throughout the app
• Icons: provides a way to upload custom icons
• Brand Assets:  this controls some of your branded assets customers see when they visit the app

Colors

Colors allow you to set your color palette across the app to ensure experiences look and feel just like your brand. To edit a color, click the color swatch tied to the element you’re looking to update and either find the color using the color wheel, use a recently used color swatch or type in the HEX, RGB, or HSL value.

• Important notes:
  • RGB and HSL values will be converted to HEX format after applying.
  • You can also set the opacity of any color using a slider. By default, this will be set from fully opaque but can be modified to completely transparent. This configuration will be saved in the HEX value assigned to the color. 

As you choose your colors, you can preview changes using the mobile previewer. You can change the page you’d like to preview above the mobile phone. The pages you can preview include Homepage, Account, and Cart.

• Important note: Not every element will be available for viewing on the screen depending on your use case (i.e. you don’t have sales prices or can’t see an error message toast in the previewer). 

Colors are broken down into 4 sections to help drive understanding of where the color change will impact the app. These 4 sections include...

1. Core Colors include the main color components throughout the app like app background, header, dividing lines, and icons.

1. Typography Colors include text components throughout the app like titles, primary & secondary colors, captions, and price.

1. Button Colors include the components of primary and secondary buttons like fill, text, outline, and enabling shadows.

1. State Colors include alert modals (success, error, warning), disable, and loading states. Some of these color choices are harder to see via the previewer in the app and as such we have provided some examples to help show how they are at.

• • Subscriptions
    
    
    
    
  • Success, Error, Warning / Alert message.
    
    
    
    
• Shadows is an additional setting that can be enabled on blocks and/or buttons

Important note: There are areas within the app that cannot be colored like pages: Orders, Reviews, Notifications, Loyalty, and Subscriptions. 

Typography

Typography allows you to select a default font from your app or, if you are on our Enterprise plan, you can also upload a custom font that will be used across any block that’s configured to call the typography. When you upload a custom font, that’s applied to both iOS and Android and no further action is needed on your part to make that happen.

To upload a custom font

1. Select Typography from the left rail
2. Click Upload Font or drag and drop your font file(s) into the upload box
3. Confirm you have the appropriate font license if the font is licensable
4. Confirm or edit the Font Family name, weight, and style so they are correct

Important notes:

• Font files need to be .otf or `.ttf` 
• Default font is San Francisco on iOS and Roboto on Android.
• Custom Font files can have malformed named. We recommend if you are uploading multiple font wieghts within a similar family that all the font family names match. That will make using them in the experience much easier.

Icons

Every merchant has access to over 200+ icons tailored for eCommerce merchants. If your are on our Enterprise plan you can also upload your own custom icons to more closely match your brand styling. 

To upload a custom icons

1. Select Icons from the left rail
2. Click Upload Icon or drag and drop your font file(s) into the upload box
3. Once uploaded these icons will be available across the app for use

Important notes: 

• Font files need to be `.svg` 
• Max file size must be under 1mb
• 48x48 SVG sizes work best on mobile layouts. 
• Once uploaded we will apply the primary icon color to each on

Brand Assets

There are 4 brand assets we use to improve the look and feel including

Brand Logo

Add your brand logo to enhance the overall brand experience in-app. The brand logo is the image that will be displayed in the header of the homepage of your app. Please note, that the size can further be adjusted using the slider under the ‘Brand Logo’ in your dashboard.

Important Note:

• If using white in the logo, note that this icon is used elsewhere in the app on white backgrounds. If you need to add white, we recommend adding a background color that matches the Primary color so it doesn’t disappear on white backgrounds.

App Icon

Your app icon is one of the most important aspects of your app because it’s the real estate on your user’s phone and will be seen within the app stores. An enticing, on-brand app icon will continue to bring your customers back into the app. App Icon should be 1024x1024 pixels.

Placeholder Image

The placeholder image will display while a product loads in your app.

Launch Screen 

The launch screen is an image that will appear for 2-3 seconds prior to loading your app. This is a prompt at the start of each app session, please note, if you do not fully quit the app then the launch screen will not appear again. This is also only available on iOS as the Android OS has deprecated the launch screen.

Pro-Tips: 

• Avoid text on the sides and corners as they may get cut off in smaller iPhone screens
• Include lifestyle imagery to ensure it grabs the attention of your audience 

Considerations

For more information on all app assets dimensions, check out this guide. 

Your app icon, placeholder image, and launch screen are all a part of your ‘App Listing’, this requires submission to both Apple and Google Play in order to update. Alternatively, if you do not see your Brand Kit colors reflects in your app, you may need to update your app version. To ensure your update has been submitted you can message us through your LiveChat in the Tapcart Dashboard or email us at help@tapcart.co! Please note, this can take about 24-48 hours to process and submit.

More Questions 

To learn more about Tapcart, visit Tapcart Academy to become a mobile app expert!

Have more questions regarding Brand Kit, we’re happy to help! Please reach out to us through LiveChat on your Tapcart Dashboard or email us at help@tapcart.co!

Updated October 24, 2024 18:18