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
Open your Tapcart Dashboard
Hover over App Studio in the header
Select Brand Kit from the drop down
Brand Kit consists of 5 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
Screenshot Generator: create App Store and Google Play listing screenshots with branded templates
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.
Core Colors
The main color components throughout the app like app background, header, dividing lines, and icons.
Background | Present on home, cart, PDP, account, PLP, collection menu, wishlists, subscriptions, orders, and search pages. |
Header Background | Present on home, cart, PDP, account, PLP, collection menu, wishlists, subscriptions, orders, and search pages. |
Input Background | Present on collection menu (titles of collection), PDP - wishlist heart fill, Sold out badge, Cart - apply discount / gift card fields. |
Modal Background | Present on in app notification modals like abandoned cart, Cart - subtotal section, PLP - Quick add modal, Account menu background, and Notifications line items. |
Tab Bar | Present on bottom navigation only. |
Icon (Primary) | Present on the “x” within modals, cart quantity picker (+,-), loading state jumping dots, selected checkboxes, and accordion arrows within the account page. |
Icon (Secondary) | Present as the outline of wishlist, Non-selected icon on bottom navigation, and account menu icons. |
Icon (Header) | Present on the top of your navigation (left and right). |
Dividing Lines | Present on borders and dividers throughout the app, including unselected variant selection outlines on PDP, wishlist, and the PLP Quick add drawer. |
Brand (Primary) | Present on bottom navigation selected icons, multipage dividing lines that are selected, search pill outlines, and selected variant selection outlines on PDP, wishlist, and the PLP Quick add drawer. |
Shadows | Present on collection menus and wishlists. |
Typography Colors
Text components throughout the app like titles, primary & secondary colors, captions, and price.
Page Title | Present on the top header title (Navigation, Cart, Collections, Account, Order, Notification, Rewards, Subscriptions, Custom Screen). |
Primary Text | Present on Modals (main text), Homepage & PDP block header titles, Multi-page selected text, sold out badge text, search (text in input field, popular/trending/collection search text & pills), Sort & Filter on PLP, empty state header text, Wishlist variant & wishlist drop down text, Account header text and menu text, Collection menu block text. |
Secondary Text | Present on Multi-page non-selected text, Homepage & PDP "View all", Search block "Search Products", non-selected navigation options, Bar code integration block "Scan barcode or QR code", Empty state sub text, PLP Filter (number of items within each filter category) & Sort (non-selected sort options), Wishlist sub text, |
Legal / Caption Text | Data opt in text on modals |
Product Title | Present on all product titles on Homepage, PDP, PLP, Cart, Wishlist page & blocks. |
Price | Present on all full price on Homepage, PDP, PLP, Cart, Wishlist page & blocks. |
Strikethrough Price | Present on strikethrough price on Homepage, PDP, PLP, Cart, Wishlist page & blocks. |
Sales Price | Present on all discounted price on Homepage, PDP, PLP, Cart, Wishlist page & blocks. This color is different than "Price". |
Button Colors
The components of primary and secondary buttons like fill, text, outline, and enabling shadows.
Primary Button | Present on modals (abandoned cart, applying gift card / discount), number of item indicator on the cart icon (top right), checkout button, sort & filter buttons, saving & creating list on wishlist, empty state buttons (no items, keep shopping), and the Quick add Add to Bag button |
Secondary Button | Present on discount & gift card cart buttons, wishlist: add to bag button. |
Quick add variant selection: In the PLP Quick add drawer, the selected variant swatch outline uses Brand (Primary) and unselected swatch outlines use Dividing Lines. Primary and Secondary Button colors control button fills and outlines only so they don't change variant swatch selection.
For the selected state to be visible, choose a Brand (Primary) color that contrasts with your Modal Background (the Quick add drawer background). After saving Brand Kit changes, fully quit and reopen the app to see updates on device.
State Colors
Alert, status, and loading states used for feedback and interactive UI throughout the app.
Subscriptions | Present on subscription selling-plan labels and icons on PDP, cart line items with a selling plan, and the subscription picker. |
Favorites | Present on wishlist/favorite heart icons when a product is saved (PDP, product cards, cart, and Add to Bag). |
Reviews | Present on filled star color in review and rating UI across PDP and product blocks. |
Success | Present on success toasts and alerts, toggle on state, active subscription badges, and positive status accents. |
Error | Present on error toasts and alerts, form validation states, destructive actions, and cancelled subscription badges. |
Warning | Present on warning toasts and alerts and paused subscription status badges. |
Disabled | Present on disabled or inactive UI including toggle off state, sold-out variant text, empty review stars, and disabled button backgrounds. |
Skeleton | Present on loading placeholder and shimmer states in product grids, cards, and subscription flows. |
Important note: Some State Colors are harder to preview in the Brand Kit mobile previewer depending on your app's configuration (e.g. you may not have subscriptions, sales prices, or active toasts visible on the preview screen).
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
Select Typography from the left rail
Click Upload Font or drag and drop your font file(s) into the upload box
Confirm you have the appropriate font license if the font is licensable
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 names. We recommend if you are uploading multiple font weights within a similar family that all the font family names match. That will make using them in the experience much easier.
Icons
The Icons section is where you manage your global default icons. Every merchant has access to over 200 icons tailored for eCommerce. There are three global icons that apply as defaults across your app:
Back Icon: used when navigating back within the app
Close Icon: used to dismiss modals and overlays
Cart Icon: used throughout the app to access the cartSelect Icons from the left rail
These defaults apply across your app unless overridden on a specific screen. You can change any of them by clicking the dropdown and selecting a different icon from the library.
If you are on the Enterprise plan, you can also upload your own custom icons to more closely match your brand styling.
To upload a custom icon:
Select Icons from the left rail
Click Add Custom Icons tab
Drag and drop your icon file(s) into the upload box
Once uploaded, these icons will be available across the app for use
Important notes:
Icon files must be .svg
Max file size must be under 1 mb
48x48 SVG sizes work best on mobile layouts
Once uploaded, Tapcart will apply the primary icon color to each icon automatically
Brand Assets
Brand Assets is where you manage the key visuals that represent your app and brand.
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
Screenshot Generator
Screenshot Generator helps you create polished App Store and Google Play listing screenshots directly in your Tapcart dashboard. Instead of exporting screens from a design tool or manually compositing images, you can upload or recapture app screens, apply branded templates, and export store-ready assets for iPhone, Android, and iPad.
Select Screenshot Generator from the Brand Kit left rail to get started.
Getting started
Open Brand Kit from the App Studio menu.
Select Screenshot Generator from the left rail.
Choose your target device (iPhone, Android, or iPad) and language from the toolbar.
Click Load New Screenshots to begin a new set, or use Load to open a saved project.
Click Save when you want to keep your progress.
Screens, library, and recapture
Screenshot Generator organizes work by screen slot. Default slots include Home, Collections, PLP, PDP, Account, Cart, and Notifs. Use + Add slot if you need an additional screenshot position.
For each slot, you can:
Upload an image to your library and place it on the canvas.
Recapture screens from a live app by entering an App ID above the editor. Recapture unlocks automated PLP and PDP screenshots once an App ID is loaded.
Select an uploaded image from the library to populate the device frame in the canvas.
Use the Show guides checkbox in the canvas to align headline, subheadline, and device placement while you design.
Design, templates, and export
The right panel includes four tabs for customizing each screenshot:
Templates: choose a pre-built layout for your screenshot set.
Design: customize the background, headline, subheadline, and additional graphic elements.
Screen: adjust settings for the app screen placed inside the frame.
Export: download finished screenshots for use in your App Listing or Release Manager submission.
Headlines and subheadlines render above the device frame, making it easy to highlight key app features while keeping the underlying UI accurate.
Important notes:
Screenshots should accurately represent your live app. Apple and Google may reject listing images that do not match the current in-app experience.
Screenshot Generator supports iPhone, Android, and iPad outputs. If your app has iPad compatibility enabled, generate iPad screenshots alongside your phone assets.
Use the language selector when you need localized screenshot copy for different markets.
After exporting, upload screenshots through Release Manager or your App Listing workflow. See Creating your App Listing and Release Manager: Complete Guide for submission steps.
Considerations
For more information on all app assets dimensions, check out this guide.
Your app icon, placeholder image, and launch screen are all part of your App Listing. Any updates to these assets require a new submission to both Apple and Google Play to take effect, which typically takes 24-48 hours to process. To confirm your update has been submitted, reach out through LiveChat in your Tapcart dashboard or email [email protected].