Search

Page tree
Skip to end of metadata
Go to start of metadata


This page offers information as to the available options that Interwoks Cloud Platform offers for rebranding your Storefront. In order to have an idea how it all fits together, you can visit our Storefront here! Options include your basic fonts, color family, logos, banners, terms of use and many more details that will make your Storefront a unique environment.
 


Things move ahead! The re-branding features presented here are available for use at our new Storefront Version


The Storefront settings are located to BSS > Setup > Adminstration > System Options > Storefront Configuration

General Options



 

Can I use Google Fonts at my Storefront?

interworks.cloud Platform supports the use of Google Fonts. The way to do it is through the Custom CSS facility. For example if you want to use the 'Racing Sans One' font:

  1. Navigate to Google Fonts, and locate the  'Racing Sans One' font. Click the 'Quick Use' option. This will give you a URL to link into your header.
  2. Instead of linking the URL open it in your browser: http://fonts.googleapis.com/css?family=Racing+Sans+One
  3. This will give you the following code that you can then copy and paste into the respective Custom CSS section of the Storefront:
    @font-face
    { font-family: 'Racing Sans One';
    font-style: normal;
    font-weight: 400;
    src: local('Racing Sans One'),
    local('RacingSansOne-Regular'), url(http://really-long-url.woff) format('woff'); }
     
  4. Set the Font Family(ies) configuration field as "Racing Sans One"

Login Page


 This is the logo that is displayed on the login page!


Storefront Header


 You can fashion the header as you see fit using the following options.



 Apart from the more straightforward options, you can select to add a footer that you will design through a WYSIWYG editor.The 'Contact Us' page and the 'Terms of Use' section are also accessible through the footer!

 


Horizontal Menu


 Basic options for the horizontal menu display.


Service Catalog


 This section of the Storefront is displayed, when you select an item and proceed to checkout.

 

Primary Buttons


 The primary & secondary buttons can also be fashioned to follow the marketing guidelines 

    

Secondary Buttons


     

Service Category Navigation Menu 


 This vertical space lies on the left section of the 'Home' & 'Apps & Services' pages and references the available categories of catalogue items.

 

Custom CSS


CSS is a means of styling a web page and enhance it according to your wishes. Storefront allows for enhancing most of its elements by inserting custom CSS code through an extra facility.

At the 'Storefront Settings' page, there is the section "Custom CSS" where you can insert your own CSS code to amend aspects of displayed Storefront elements that are not supported through the available options. 

The easiest means of finding a reference to an element is through the Development options of your browser (e.g. for Chrome: More tools > Developer tools). There you can locate the elements you need and proceed to style them accordingly. 

For example let's say you need to change the styling of a button:

  1. Locate the element through the developer tool (e.g. TryBuyButton)
  2.  insert the code in the Custom CSS window:
    TryBuyButton {
        border: 1px solid #CE171F !important;
        background-color: #CE171F !important;
        color: #ffffff !important;
       border-radius:3px !important;
    }
  3. Click 'Save' at the top of the page to commit any changes! 

In the window, you can insert the code for any element you want changed, without any particular sequence, just add the new code at the end, each time.



Custom Footer Examples


The following examples will help you to add text in any page of the storefront.

Example 1 : Adding text in Registration page (specific page) under registration info.

 Add in footer section the following code:

</script>

<script type="text/javascript">

  //If the page is the registration page

if(window.location.href.indexOf('Register.aspx') != -1 || window.location.href.indexOf('Register.aspx') != -1){   

                //After ‘RegisterUserInfoMsg’ element add the red text 

               $('#RegisterUserInfoMsg').after("<div id='RestigerInfo'>I want to add this text.</div></div>");         

}          

</script>


Example 2 : Adding text in specific element.

Add in footer section the following code:

</script>

<script type="text/javascript">

// If the element is the ‘txtContactComments’

if($('#txtContactComments').length){          

               //Add at the end of ‘lblComments’ element the red text                                                                                 

               $('#lblComments').append('I want to add this text. ');      

}

</script>

Terms of Use Section


 At this section you can fill in your 'Terms of Use' and thus inform your customers. The 'Terms of Use' link is displayed at the footer.

Banners


It goes without saying that you can embellish your Storefront with banners for most basic Storefront pages! The banners can be attached through WYSIWYG editors that support both 'Design' and 'HTML' modes.

The pages that host banners are:

  • The 'Home' page

  • The Apps & Services' Page

  • The 'Offers' category page'

  • The 'New Products' category page

  • The 'Contact Us' page


Tip!

Although the banner editors do not support Carousel-type content, you can have the same effect using animated gif's!

Contact Us!


At the Banner's page, there is an additional section, where you can enter content about the communication details that you want 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, at 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 proceed by learning how to enable anonymous access to your Storefront   Next

Table of Contents