Implementing Custom Branding

By default, a generic "Software Store" or "License Portal" heading will be displayed in the Shopping Cart and Customer License Portal. There are two methods to customize these pages to look like your web site, which can be accessed by going to the menu Configure / Custom Markup & Logo. Customizations can be applied to the Shopping Cart at the author, distributor, and product levels, while the Customer License Portal can be customized at the author level.

Method 1: Logo Image

The first customization method displays a single header image in place of the default "Software Store" or "License Portal" heading. To implement this method, simply upload a company logo or banner graphic by clicking the Select New Image button, choosing your image, and then clicking the Upload Image button. The image will appear centered in the header on the shopping cart and customer license portal pages. You can also remove the image by clicking the Remove Image link on this same page. A few things to note:

The recommend logo image width is 738 pixels.
At least 740 pixels of width must be reserved for the SOLO Server content.
This method is not supported in the Shopping Cart at the distributor and product levels.
Method 2 will override this method if used at the author level in the Shopping Cart or in the Customer License Portal.

Method 2: Custom Markup Templates

The second customization method allows you to make the Shopping Cart and/or Customer License Portal look like your existing web site using Custom Markup Templates. With this method, a web developer can specify custom top and bottom HTML markup to replace the default markup output at the top and bottom of the Shopping Cart or Customer License Portal. A few things to note:

If a Custom Markup Template is configured for an area of SOLO Server, it will take precedent over the Logo Image from Method 1.
Customization at the product level using this method is only supported when running the cart in Single Order Mode.

Customizing your Storefront is comprised of three steps:

Uploading Graphics, Stylesheets, and Other Supporting Files
Creating a Custom Markup Template
Setting the Storefront Markup Option

Uploading Graphics, Stylesheets, and Other Supporting Files

SOLO Server uses HTTPS encryption to protect customer data. When customizing the customer facing areas of SOLO Server, referencing files on an external server which is not using an HTTPS connection will cause a message similar to "The page you are about to view contains both secure and unsecured items. Do you wish to view the unsecured items?" to be displayed to the end user, which will inevitably confuse them. Therefore, it is necessary to upload all graphics, stylesheets and other supporting files to your Storefront Files directory on SOLO Server so that all page items can be transferred through the HTTPS encryption channel. Note that the maximum upload size is set at 300MB.

Uploading and managing files on the server is accomplished through an easy to use interface very similar to Windows Explorer. Use the menu Configure / Manage and Upload Files. See Managing Files for more details on using the file management interface.

Creating a Custom Markup Template

Important

Customization does not work with sites using frames. You can still link your frames pages to pages within SOLO Server, however, you can't put our forms in your frames. SOLO Server's pages are not secure within frames.

In the Custom Markup Templates section Click Add New.
Pick a name for the template, such as Shopping Cart or Customer License Portal.
If necessary, have your graphic designer create a blank page with your navigation included and place <SOLO Server content goes here> where you would like the SOLO Server page content to appear. For the Shopping Cart, you can also begin with the Sample Custom HTML and modify this to suit your needs. Note that at least 740 pixels of width must be reserved for the SOLO Server content.
Paste the site's HTML coding into the form. Everything before <SOLO Server content goes here> goes in Markup Top. Everything after <SOLO Server content goes here> goes in Markup Bottom.
Now you need to edit your HTML slightly:
1. If you would like SOLO Server to dynamically insert the current page name (e.g. "Shopping Cart", "License Portal - Home", etc.) into the existing title, locate the <title> HTML element in the Markup Top. Add a [varTitle] search/replace string to the existing value where you would like the page name to be inserted.
2. It is also necessary to add a Content-Type meta tag to the <head> HTML element as shown below. This will ensure that the customer's browser uses the proper character set which works with SOLO Server's client side validation routines.
3. The above two steps should look similar to this:
  HTML
```
<head>
    <title>Software Store - [varTitle]</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
```

Next, you need to add the links to the default CSS stylesheets somewhere between the <head> tag and </head> tag. The markup for these links is shown below:

Shopping Cart Default CSS - HTML

<link href="[varSOLODirRoot]/products/cart_styles_core.css" rel="stylesheet" type="text/css" />
<link href="[varSOLODirRoot]/products/cart_styles_print.css" rel="stylesheet" type="text/css" media="print" />
<link href="[varSOLODirRoot]/products/cart_styles_screen.css" rel="stylesheet" type="text/css" media="screen,projection" />
<link href="[varSOLODirRoot]/products/cart_styles_speech.css" rel="stylesheet" type="text/css" media="speech" />

Customer License Portal Default CSS - HTML

