Storefront and License Portal design template
You can customize the design of the SOLO Server integrated shopping cart and Customer License Portal with your own markup.
In SOLO Server, use the menu Configure / Custom Markup and Logo, and under Method 2: Custom Markup Templates, press the Add New button. You will need to add markup into the Top and Bottom fields.
Sample Template
If you need help, here is a sample template that you can use, which you may prefer over the basic default design. It wraps around the shopping cart and Customer License Portal components and also applies custom styling to those components.
Here is an example screenshot:
You can download the HTML file to edit and copy the markup or copy and paste it from the text at the bottom of this page.
Markup Updates
To use this template on your own account, you will want to make the following updates to the markup (see "TODO" comments in the markup):
- Update the "Your Company" text in the <title> tag
- Update the icon/logo image in the 4 icon URLs
- (Optional) Download our style.css file and replace the background image link, then update the link to your modified style.css file.
- Update the logo image URL
- Update the Menu text and URLs
- Update the contact and other information in the footer
Uploading Files
You can upload image and CSS files directly to your SOLO Server account:
- Use the menu Configure / Manage and Upload Files.
- In the file explorer interface, select the "Storefront Files" folder.
- Use the Upload button to upload files.
On SOLO Server Shared URL, the Storefront Files folder corresponds to the URL: https://secure.softwarekey.com/solo/products/custom/[Author ID]/
Your Author ID is listed at the bottom of each SOLO Server page.
Setting the Template in your SOLO Server account
Once you've saved a template, you need to set your account to use that template for both the cart and the Customer License Portal:
- Cart: Use the menu Store / Cart Options and press the Edit button. Set the Storefront Template to your saved template.
- Portal: Use the menu Configure / Customer License Portal Options and press the Edit button. Set the Storefront Template to your saved template.
Template Markup
Markup Top:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="iso-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--TODO: Update your company name-->
<title>[varTitle] - Your Company</title>
<script type='text/javascript' src='https://secure.softwarekey.com/solo/jquery/jquery.js'></script>
<!--TODO: Replace URLs with you own icon/logo-->
<link rel="icon" href="https://secure.softwarekey.com/solo/products/custom/2451871/graphics/icon-256.png" sizes="32x32" />
<link rel="icon" href="https://secure.softwarekey.com/solo/products/custom/2451871/graphics/icon-256.png" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="https://secure.softwarekey.com/solo/products/custom/2451871/graphics/icon-256.png" />
<meta name="msapplication-TileImage" content="https://secure.softwarekey.com/solo/products/custom/2451871/graphics/icon-256.png" />
<!--Customer License Portal Styling-->
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Raleway:400,600,700" rel="stylesheet" />
<link href="https://secure.softwarekey.com/solo/Dependencies/font-awesome/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="https://secure.softwarekey.com/solo/products/custom/2451871/flexboxgrid.min.css" media="screen" />
<!--TODO: Copy and replace style.css with your own css file-->
<link rel="stylesheet" type="text/css" href="https://secure.softwarekey.com/solo/products/custom/2451871/style.css" media="screen,print" />
<link href="https://secure.softwarekey.com/solo/customers/customersNET_print.css" rel="stylesheet" type="text/css" media="print" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="https://secure.softwarekey.com/solo/customers/customersNET_ie6.css" media="screen" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="https://secure.softwarekey.com/solo/customers/customersNET_ie7.css" media="screen" />
<![endif]-->
<script>
$(document).ready(function () {
$('.mobile-menu').click(function () {
$('ul.main-menu').toggle()
});
//When displaying a shopping cart page, do not show the menu.
//if (window.location.pathname.indexOf('products/') != -1) {
// $('div.navbar-right').css('display', 'none');
// console.log($('div.navbar-right'));
//}
});
</script>
</head>
<body>
<div class="navbar">
<div class="container-main">
<div class="logo">
<!--TODO: Replace URL and logo image-->
<a href="#"><img style="padding-top: 10px;" src="https://secure.softwarekey.com/solo/products/custom/2451871/graphics/logo-sample.png" /></a>
</div>
<div class="navbar-right">
<ul class="main-menu">
<li>
<a href="#">Menu 1</a>
<ul>
<li><a href="#">Sub Menu A</a></li>
<li><a href="#">Sub Menu B</a></li>
<li><a href="#">Sub Menu C</a></li>
</ul>
</li>
<li>
<a href="#">Menu 2</a>
<ul>
<li><a href="#">Sub Menu D</a></li>
<li><a href="#">Sub Menu E</a></li>
<li><a href="#">Sub Menu F</a></li>
</ul>
</li>
<li>
<a href="#">Menu 3</a>
<ul>
<li><a href="#">Sub Menu G</a></li>
<li><a href="#">Sub Menu H</a></li>
<li><a href="#">Sub Menu I</a></li>
</ul>
</li>
<li>
<a href="#">
No Sub Menu
</a>
</li>
<li><a href="#" class="highlight" id="top-menu-free-trial">Highlight</a></li>
</ul>
<button class="mobile-menu">Menu</button>
</div>
</div>
</div>
<div class="hero-section"></div>
<!--START CONTENT-->
<div class="content">
Markup Bottom:
</div>
<!--END CONTENT-->
<div class="footer">
<div class="footer-top">
<div class="container-main">
<div class="row">
<div class="col-xs-12">
<h1>CONTACT US</h1>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12">
<p>
Company Name <br /> Address 1<br />Address 2
</p>
</div>
<div class="col-md-6 col-xs-12">
<p>
Phone: +1 111.111.1111<br /> Sales: @email.com<br /> Support: @email.com
</p>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container-main">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-6">
Copyright 2022 CompanyName.com
</div>
<div class="col-xs-12 col-sm-6 col-lg-6">
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#" target="_blank">System Status</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>