This article explains how to:
- Load a company logo
- Load background images for the various web / mobile device homescreens
- Select a brand color for the main bar / shortcut button
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 Mobile App Home Screen - the home screen background used for mobile devices for sales teams users
Pepperi B2B Commerce Home Screen (Web) - the home screen background used for Web Storefront and Mobile Storefront users (buyers profile only - if a Rep logs in on the web app they will see the mobile app home screen).
Note: If a Rep/Admin or other non-buyer profile logs into the Web App, they will still see the Pepperi Mobile App Home Screen image (and not the B2B Commerce Home Screen)
If you don't load a B2B Commerce 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 Mobile App Home Screen.
Upload portrait or landscape images using the recommended sizes.
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 App only.
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 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: