Easily customize the Main Bar on the top of the Storefront with your own look and feel. Easily load your own HTML to include images, links to Pepperi components, or to external sites on your web site. You can also include your own chat module to load on the page within this HTML (Pepperi does not provide a chat module, you must load the code for your chat within the HTML file loaded to Pepperi).
Simply load an HTML file in Settings -> Configuration Files. You can load a different template for each Pepperi profile (Rep, Admin, Buyer, or any other profile you have created).
There is a basic sample file attached below.
The sample file contains a link to the sample logo for "My Brand" as shown in the above screenshot:
To replace it with your own logo you must insert the URL to your logo image (the image is hosted by you, not by Pepperi).
Edit the Page Title and Favicon Icon
You can also edit the page title and the favicon icon used in the browser tab (the default will show the Pepperi logo and title).
Simple replace the link to the favicon icon and pageTitle in the attached sample file:
this.favIconURL = 'https://www.pepperi.com/wp-content/uploads/2019/05/MyBrandFavicon.png';
this.pageTitle = 'Welcome to BeautyBrands!';
Once you have edited the file, go to Settings -> Configuration Files and click + Add
File Type: Select WebApp Customization
Name/Description: Provide a name and description
Upload your HTML template for the header and Save
Next, assign the file to be used on the Web App.
Go to Settings -> Company Profile -> WebApp Main Bar
Edit the relevant profile and add the configuration file that you loaded.
You can load multiple configuration files for the main bar and use a different one for various profiles, such as Buyer, Admin, Office Staff etc… (any profiles which you have created). Just add the profile to the WebApp Main Bar configuration and select the relevant configuration file.