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.

Nebula Template

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

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 we have for this purpose.

You can check the following training video for detailed instructions

Further Customization with Code

Advanced users with experience in web design or web development may use CSS, JavaScript or Head Meta to further customize their Storefront. Enter the code in its respective field, and select Save.

You can check the following training video for detailed instructions

Custom Head Meta

In this section, you can add custom head meta. Below some examples:

• 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">

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.
  

Contact Us Page

On the Banner's page, 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

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>

Preview Your Storefront on the Staging Environment

In this section you may use the staging environment to test custom CSS or Javascript, as well as preview the Nebula and Basic templates.

The following options are available to preview on the staging environment:

• Template – Select Nebula or Basic.

• Theme – Choose one of the available themes. This applies only to the Basic template.

• Apply Rebranding – Enable this to apply any changes made in the Rebranding tab. For the changes to appear on the Staging environment, they must be saved first.

In the Custom CSS and Custom JavaScript fields, you may provide custom code to use on your Storefront.

Image Removed

After saving any changes you would like to preview, select Preview Storefront on Staging Mode. Then, select Publish to Storefront to publish the settings on the production environment.