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