Rebrand your Storefront
On this page you can find information on how to change the look and feel of your Storefront to suit your marketing needs, and create and edit banners.
Go to BSS Setup → Administration → System Options → Storefront Configuration → Rebranding and select the template you would like to use. The rebranding section allows you to choose between two templates for your Storefront; Nebula and Basic. Nebula contains more modern design trends and is easier to customize. Basic features more customization options and is suited to more advanced users with some design experience.
Please note that image on the right changes based on the section you are hovering over. This labels the elements the section contains, providing a clearer picture of what can be changed.
Please note that saving after changing any of the settings mentioned in the sections below will apply the changes on your production environment.
Nebula Template Options
The Nebula template contains the following options:
General
Font Family(ies) - Select the typeface(s) in which the text is displayed. If you enter multiple typeface names, please note that they must be separated by a semi-colon, e.g.: Calibri;Helvetica;Arial
Default Font Size - Set the size of the font in pixels
Headers & Tabs Color - Set the background color for the headers and tabs
Login Page
Login Page Logo - Upload an image or specify a URL for an image to use as the logo on the login page. You may also delete the existing image. If you specify a URL or select to delete the image, press Save to commit the changes.
Storefront Header
Header Height - Adjust the height of the header in pixels
Header Logo - Select the image to use as the logo on the header
Footer
Use Custom Footer - You may create and use a custom footer with the advanced text editing tools provided.
Basic Template Options
The Basic template contains the following options, in addition to those of the Nebula template:
Theme - Currently, only the default Blue theme is available
Horizontal Menu
Font Color - Specify the color of the text in the horizontal menu
Active Font Color - Specify the color of the text for the active option (when a user hovers over a link)
Service Catalogue
Price Color - The color in which the price of the product appears
Promotion Font Size - The size of the font in the promotional text
Promotional Font Color - The color of the font in the promotional text
Service Characteristics Odd/Even Category Color - The background colors of the table to alternate between for odd and even rows (e.g. The first and third rows are light blue, the second and fourth rows are dark blue etc.)
Primary/Secondary Buttons - Buttons used for navigating the Storefront
Background Color - The color of the button
Font Color - The color of the button text
Border Color - The color of the button outline
Service Category Navigation Menu
Font Size - The color of the font in the Service Category tree
Root Category Font Color - The color of the font for root (parent) categories
SubCategories Font Color - The color of the font for subcategories (children)
Toggle Icon Color - The color of the +/- icon
Custom Footer
You can define your Storefront footer by using the HTML editor.
You can check the following training video for detailed instructions
Banners
Edit the banners of the storefront by going to Setup → Administration → System Options → Storefront Configuration → Banners. The Banners section allows you to edit the following banners:
Home Page Banner - This banner is displayed in home page underneath Storefront navigation menu. Its width can be 900px.
Apps & Services Banner - This banner is displayed in services catalog pages underneath Storefront navigation menu. Its width can be 900px.
Offers Category Banner - This banner is displayed in Offers category page. If left blank, the default Apps & Services Banner will be displayed.
New Products Category Banner - This banner is displayed in New Products category page. If left blank, the default Apps & Services Banner will be displayed.
Advanced Settings
Advanced users with experience in web design or web development may use CSS, or Custom Scripts in the Header or Footer to further customize their Storefront in the Advanced Settings tab. Enter the code in its respective field, and select Save.
Below are some examples of commonly used custom header scripts:
Custom meta for all pages: <meta name="coverage" content="Worldwide">, <meta name="distribution" content="Global">
Meta for google verification: <meta name="google-site-verification" content="your verification string">
The following training video contains detailed instructions:
Contact Us Page
On the Banners tab, there is an additional section, where you can enter content about the communication details that you want to be exposed to your customers. The Contact Us page comes as a link to the footer of the Storefront, which you can enable or not.
Among other things, on the Contact Us page, you can enter contact details, Social Media links, and information about the offices of the Company. Below you can view a sample Contact Us page:
You can check the following training video for detailed instructions
Notifications Rebranding
Notifications are emails that are dispatched to your customers when they complete an action in your system such as when they self-register or when they place an order. Therefore, you can rebrand the look and feel of a notification email as well as its text so as to match your company’s identity and image.
You can check the following training video for detailed instructions
Business Documents Rebranding
Business documents, such as the offers, the orders, and the invoice templates can be either sent to your customers via email as PDF files or viewed by your customers inside your Storefront. Therefore, you can rebrand the look and feel of an invoice to mat