Rebrand your Storefront

Owned by Oleg Melnykov (Deactivated)
Last updated: Oct 18, 2022
7 min read

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 match your company’s identity and image.

 You can check the following training video for detailed instructions

Guidelines for Logos and Banners 

For logos and banners in the Nebula template, please note the following guidelines:

  1. Header logo

    1. The dimensions of the uploaded image are adjusted to 48 pixels height by 180 pixels width. Width is adjustable and can be smaller than 180 pixel.

    2. If you upload a new image with the same filename as the existing one, then the changes will be visible after you refresh the page with Ctrl+F5.

  2. Login Page Logo

    1. The uploaded image for the login page logo, must have a 1:1 ratio (square) and minimum dimensions of 512*512 pixels.

    2. If you upload a new image with the same filename as the existing one, then the changes will be visible after you refresh the page with Ctrl+F5.

  3. Banners

    1. Banners are defined in Storefront configuration and are common for all Storefront v4 templates.

    2. It is recommended to use banners with 16:9 ratio and minimum dimensions of 900 pixels width by 550 pixels height. For a better image resolution, it is recommended to use images 1920*1200 pixels.

    3. To use a carousel as banner you may use the sample code below. Please note that the images specified for the carousel must have the same dimensions.  

 

<section class="cover bg-white"> <div class="carousel slide carousel-fade iw-carousel-cover" data-interval="false" data-ride="carousel" id="carouselExampleCaptions"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="row no-gutters"> <div class="col-12 col-lg-6 img-container"> <img alt="" src="sample1@1920x1200.jpg"> </div> <div class="col-12 col-lg-6 promo-container"> <div class="cover-item-info text-left d-flex flex-column"> <h5 class="title">Increase your revenues by offering multiple products as one.</h5> <p class="text-justify description">Offer attractive solutions in better prices in just one click! Combine different products to create unique packages for your customers.</p> <div class="buttons-wrapper"> <button class="btn btn-primary" type="button">View all bundles</button> </div> </div> </div> </div> </div> <div class="carousel-item"> <div class="row no-gutters"> <div class="col-12 col-lg-6 img-container"> <img alt="" src="sample2@1920x1200.jpg"> </div> <div class="col-12 col-lg-6 promo-container"> <div class="cover-item-info text-left d-flex flex-column"> <h5 class="title">Bill your own customers and take full control of your cloud business.</h5> <p class="text-justify description">Differentiate from your competitors by offering top class cloud services! Choose among a wide range of cloud offerings and complete your order in a few clicks.</p> <div class="buttons-wrapper"> <button class="btn btn-primary" type="button">Start now</button> </div> </div> </div> </div> </div> </div> <a class="carousel-control-prev" data-slide="prev" href="#carouselExampleCaptions" role="button"> <span aria-hidden="true" class="carousel-control-prev-icon"> </span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" data-slide="next" href="#carouselExampleCaptions" role="button"> <span aria-hidden="true" class="carousel-control-next-icon"></span> <span class="sr-only">Next</span> </a> </div> </section>