This article explains how to:
- Load a company logo
- Load background images for the various web/mobile devices homescreens
- Select a brand color for the main bar / shortcut button
You can also fully customize the home screen with your own HTML code (rather than just a static background image as explained below) and even use your own domain name. For customization instructions see:
Load Company Logo
Upload a logo presented on the top bar of the Web Admin and Storefront as well as on the PDF copy of the orders emailed.
Go to Settings -> Company Profile - > Branding
Upload an image using the recommended size: 458 X 167 pixels and ratio: 1:2.75
Load background images for the various web/mobile devices homescreens
In the same area you can also configure the image presented on the home screen for web and mobile users.
Pepperi Home Screen - the homescreen background used for mobile devices for sales teams users
Storefront Home Screen - the homescreen backgrond used for Web Storefront and Mobile Storefront users (buyers).
If you don't load a Storefront Home Screen image, web Storefront users won't see any home screen image when logging in to the Storefront (blank white screen) and buyers using the Pepperi Mobile Storefront on mobile devices will see the image configured for Pepperi Home Screen.
Upload portrait or landscape images using the recommended sizes. See this article for the recommended sizes: How to size our Pepperi homescreen image
Portrait: size for most tablets is 1536x2048
Landscape: size for most tablets is 2048 X 1536 pixels
The appropriate image will automatically display when the tablet is rotated. The images will be suited to the dimensions of your specific device.
Select a brand color for the main bar / shortcut button
In the same area, in the "Colors" section set the "Main color" for the main bar and shortcut button on the homescreen on the Web Storefront (buyers).
Note: these colors do not affect the mobile users (neither reps nor buyers). Mobile users will always see the default red color for the shortcut button.
(Secondary color is not shown to users, it's for the secondary bar in the studio back office only)
Select a color, or enter the rgb() coordinates for your brand's color:
The result will look like this on the Web Storefront: