Branding Page Tutorial

The Branding Page lets you set up the core elements of your app's branding. Here we’ll go over the Branding Page and how to use it.

Tim Tietz avatar
Written by Tim Tietz
Updated over a week ago

What is the Branding Page?

The Branding Page lets you set up the core elements of the branding for your app such as the app logo, loading screens, and color scheme. In this article, we’ll go over all of the sections of the Branding Page and how to use them.

On this page you can:

  • Upload the image that you want to use as your app’s icon

  • Specify your app’s icon display name (this name displays under the app’s icon on user’s phones)

  • Upload the images that you want to use as your app’s loading screens

  • Change the font used in your app

  • Change the color scheme of your app

How to access the Branding Page:

Simply go to Design >> Branding

What are the different sections of the Branding Page, and how do you use them?

Here we’ll go through the Branding Page tab section by section so that you know how to set up the groundwork of your app’s branding.

First, we’ll go through the Loading Screens & Icons section:


App Icon & Display Name

In the App Icon & Display Name section, you can upload the image that you want to use as your app’s icon as well as the app name that you want to display under that icon. Here’s how you can set up your app’s icon information:

Note: You will need to upload a transparent Android icon prior to publishing. If you do not have a transparent icon, you can remove the background with this tool.

Step 1: Click on the image upload button to upload the icon image

Click on the image upload box:

This will open up the Media Library where you can add an image already uploaded to the Media Library, or you can upload a file from your computer.

Note: We recommend that you use a 1024 px. x 1024 px. square as your icon image.

Once you’ve uploaded the icon image type in the icon name that you want to display under the app’s icon on the user’s phone screens in the “Display Name” section.

Note: The display name has a character limit of 40 characters.


App Loading Screens

The App Loading Screens section allows you to upload images for the loading screens that will display while your app is loading on the user’s screens. Here’s how to set them up:

Step 1: Click on the image upload button to upload the icon image

This will open up the Media Library where you can add an image already uploaded to the Media Library, or you can upload a file from your computer.

This loading screen will display differently on various mobile devices. We recommend using an image with a minimum height of 3000px to avoid any formatting issues.

You can preview how the loading screen will look by clicking 'View on different devices'.

Note: If you make changes to the App Icon, Icon Name, or Loading Screens after your app has been published and is live, you’ll need to contact us at support@buildfire.com letting us know what you changed so that our publishing team can resubmit your app for you.


Font

The Font section allows you to select the font that’s used throughout your app. We have a number of fonts that you can choose from. Here’s how you change your app’s font:

Step 1: Click on the arrow next to the font name to open up the drop-down menu

If you would like to change the font that’s used in your app, simply click on the arrow next to the current font’s name to open up the drop-down menu.

Step 2: Select the font that you want to use

Next all you need to do is select the font that you want to use in your app from the list of fonts.

Note: Keep in mind that because Android and iOS devices run different operating systems, some fonts may look better on one device than the other. This is due to the way that the operating systems process those fonts.


Colors

The Colors section allows you to change the color of different elements in your app. Here’s how you change the color of an element in your app:

Step 1: Click on the colored box of the element that you want to change

To change the color of an element in your app simply click on the colored box next to that element’s name.

Clicking on that box will open up a color picker where you can either manually select the color you want to use, or if you have a hex code for your company’s branded color you can enter that in as well.

This will update the color of an element in real-time and your changes will automatically be saved.

Preset Themes

The Preset Themes section is where you can find a number of preset color schemes that you can use if you don’t want to change individual colors of elements in your app. Here’s how to select a Preset Theme for your app:

If you would like to switch over to a pre-set theme, simply click on the theme that you want to use. It’s that simple! You’ll see all of the elements change to that theme’s colors.

Note: If your app is already live and you enable this, users will need to check for new content one more time by either closing the app entirely, waiting 15-20 seconds, then reopening it which will tell the app to automatically check for new content, or manually check for new content by opening the side menu and tapping on “App Settings” then “Check For New Content”. From then on users should see the “New Content Available” message whenever they open the app and there’s new content to download.

If your app isn’t published yet and you enable this, it should be included in the initial submission of your app when you send it off to our publishing team to be submitted.

Related Articles

In addition to this article, we recommend checking out the following related articles so that you have a better insight into how to use the system to its fullest advantage:

Still have questions? No problem! Reach out to us and we’d be happy to help :)

Did this answer your question?