How do I make my on-line order page look more like my web page?

Kagi provides three methods for creating the content for and customizing the look and feel of your online store.

Standard Layout — The "No Code Solution"

If you are not a web designer or do not have experience in XHTML, do not worry. Let Kagi list your products with the Kagi Store Wizard. The wizard allows you to quickly display your products in a pre-made format wrapped in a standard template. Using the tools in the Wizard, you can place product names, purchasing buttons, and other attributes automatically in a fast and convenient way. The sample shown below illustrates what part of the pre-made layout you have control over. A walkthrough of the easy to use standard layout option can be viewed in the Kagi Store Wizard's tutorial.

Advanced Layout with Kagi Store Template

If you wish to add more style to your product layout and you have some XHTML experience, you can explore the advanced layout options in the Kagi Store Wizard.

With advanced layout, you can pick and choose which products to list, what order they are listed, and liven up the listing with your own design sense. The three most common strategies for using Advanced Layout are:

1. Manually enter XHTML of your own design in the Page Content area
2. Use the Kagi Store Wizard's token insertion tool to more easily display specific product information or create repeat blocks that reuse your code for each product you want listed
3. Use Kagi's standard code as a foundation to add your own styles

Page content you create will be wrapped in one of Kagi's colorful templates as illustrated here.

Advanced Layout with the Kagi Store Template

Create a Custom Template

Customers are significantly more likely to purchase from you when your shopping cart and checkout pages maintain the look and feel of your brand. If you are familiar with (x)HTML design and would like to make your online store look more like your web site, you can create your own custom template.

A custom template is an (x)HTML file that includes a call to your store's content. For example, your template my incorporate your company logo, navigation back to your web site, and images and styles that support your company's branding. Your template would not include product descriptions or listings or in-store submit buttons — these would be designed separately in the Kagi Store Wizard using the Standard or Advanced Layout methods mentioned above.

Advanced Layout with a Custom Template

How do I actually design a custom template?

Use the (x)HTML source code below as an example to customize a template for your needs. Your modifications to the template can include changing the background image, company logo, placement of the "{pageContent}" tag, and the creation of your own menus. When creating your template, please pay attention to the following important guidelines:

Requirements for Your Custom Template

• At minimum, the text "{pageContent}" must appear somewhere in your template. This "token" will be replaced with your content from Kagi Store Wizard (or Regdata). As a customer proceeds through the purchase process, the shopping cart, checkout, and receipt pages will appear in place of "{pageContent}." Please note: Kagi's shopping cart, checkout, and receipt pages are 600 pixels (600px) wide.
• Links (<a href="">) must include the absolute path to the destination file. Rather than <a href="index.html">, use <a href="http://www.mydomain.com/index.html">
• The Kagi Online store runs on a secure server. If you incorporate images and styles from your own server into the design of your store, most visitors will encounter an error implying they are receiving data from a non-secured source. To avoid this error, we strongly urge you to upload any images and stylesheets you wish to use on your store to our secure server. Both the new Kagi Store Wizard and the old Regdata tools make this process easy.

Where do my uploaded images and stylesheets go?

For files uploaded through the Kagi Store Wizard

• Files upload to the folder /gif/XXXXX_LIVE/ where XXXXX is your supplier ID.
• Sample code to reference an image:
<img src=/gif/XXXXX_LIVE/x-logo.png />
• Sample code to reference a stylesheet:
<link href="/gif/XXXXX_LIVE/layout.css" rel="stylesheet" type="text/css" />
• Note: images and styles will not be available until after you publish your store.

For files uploaded through Regdata (legacy)

• Files upload to the folder /gif/XXXXX/ where XXXXX is your supplier ID.
• Sample code to reference an image:
<img src=/gif/XXXXX/x-logo.jpg />
• Sample code to reference a stylesheet:
<link href="/gif/XXXXX/layout.css" rel="stylesheet" type="text/css" />

Please note: Kagi stores your uploaded graphics and stylesheets in a directory called "gif," regardless of the file's format.