<link href="[varSOLODirRoot]/customers/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="[varSOLODirRoot]/customers/customersNET.css" rel="stylesheet" type="text/css" media="screen" />
<link href="[varSOLODirRoot]/customers/customersNET_print.css" rel="stylesheet" type="text/css" media="print" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="[varSOLODirRoot]/customers/customersNET_ie6.css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="[varSOLODirRoot]/customers/customersNET_ie7.css" media="screen" /><![endif]-->
<link href="[varSOLODirRoot]/customers/customersNET_default.css" rel="stylesheet" type="text/css" media="screen" />

Now change any links that refer back to your web site to have the full address (e.g. http://www.yourdomain.com/directory/file.htm), or the links will point to a nonexistent page within SOLO Server.
You also need to change the graphic and other supporting file paths. They all need to go to "[varSOLODirRoot]/products/custom/[Author ID]/[File Path]", replacing the following:
1. [Author ID] is replaced with your Author ID, which can be found in the footer at the bottom of every page in the SOLO Server administrative interface.
2. [File Path] is replaced with the path to the file relative to the Storefront Files root folder in the Manage Files interface.
Note that any links in your custom markup that link into a SOLO Server subdirectory, such as a link to view the Shopping Cart or to login to the Customer License Portal , must access the subdirectories with the subdirectory name in all lower case (for example http://secure.softwarekey.com/solo/customers and not http://secure.softwarekey.com/solo/Customers). If mixed case subdirectory names are used, you will experience problems with cookies being set in the browser.
Click Save.
Test and verify the template:
1. If configuring the template for use in the Customer License Portal, you can click the Customer License Portal link under Previews to see what this template looks like in the portal.
2. A future build of SOLO Server will introduce preview functionality for the Shopping Cart. Until this is available:
  1. If you have yet to "go live":
    1. Update the Cart Options and set the Storefront Template setting to the newly created template.
    2. Use the Store / Create a New Order/Cart page to create a cart and view and verify the markup.
  2. If you are already "live" and need to test and verify the changes without immediately pushing them live, follow these steps:
    1. Create a dummy Distributor record for testing, setting the Storefront Template setting on the distributor to the newly created template.
    2. Use the Store / Create a new Order/Cart page to create a cart, selecting the distributor from the prior step, and then test and verify the markup in the cart.

Setting the Storefront Markup Option

To configure the markup at the author level in the Shopping Cart, edit the Cart Options and set the Storefront Markup setting to the appropriate template.
To configure the markup at the distributor level in the Shopping Cart, edit the Distributor Configuration for the distributor and set the Storefront Markup setting to the appropriate template.
To configure the markup at the product level in the Shopping Cart, edit the Product Configuration for the product and set the Storefront Markup setting to the appropriate template.
To configure the markup for the Customer License Portal, edit the Customer License Portal Options and set the Storefront Markup setting to the appropriate template.

Viewing Audit Data

Once a custom markup template is created, SOLO Server automatically records an audit trail of all changes made to the template. To view the audit data for a template, simply view the template, and then click the View Audit History button. This will display a listing of the audit history of the template. Click the View link for a given audit to see a listing of the changes for that particular audit.

Advanced - Creating Custom Stylesheets

The default CSS stylesheets detailed above will cause the dynamically generated SOLO Server page content to render with SOLO Server's default look and feel. These stylesheets can be overridden to further change the look and feel of the generated content to more closely match your web site.

The recommended method of creating custom stylesheet versions is as follows:

Download the default stylesheets and save the files locally.
Modify the local copies of the default stylesheets as needed.
Upload the custom versions of the stylesheets to your storefront directory.
Update the custom markup template to reference the custom versions of the stylesheets.

The default stylesheets offer a great number of CSS classes - too many to document here without becoming overwhelming. The naming conventions used in the stylesheets should be sufficient to allow locating the proper elements to customize after reviewing the files.

Optional Advanced Implementation For the Customer License Portal

If you would like to have text on the Custom Markup change between Log In and Log Out (depending on the log in state), optionally use the following two HTML comments (replace 2451871 with your Author ID):

Customer License Portal Advanced Markup - HTML

<!--[varAnonymousMenu]<a href="[varSOLODirRoot]/customers/Default.aspx?AuthorID=2451871" title="Use this link to log into our License Portal">Log In</a>[/varAnonymousMenu]-->
<!--[varAuthenticatedMenu]<a href="[varSOLODirRoot]/customers/Default.aspx?Logout=True" title="Use this link to log out of the License Portal">Log Out</a>[/varAuthenticatedMenu]-->