Look and Feel: Creating Custom Store Styles
This article will teach you how to create a style template for your hosted order page that matches the look and feel of your current website. Although we are happy to design a custom style template for you, if you have some experience in html and CSS you may create the style template on your own. The look and feel of your FastSpring store is controlled by one or more visual style templates, which are each basically a zip file containing an xhtml file, CSS files, and images necessary to create the page. These are the steps that our designers follow when creating a custom style template for you. You do not necessarily have to use the same web browsers as listed in the steps below, but we do suggest them. We also suggest that you download and examine an example or view our XHTML Style Creation Tips.
If you run into questions along the way, please feel free to contact us by opening a support ticket.
Steps to Create a Style Template
- Open your existing webpage in Firefox. Go to "Save Page As." Create a new folder and name it whatever you would like. For our example, we will name this folder storestyle. In this new folder, change the file name to home.html, change the Save as type to "web page, complete," and click Save. Saving as ‘web page, complete’ with the name home.html will create a home.html file and a folder called home_files.
- Open your existing webpage in any web browser (we suggest Chrome because of its right-click "inspect element" feature or Firefox with the Firebug extension installed). Firebug in Firefox or Inspect Element in Chrome can be very useful in determining CSS styles for elements of your existing website, information that can be helpful in building your new stylesheet. Open the folder where you saved the file in step 1. Open your now local version of the html file, called home.html, in another tab or window of the same web browser and in a code-editing software (we suggest Komodo Edit, which is free and open-source). Important Note: Throughout this process you will be comparing your opened existing webpage with the opened local home.html version. You will be making changes to your CSS style sheet that you feel are necessary to display a good design aesthetic. Make sure as you go through the steps and make changes to your home.html or CSS style sheet that you consistently click Save on both files. When you have made a change, also make sure to reload the home.html file in your web browser.
- In the home.html file, delete all titles and classes on the <html> tag or the <head> tag. Any classes on the <body> tag will not be recognized.
- Delete any unncessary JavaScript. Make sure to delete the JavaScript in the file folder too. The smaller the file, the faster your order form will load.
- If you have a favicon image on your website, download or copy it into the file folder where you see the html file. Make sure it is saved as favicon.ico.
- Download this image and save it in the local folder you created earlier, called home_files/.
- Open any CSS style sheets in a code-editing software.
- In your web browser, compare your opened webpage with the opened local home.html version. If there are missing images, right click where the image is on the opened webpage and find the missing image. Save that image in the folder home_files/. (Note: Depending on the web browser and other factors, right clicking on an image will not always locate that image, so you may need to find the image in an alternative manner.) Change the reference in your CSS style sheet(s) or home.html file to match the new location of this saved image. Repeat until there are no missing images on your local version.
For example, you might change background-image: url(templates/images/arrow.png); to background-image: url(arrow.png);
- In your local home.html file, you might want to delete images, entire divs, text, search bars, navigation, footer links, social share options, etc. that distract your customer from purchase and that may decrease sale conversion rates. We suggest that you make your template style a simplified version of your website by keeping background images, your logo, copyright information, font colors and sizes, and basic layout the same. We also suggest that you simplify any navigation to just include a link to the home page of your website, or if you logo already links to your homepage, then we suggest you delete the entire header navigation.
- In your home.html file, you will want to put in some basic code to get a sense of what the order template will look like. This html code is also a placeholder for the SpringBoard order template, and will be replace with custom, dynamic htm to create the final page that is displayed. You should leave it in your file when you upload it later in this process. Simply copy and paste the following in the main content area of your html file:
<!-- TemplateBeginEditable name="Content" --> <h2 class="store-product-detail-title">Product Detail Title</h2> <h2 class="store-product-detail-title">Name of Product</h2> <h3>Header 3</h3> <h3 class="store-product-detail-pricing">Price of Product</h3> <h3 class="core-form-field-group-header">Store Headers, such at Contact Information, Mailing Address, etc.</h3> <h4>Header 4</h4> <h5>Header 5</h5> <div class="store-product-detail-description-short">Product Description</div> <p><a href="#">Link</a></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec velit sed augue mollis gravida at vel orci. Fusce sagittis tempor porta. Ut ac placerat neque. Fusce fringilla rhoncus mollis. Vestibulum viverra nunc id tortor malesuada vehicula. Aenean nec sollicitudin turpis. Mauris blandit nisl in massa suscipit porta. Quisque bibendum accumsan ante, a commodo urna convallis in. Quisque nec vulputate nunc. Nulla nec massa vitae odio tincidunt placerat. Nullam in erat elit. Suspendisse potenti.</p> <div class="core-section"> <h2 class="core-section-header">Section 1</h2> <div class="core-section-body"> Mauris gravida vestibulum erat at blandit. Nulla ut neque eget est auctor molestie. In accumsan hendrerit nunc vel convallis. Suspendisse tristique commodo ultricies. Suspendisse odio lorem, bibendum in viverra ut, tempus et tellus. Nulla sed purus a velit tristique cursus. Proin metus magna, sagittis vel ornare at, commodo vitae arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie dignissim quam, in commodo felis volutpat et. Nam dignissim, purus in vulputate aliquet, urna augue laoreet elit, id rhoncus augue nisi non lacus. Donec a arcu pretium nibh vehicula ornare vitae eget orci. </div> </div> <div class="core-section"> <h2 class="core-section-header">Section 2</h2> <div class="core-section-body"> Nullam accumsan, tellus ut luctus porta, magna turpis aliquam lorem, et fermentum purus velit suscipit elit. Praesent gravida, nibh nec congue facilisis, est odio scelerisque ipsum, eu condimentum risus lectus a nunc. Cras felis neque, pharetra eget imperdiet ut, egestas id diam. Integer in libero urna. Curabitur vel diam eu metus pulvinar porta. Donec fringilla fringilla ipsum, vitae imperdiet orci cursus vitae. Fusce ac lectus id eros mollis viverra. Sed ante elit, sodales placerat imperdiet vitae, vulputate quis magna. Nunc nulla nunc, mattis et varius sed, rutrum vel diam. Pellentesque ornare hendrerit egestas. Proin at diam dui. Cras placerat suscipit rhoncus. Nullam a odio nisi. Mauris augue nunc, facilisis dapibus sagittis ornare, tempor id nibh. Nullam ligula orci, vestibulum in tempor non, cursus sodales tellus. Suspendisse a nibh risus. </div> </div> <div class="core-form-field-body-note">Double Check that you've entered your email address correctly. We will send order information to it.</div> <ul> <li>one</li> <li>two</li> </ul> <!-- TemplateEndEditable --> <br /> <div style="width: 286px; margin: 0 auto;"><img src="home_files/fs_button05.gif"/> <!-- TemplateBeginEditable name="SecurityTransparent" -->security<!-- TemplateEndEditable --> </div> <br />
- Edit your CSS style sheet(s) to make the template look good. This often involves making sure that you do not set margins or padding for the h1, h2, h3, h4, h5, h6, or p HTML tags. Also make sure that you define the list-style-type for an unordered HTML list as:
ul {list-style-type: none;} - Make sure all HTML tags are closed. These tags include, but are not limited to, all images <img />, breaks <br />, horizontal lines <hr />, and JavaScript files <script />. You also need to escape special characters, such as &, $, ©, and ®.
For example, instead of <br>, your tag should be <br />.
For example, replace the special character © with ©
For the specific code replacements, we suggest the comprehensive list created by The UK Web Design Company. For more information, see html entities, provided by W3Schools.
- In the <head> section of your home.html file, just above the reference to your first CSS style sheet, copy and paste the following code:
<link title="main" rel="stylesheet" href="http://resource.fastspring.com/app/store/style/base.css" media="screen,projection" type="text/css" />
- Change the document type of your home.html by replacing the first lines of your home.html code, including your <html> tag with the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
- You will now need to turn your home.html file into an XHTML file. To do so, in your code-editing software where home.html is open, go to File » Save As. Change the file name from home.html to window.xhtml. Close the home.html file in your browser. In another tab or window of the same web browser, open your newly create window.xhtml file. Your web browser, or W3C's Markup Validator (if you upload window.xhtml) may provide feedback to make your window.xhtml compliant with XHTML 1.0 standards. Make changes to your window.xhtml file accordingly.
Uploading Your Style Template
- Create a zip file containing window.xhtml, the favicon, and the home_files folder with all images, the CSS stylesheet, etc. While you do not need to include the home.html file in your zip file, make sure you do not delete it. If you are a Windows user and you do not have a program which creates zip files, we suggest 7-Zip (which is free and open-source). If you are a Mac user, this functionality is built-in, and you will select items to zip » control-click » Create Archive.
- Log in to FastSpring's SpringBoard.
- Go to SpringBoard Store Home » Styles » Create a style.
- Click Next.
- Enter in a name for your style template. We suggest you include a date as part of the name. Click choose file. Choose your zip file from your computer. Then click Create.
Testing Your Style Template
- Your style is in test status. Under Actions, click View and then select one of the store testing options to view your custom style. We suggest testing your style template in multiple browsers.
- If necessary, make changes to your CSS stylesheet document, save, and rezip everything. We have found that getting a style just right requires a few sets of this process: making coding changes, zipping up the files and then uploading the new zip file. With each iteration, you can test and preview the improvements you have made. Then repeat the process for uploading your style template, but instead of creating a new style each time in step 3, click on the name that you used for your style template and simply choose the updated zip file from your computer. Then click Save.
- Repeat the previous step until you are satisfied with your style template or until you run across issues with which you may need our help. If you are satisfied with your style template, move it to active status, but make sure to move the default style template to test or disabled status.
Need Help Creating Your Style Template?
If you get stuck or have a question, open a support ticket and ask for assistance. Please provide the URL of the website you are trying to match and let us know that you have already uploaded a style, and what issues you are experiencing. We are happy to help, but please note there may be a fee for doing so and you will need to approve the fee before we can fix the issues.
Have any questions about FastSpring? We’re here to help!