Sample Template Code

<!-- Kagi Online Order Page template -->
<html>
  <head>
   <title>{%pageTitle%}</title>
  </head>
<body background="/gif/ABC/bg.jpg">
<table border="0">
 <tr>
  <td valign="top">
   <center>
   <!-- Kagi Logo -->
   <img src="/gif/logo_kagi.gif" name="myImage" border=0 alt="KagiLogo" 
   width="106" height="108">
<br clear="all" />
<!-- Kagi menu starts here, remove if you don't want the Kagi menu -->
    <table>
     {menuContent} <!-- Kagi menu must be wrapped in <table> tags -->
	<tr>
		<td>{digitalId}</td>
	</tr>
    </table>
<!-- Kagi menu ends here -->
   <td valign="middle">
    <table cellspacing="0" cellpadding="0" border="0">
     <tr>
      <td align="center">
<!-- form content starts here, do not delete -->
       {pageContent}
<!-- form content ends here -->
       <br />
       <font size="-1">{%version%}<br />&copy; 
       {%copyright%}{%patent%}</font>
       <br />
      </td>
     </tr>
    </table>
   </td>
  </tr>
 </table>
</body>
</html>

Optional Considerations for Your Custom Template

• It is your choice to include references to Kagi on your web site.
• You may include CSS (stylesheets) into your template (remember to upload them through the Kagi Store Wizard or Regdata and reference them appropriately from /gif/XXX/mystyle.css).
• For best results, include any stylesheets that may be present in the stores standard Kagi template (ex. /gif/OPTION7/ocean/styles.css ).
• Put your customers at ease with Kagi's SSL Certificate Seal provided by IPSCA and Ambiron TrustWave. Just place "<table>{digitalId}</table>"where you want these seals to appear.
• Provide Kagi's standard navigation menu for security reassurance, language preference, and additional help using the Kagi system. Typically, you would find this menu along the left-hand side of the standard Kagi look.
  • {menuContent} — Inserts HTML code for the Security, Language, and Help menus. This tag should be wrapped with table tags like so: <table>{menuContent}</table>
  • {securityMenu} — Inserts HTML code for the Security Menu. This tag should be wrapped with table tags like so: <table>{securityMenu}</table>
  • {languageMenu} — Inserts HTML code for the Language Menu. This tag should be wrapped with table tags like so: <table>{languageMenu}</table>
  • {helpMenu} — Inserts HTML code for the Help Menu. This tag should be wrapped with table tags like so: <table>{helpMenu}</table>
• Other insertion options:
  • {%pageTitle%} — Inserts the phrase "Kagi Online Order Processing." Usually used for the title tags in templates as shown in the example above.
  • {%copyright%} — Inserts the Kagi copyright date
  • {%version%} — Inserts the Kagi Store version number

Remember the "View Cart" Icon

When designing the layout of your online store, please take into consideration the "View Cart" graphic and link (pictured to the right). This link appears immediately above your product listings. The automatically generated code for the view cart graphic is:

<div style="padding-left:350px;" align="left">
<a href="?storeID=ABC&currency=USD&lang=en&view=cart">
<img src="/gif/cart.gif" width="30" height="25" alt="view cart" align="absmiddle" border="0">View Cart</a>
</div>

The Dress Rehearsal

To double check that your images are uploaded and referenced correctly and that your template will look the way you expect it to, try placing the code <base href="http://store.kagi.com/" /> in the <head> of your html, then preview your page in a variety of web browsers. This <base> tag, tells the browser to look at Kagi's store server for your graphics and styles. If an image is missing, or your page loads without styles, check the following:

• Does your HTML code reference your graphics and stylesheets correctly following the guidelines above?
• Are the graphics and stylesheets missing from the Kagi store server? If so, upload these missing elements.

Remember to remove (or "comment out") the <base> tag before sending us your template.

Installation

Once you create your custom template, name it template_xxxxx.html, where xxxxx is your Supplier ID number, and send it to oocs@kagi.com. Typically, your template will be examined and installed within one business day.