Branding Your Homescreen (Logo Upload)

Last Updated: Jul 18, 2017 10:32AM PDT

Starting with Gaslamp source code, you can now easily upload your business' logo to brand your mobile application. This allows your logo to be placed as a new layer on top of your homescreen image and any carousel images you are using. This means you no longer need Photoshop to successfully brand your app and it unlocks even more creativity on what is capable in your design.
 


(this slider animation above is Ken Burns)

What happened to the Header Background Image?
The Branding tool replaces the homescreen header image upload area. We found this was a rarely used feature, however you can still effectively upload a header image here by placing it at the top of your homescreen to replicate the old functionality. 
 

How-To:
 

1. Navigate to the Design step, next to Branding select the Add button. You will notice the first time you visit the branding tool you will be greeted with a walkthrough of the feature. 



2. After proceeding through the walkthrough, you will see a sample logo. This is so you can get an idea of the functionality. Select the Choose image button on the left and either upload a new image or select a previously uploaded image.






3. Perfect your image size and placement by dragging the image around the sample Homescreen. 
  • Once you hit Select on the image you wish to use you will now be in full control of the placement. This image, whether its a logo, slogan, photo or something else, will sit above the homescreen image and carousel images. The widgets on your apps homescreen and any homescreen shortcuts will appear on top of the branding image.
  • On the left of the branding tool, you will see some simple instructions. These instructions will help you master the branding tool in order to keep your image from being skewed and to align it perfectly.
  • Once you are happy with its placement, select Save. You will also notice the screenshot below says update, this is to show that you can fine-tune your image placement again and again.
  • Don't forget to hit the Save button on the design page!



4. Preview your app branding by using one of our App Previewers. Whether you like to use the preview tools built into the CMS, or you prefer to check on your smartphone, this branding image is now applied to your app. Remember, if you wish to use this on your live application, it will need to be updated to source code 48.0 Gaslamp or greater.