Customize the Main Bar on the top of your Web Storefront with your own look and feel. Easily load your own Javascript 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 file (Pepperi does not provide a chat module, you must load the code snippet for your chat within the file loaded to Pepperi).
You can also customize the entire Homescreen page with your own HTML/Javascript.
Simply load a Javascript 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:
<a>
href="javascript: void(0)" title="MyBrand\'s Store" rel="home" onclick="customHeader.navigateHome()">
<img data-altlogo="https://www.pepperi.com/wp-content/uploads/2019/01/my_brand-mock_logo.png"
src="https://www.pepperi.com/wp-content/uploads/2019/01/my_brand-mock_logo.png" width="162" height="64" >
</a>
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).
Make sure to use https when referencing assets hosted on another domain, otherwise you will get an error indicating the content is not secure and must be served over https.
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).
Note: if you are also using the Customize login page and you have uploaded your favicon image in the add on it will appear on the login page only, and will NOT appear on the homepage or other pages inside your storefront until you load it in the header file as shown below.
Simply replace the link to the favicon icon and page title 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 --> Branded App --> WebApp Main Bar
Edit the relevant profile - Buyer/Admin - 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 buyers 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.
To remove the customized header for a profile, add the profile with an empty configuration
0 comments
Please sign in to leave a comment.