 |
Advanced Settings and Options
Including the Search Function in Your Website
The search function can take two different formats. It can be used as basic keyword search, in this mode after a query as been entered by the customer, the search function looks for matches in the keywords that are in your database. It can also be used to find products between pre-set price ranges, this makes it possible for a customer to search our widget store for products that are between $55 and $100 or any other pre-set values.
Basic Keyword Search
To set up the search function to use keywords we implement the following HTML code into our page:
(example 1.3)
<form method='post' action='http://widget.MercuryCart.com/widget/files/search.html'>
<table width=‘380’ border=‘0’>
<tr>
<td width=‘376’> Keyword Search:
<input type='text' name='keywords' size='30'>
<input type='hidden' name='search_type' value='keyword' ></td>
</tr><tr>
<td><input type='submit' value='Search Now'></td>
</tr>
</table>
</form>
As we see from the code above the search box is nested in a HTML form tag. It is important that the form method is set to POST and the action value is set to the page that processes the request.
The next mandatory item is the text field:
<input type='text' name='keywords' size='30'>
It is important to note that the text field must be named ‘keywords’ the spelling and case are important, it must be in lowercase and can not contain any other letters or characters.
Since we are not using the price search option in this example we need to put in a hidden field :
<input type='hidden' name='search_type' value='keyword' >
This tells the cart what type of search is being carried out, again the spelling and case are important.
The final item that is needed to make this search function work is a submit button:
<input type='submit' value='Search Now'>
The value of this can be set to what ever you wish your customers to see, but we would suggest a meaningful name like Search or Search this Site. The form can then be closed off with a HTML closing </form> tag.
Advanced Search by Price Function
To give your customers the option of either searching by keyword or price range we would implement the following HTML code:
(example 1.4)
<form method='post' action='http://widget.MercuryCart.com/widget/files/search.html'>
<table border='0'>
<tr>
<td> Keyword Search:
<input type='radio' name='search_type' value='keyword' checked> <input type=text name='keywords' size='40'></td>
</tr><tr>
<td>
<input type='radio' name='search_type' value='pricerange'> Price Range Search: Between
<select name='searchpricefrom'>
<option value=''>Select From</option>
<option value='0'>$0</option>
<option value='10'>$10</option>
<option value='70'>$70</option>
<option value='90'>$90</option>
<option value='100'>$100</option>
<option value='1000'>$1000</option>
</select>
and
<select name='searchpriceto'>
<option value=''>Select From</option>
<option value='0'>$0</option>
<option value='10'>$10</option>
<option value='90'>$90</option>
<option value='100'>$100</option>
<option value='150'>$150</option>
<option value='1000'>$1000</option>
</select></td>
</tr><tr>
<td><input type='submit' value='Search Now'></td>
</tr>
</table>
</form>
While this may look a little complex to users that are new to web design, it’s only adds a couple of extra settings to the code in example 1.3.
Again we start the code off with a HTML form tag.
<form method='post' action='http://widget.MercuryCart.com/widget/files/search.html'>
This contains the same method and action as the simple search in the earlier example 1.3.
We also need a method of allowing the customer to select whether they wish to search using keywords OR price range, we do this by using radio buttons.
<input type='radio' name='search_type' value='keyword' checked> Keyword Search
<input type='radio' name='search_type' value='pricerange'> Price Range Search: Between
The standard “Keyword Search” is selected here by default, but by selecting the “Price Range” checkbox the search is switched to searching between the specified values in the dropdown list.
Like all form fields it is important to ensure that the name and value parameters are named as in this example. We then follow this with the two drop down boxes that define the minimum price and the maximum price ranges.
<select name='searchpricefrom'>
<option value=''>Select From</option>
<option value='0'>$0</option>
<option value='10'>$10</option>
<option value='70'>$70</option>
<option value='90'>$90</option>
<option value='100'>$100</option>
<option value='1000'>$1000</option>
</select>
The HTML code above selects the “searchpricefrom” from a dropdown box, the code for the maximum price dropdown box is the same except for the name of the select tag which instead of being searchpricefrom is named searchpriceto.
To add your own values in the minimum and maximum price field you would just insert the following code between the Select tags:
<option value='20'>$20</option>
Again the form is closed off with a </form> tag. Of course for the search to work on Keywords, the keywords will have had to be have added to your database, by either using the product manger online or offline function.
Adding Multiple Products with One Form Field.
It is possible to add multiple products to the cart at once. The benefit of this could be, if you have a range of products that are all related under a general heading, but all the products are different prices, and are all nested in the same form tag you would use this feature to pass different quantities of the products to the cart, let’s highlight this by using the following example:
The Widget store sells a range of Widget products with rubber grips, the range includes 4 different products: Standard Grips, Deluxe Grips, Super Grips and Premiere Grips. The basic HTML code to include this in your page would be as follows:
(example 1.5)
<form action=" http://widget.MercuryCart.com/widget/files/index.html" method="post">
<input type='hidden' name='code1' value='7384'> Standard Grips - <input type=text name='qty1' value='1' size='3'>
<input type='hidden' name='code2' value='7388'> Deluxe Grips -
<input type=text name='qty2' value='1' size='3'>
<input type='hidden' name='code3' value='9844'> Super Grips -
<input type='text' name='qty3' value='1' size='3'></td>
<input type='hidden' name='code4' value='6329'> Premiere Grips -
<input type='text' name='qty4' value='1' size='3'></td>
<input type='submit' value='Add to Cart'>
<input type='hidden' name='multi' value='on'>
<input type='hidden' name='action' value='add'></td>
</form>
While it appears to be the same as the code for the adding of a standard product there are a couple of differences. It is important to tell the cart that the information being passed is for multiple products, this makes the cart bind the products together. To do this we add a Hidden field inside the form tag like so:
<input type='hidden' name='multi' value='on'>
The naming of the code values and qty values is also very important, since the cart will bind the hidden field with the name of “code2” to the hidden field with the name of “qty2”. In the example above you can see the product Super Grips the name of the field is “code3” and carries the value of your sku number you will notice the name of the “qty” box is called “qty3”, the cart will then bind together this product when multi is set to on.
Adding a Product With Multiple Options
Let’s say that you have a product that can be ordered in different colours or with any other options for that matter, this feature allows the expanding of options to a product. In this example we shall use our Widget store to highlight this feature.
The Widget Store offers their Super Widget in a choice of colours: Red, Blue or Green, to allow the carrying of options to the cart the following HTML code would be used:
<form action=" http://widget.MercuryCart.com/widget/files/index.html" method="post">
Super Widget <br>
Qty <input type='text' name=qty value='1' size=3><br>
Colour:
<select name='option1'>
<option value='colour: red' selected>Red</option>
<option value='colour: blue'>Blue</option>
<option value='colour: green'>Green</option>
</select>
<input type='submit' value='Add to Cart'>
<input type='hidden' name='action' value='add'>
<input type='hidden' name='code' value='7388'>
</form>
What we have here is much the same as in the basic add to cart. We have the input box that allows the user to modify the quantity of products to be purchased, we have two hidden fields one carrying the product code and the other telling the cart to add the product.
<input type='hidden' name='action' value='add'>
<input type='hidden' name='code' value='7388'>
The only real difference is the presence of a dropdown box in which the customer can choose what colour to order. It is important to have the name of the select tag set to option1, this will be of increasing importance later when we add more possible values that the customer may select.
<select name='option1'>
<option value='colour: red' selected>Red</option>
<option value='colour: blue'>Blue</option>
<option value='colour: green'>Green</option>
</select>
Note: Before you can use this option you must first pre-select how many possible options each product is allowed. This can be done via the Product Manager > View /Edit / Delete Products and then select the product you wish to add the values to, or it can be configured by downloading your product list and carrying out the modifications in a spreadsheet application such as Microsoft Excel.
Now that we have successfully added the option in which the customer can select which colour of Widget they would like to purchase, it is also possible to add any number of other options. In the next example we will modify the above code to give the customer the option of selecting Gift Wrapping, Product Finish, Ribbon, and also Custom Engraving.
(example 1.6)
<form action=" http://widget.MercuryCart.com/widget/files/index.html" method="post">
<p>
Super Widget <br>
Oty <input type=text name='qty' value='1' size=3>
</p>
<p>
Colour:
<select name='option1'>
<option value="colour: red">Red</option>
<option value='colour: blue'>Blue</option>
<option value='colour: green'>Green</option>
</select>
</p>
<p>
Finish<br>
<input type='radio' name='option2' value='Finish-Matt'> Matt<br>
<input type='radio' name='option2' value='Finish-Gloss'> Gloss<br>
<input type='radio' name='option2' value='Finish-Eggshell'> Eggshell
</p>
<p>
Add On's:<br>
<input type='checkbox' name='option3' value='Add-on - gift wrapping'> Gift Wrapping<Br>
<input type='checkbox' name='option4' value='Add-on - ribbon'> Ribbon<br>
<input type='checkbox' name='option5' value='Add-on - engraving'> Special Engraving (enter below)<Br>
Engraving (25 characters only): <input type='text' name='option6' value='' size='25' maxlength='255'>
<input type='submit' value='Add to Cart'>
</p>
</form>
What we have below is a selection of radio buttons that allow the customer to select the type of finish they would like. Since only one radio button can be selected we assign a value of “option2” to the name, which ever one the customer selects is the value that will be passed to the cart. We can however have as many radio buttons as we wish.
<input type='radio' name='option2' value='Finish-Matt'> Matt
<input type='radio' name='option2' value='Finish-Gloss'> Gloss
<input type='radio' name='option2' value='Finish-Eggshell'> Eggshell
The next example of code allows the customer to select other options such as Gift Wrapping, Engraving and adding a Ribbon. These are done selected using checkboxes since it’s quite possible that a customer may wish to select more than one option, we therefore give each selection box a different option value.
<input type='checkbox' name='option3' value='Add-on - gift wrapping'>Gift Wrapping
<input type='checkbox' name='option4' value='Add-on - ribbon'>Ribbon
<input type='checkbox' name='option5' value='Add-on - engraving'>Special
Engraving (enter below)
Engraving (25 characters only): <input type='text' name='option6' value='' size='25' maxlength='255'>
Of course your options will be different from the ones in this example, but the above code demonstrates the passing of values using radio buttons, checkboxes, dropdown lists and text fields.
Adding Multiple Products With Multiple Options
In this next example we will add multiple products to the cart and each product will have multiple options assigned to it. In essence this is just a combination of adding a product with options (as in the last example ) and the adding of multiple products.
The HTML code in the next example details our Widget store in which the products “ Super Widgets” and “ Deluxe Widgets “ share the same HTML form field. Each product is available to the customer with the following options:
The product type
Product colour
Product finish
Gift Wrapping
Ribbon
Engraving
The HTML code used to do this is as follows, since it’s getting a little more complex we shall analyze the code in sections, but first here is the code in its entirety
(example 1.7)
<form action=" http://widget.MercuryCart.com/widget/files/index.html" method="post">
<p>
<input type='hidden' name='multi' value='on'>
<input type='hidden' name='action' value='add'>
<input type='hidden' name='code1' value='7388'>
Multiple Widget add to cart with options<br>
Super Widget <br>
Qty
<input type=text name=qty1 value='1' size=3>
</p>
<p> Colour:
<select name='option1_1'>
<option value="colour: red">Red</option>
<option value='colour: blue'>Blue</option>
<option value='colour: green'>Green</option>
</select>
</p>
<p><br>
Finish:<br>
<input type='radio' name='option1_2' value='Finish: Matt'> Matt <br>
<input type='radio' name='option1_2' value='Finish: Gloss'> Gloss<br>
<input type='radio' name='option1_2' value='Finish: Eggshell'> Eggshell </p>
<p>Add On's:<br>
<input type='checkbox' name='option1_3' value='Add-on - gift wrapping'> Gift Wrapping<br>
<input type='checkbox' name='option1_4' value='Add-on - engraving'> Special Engraving (enter below)<Br>
<input type='checkbox' name='option1_5' value='Add-on - ribbon'> Ribbon <br>
Engraving (25 characters only): <input type='text' name='option1_6' value='' size=25 maxlength=255>
</p>
<hr align="left" width="400">
<!--Start Product No.2 -->
<p>
<input type='hidden' name='code2' value='3dmax4'>
Deluxe Widget -<br>
Qty
<input type='text' name=qty2 value='1' size=3>
</p>
<p>Colour:
<select name='option2_1'>
<option value="colour: red">Red</option>
<option value='colour: blue'>Blue</option>
<option value='colour: green'>Green</option>
</select>
</p>
<p>Finish:<br>
<input type='radio' name='option2_2' value='Finish: Matt'> Matt <br>
<input type='radio' name='option2_2' value='Finish: Gloss'> Gloss <br>
<input type='radio' name='option2_2' value='Finish: Eggshell'> Eggshell
</p>
<p>Add On's:<br>
<input type='checkbox' name='option2_3' value='Add-on - gift wrapping'> Gift Wrapping<br>
<input type='checkbox' name='option2_4' value='Add-on - engraving'> Special Engraving (enter below)<br>
<input type='checkbox' name='option2_5' value='Add-on - ribbon'> Ribbon <br>
Engraving (25 characters only): <input type=text name='option2_6' value='' size='25' maxlength='255'>
</p>
<p>
<input type='submit' value='Add to Cart'>
</p>
</form>
Let’s break the above code down into easy to understand sections:
As with all the products that are being added to the cart we start with an HTML form field in which the method is set to post and the action to the path of your cart.
<form action=" http://widget.MercuryCart.com/widget/files/index.html" method="post">
We make sure that we insert the following two hidden fields to instruct the cart what to do with the values that are being passed to it.
<input type='hidden' name='multi' value='on'>
<input type='hidden' name='action' value='add'>
A hidden field containing the product code of the first item is inserted into the code.
Note the name of the Hidden field is “code1”, this allows the cart to bind all the options to one product.
<input type='hidden' name='code1' value='7388'>
We add a text field to take the value for the quantity of products being ordered,
<input type=text name=‘qty1’ value='1' size=3>
The first set of options for product one ( Super Widget) are next, which allows the colour to be selected, this is achieved using a dropdown box. Notice the format of the name in the select tag (<select name='option1_1'> ) this tells the cart that this option belongs to product 1 and it is the first option, hence the name 1_1.
Colour:
<select name='option1_1'>
<option value="colour: red">Red</option>
<option value='colour: blue'>Blue</option>
<option value='colour: green'>Green</option>
</select>
We add the second group of options in the form of radio buttons. Again notice the naming convention, this time it is set to 1_2, meaning this option belongs to the product with the value of “code1” and it is the 2nd set of options. Since the options are selected by the use of radio buttons, and only one of the buttons can be selected each one can carry the same name, this would not work with checkboxes and people new to HTML often get confused with radio buttons and checkboxes.
Finish:<br>
<input type='radio' name='option1_2' value='Finish: Matt'> Matt <br>
<input type='radio' name='option1_2' value='Finish: Gloss'> Gloss<br>
<input type='radio' name='option1_2' value='Finish: Eggshell'> Eggshell </p>
The last set of options that we have in the code are the add on items. As before we have used checkboxes here, by nature of the design of checkboxes it’s possible to select more than one, with this in mind each one is treated separately and a totally unique value is assigned to the name, in this case they are numbered 1 through to 6 but so the cart knows to bind the products, we have kept the first part of each value as 1_.
Add On's:<br>
<input type='checkbox' name='option1_3' value='Add-on - gift wrapping'> Gift Wrapping<br>
<input type='checkbox' name='option1_4' value='Add-on - engraving'> Special Engraving (enter below)<Br>
<input type='checkbox' name='option1_5' value='Add-on - ribbon'> Ribbon <br>
Engraving (25 characters only): <input type='text' name='option1_6' value='' size=25 maxlength=255>
The second product is much the same as the first, the differences are in that where the first item add a product code of “code1” the second product has “code2” the same would apply for all the option fields, where a value in product one was listed as 1_5 it would of course be 2_5.
You can have as many multiple products as you wish you are not limited to just two. If you added a third product the product code would be “code3” and all the subsequent values would start with a 3_ and then would then be followed with the option number I.E 3_1, 3_2, 3_3 and so on .
Adding a Custom Look to Your Cart - Advanced
There are many points to using the advanced settings, and only people with a good working knowledge of CSS and HTML should use this feature. By using the Advanced option you can overwrite most of the default settings, add JavaScript to the head of the page, import custom HTML and also include a Secure site certificate.
Before using this feature it’s important to point out a couple of aspects.
1. Any images that are to be used should be uploaded to the cart, calling a image that is outside of a secure folder will result in the shopper being given the message “ This page contains insecure items” , not a good idea when you wish to gain the trust of people using your site.
2. To allow your cart to fit into the theme of your website, offer customization and speed, the page displayed is made up of three different sections, the Header which contains the code down to the start of the Bread Crumb (if used ), the centre which goes just above the table with the products that have been added to the cart, and the footer which may contain address and email details and also the closing tags for the HTML code.
Detailed below is an example of a custom script, note the comments in the HTML code, as these indicate the different areas:
3. Different Sections of the Admin area are used to control the 3 different areas of the cart page.
The 3 sections that control the look can be found in the following sections:
Cart Header: Appearance > General Settings
Cart Page : Appearance > Cart Page
Cart Footer : Appearance > Cart Footer
The code below is just to give you guidance on and to highlight how the code is fragmented over the 3 different sections.
Cart Header:
<!- - Start the Custom Header, input from the Gen Settings - ->
<html>
<head>
<script language='JavaScript' src='https://secure.comodo.net/trustlogo/javascript/trustlogo.js'></script>
<title>Widget World Shopping Cart</title>
<style type='text/css'>
<!--
.body { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight:
bold; colour: #D68E16; padding-left: 5px; }
td { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight:
bold; colour: #D68E16; padding-left: 5px; }
.checkouttable { text-align: centre; background-colour: #fafafa; border:
1px #d79900 solid; border-collapse: collapse; border-spacing: 0px; }
.scheader { font-family: Arial, Helvetica, sans-serif; font-size:
12px; font-weight: normal; colour: #FFCCCC; padding-left: 5px; }
.scproducts { font-family: "Verdana, Arial, Helvetica, sans-serif";font-size:
12px;font-style: normal;font-weight: normal;color: #ffffff;text-decoration: ;}
.error { font-family: "Verdana, Arial, Helvetica, sans-serif";font-size:
12px;font-style: normal;font-weight: bold;color: #FF0000;text-decoration: ; }
.bc { font-family: "Arial, Helvetica, sans-serif";font-size:
10px;font-style: normal;font-weight: bolder;color: #FF0033;text-decoration: ; }
.bc_current { font-family:Arial, Helvetica, sans-serif;
color:#FF0000; padding-bottom: 18px; }
.tableborder { border-bottom: 1px solid #cccccc; border-left:
1px solid #cccccc; border-right-colour: #cccccc; border-right-style:
solid; border-right-width: 1px; }
.body1 { font-family: Arial, Helvetica, sans-serif; font-size:
12px; font-weight: bold; colour: #D68E16; padding-left: 5px; }
.body2 { font-family: Arial, Helvetica, sans-serif; font-size:
12px; font-weight: bold; colour: #D68E16; padding-left: 5px; }
.body3 {font-family: Arial, Helvetica, sans-serif; font-size:
12px; font-weight: bold; colour: #D68E16; padding-left: 5px; }
-->
</style>
</head>
<body bgcolor='#FFFFFF' text='#000000' link='#0000CC' vlink='#9933CC' alink='#990000' topmargin='0' marginheight='0' leftmargin='0' marginwidth='0'>
<div align='centre' class=body>
<table width='779' border='0' align='centre' cellpadding='0' cellspacing='0'>
<tr>
<td width='460' height='9' colspan='2' valign='top'>
<table border='0' cellpadding='0' cellspacing='0' width='779'>
<tr>
<td><img src='https://widget.MercuryCart.com/imagearchive/spacer.gif' width='86' height='1' border='0'></td>
<td><img src='https://widget.MercuryCart.com/imagearchive/spacer.gif' width='106' height='1' border='0'></td>
<td><img src='https://widget.MercuryCart.com/imagearchive/spacer.gif' width='88' height='1' border='0'></td>
<td><img src='https://widget.MercuryCart.com/imagearchive/spacer.gif' width='73' height='1' border='0'></td>
<td><img src='https://widget.MercuryCart.com/imagearchive/spacer.gif' width='128' height='1' border='0'></td>
<td><img src='https://widget.MercuryCart.com/imagearchive/spacer.gif' width='33' height='1' border='0'></td>
<td><img src='https://widget.MercuryCart.com/imagearchive/spacer.gif' width='43' height='1' border='0'></td>
<td><img src='https://widget.MercuryCart.com/imagearchive/spacer.gif' width='68' height='1' border='0'></td>
<td><img src='https://widget.MercuryCart.com/imagearchive/spacer.gif' width='154' height='1' border='0'></td>
<td><img src='https://widget.MercuryCart.com/imagearchive/spacer.gif' width='1' height='1' border='0'></td>
</tr><tr>
<td rowspan='4'><img name='newheader_r1_c1' src='https://widget.MercuryCart.com/imagearchive/new-header_r1_c1.jpg' width='86' height='92' border='0'></td>
<td rowspan='4'><img name='newheader_r1_c2' src='https://widget.MercuryCart.com/imagearchive/new-header_r1_c2.jpg' width='106' height='92' border='0'></td>
<td><img name='newheader_r1_c3' src='https://widget.MercuryCart.com/imagearchive/new-header_r1_c3.gif' width='88' height='29' border='0'></td>
<td colspan='2'><img name='newheader_r1_c4' src='https://widget.MercuryCart.com/imagearchive/new-header_r1_c4.gif' width='201' height='29' border='0'></td>
<td colspan='4'><img src='https://widget.MercuryCart.com/imagearchive/new-header_r1_c6.gif' name='newheader_r1_c6' width='298' height='29' border='0' href='http://www.widgetworld.com/photoshop.htm'></td>
<td><img src='https://widget.MercuryCart.com/imagearchive/spacer.gif' width='1' height='29' border='0'></td>
</tr><tr>
<td colspan='3'><img name='newheader_r2_c3' src='https://widget.MercuryCart.com/imagearchive/new-header_r2_c3.gif' width='289' height='24' border='0'></td>
<td colspan='2'><img name='newheader_r2_c6' src='https://widget.MercuryCart.com/imagearchive/new-header_r2_c6.gif' width='76' height='24' border='0'></td>
<td colspan='2'><img name='newheader_r2_c8' src='https://widget.MercuryCart.com/imagearchive/new-header_r2_c8.gif' width='222' height='24' border='0'></td>
<td><img src='https://widget.MercuryCart.com/imagearchive/spacer.gif' width='1' height='24' border='0'></td>
</tr><tr>
<td rowspan='2'><img name='newheader_r3_c3' src='https://widget.MercuryCart.com/imagearchive/new-header_r3_c3.gif' width='88' height='39' border='0'></td>
<td rowspan='2' colspan='2'><img name='newheader_r3_c4' src='https://widget.MercuryCart.com/imagearchive/new-header_r3_c4.gif' width='201' height='39' border='0'></td>
<td rowspan='2' colspan='2'><img name='newheader_r3_c6' src='https://widget.MercuryCart.com/imagearchive/new-header_r3_c6.gif' width='76' height='39' border='0'></td>
<td colspan='2'><a href='http://widget.MercuryCart.com/files/index.html'> <img name='newheader_r3_c8' src='https://widget.MercuryCart.com/imagearchive/new-header_r3_c8.gif' width='222' height='18' border='0'></a></td>
<td><img src='https://widget.MercuryCart.com/imagearchive/spacer.gif' width='1' height='18' border='0'></td>
</tr><tr>
<td colspan='2'><img name='newheader_r4_c8' src='https://widget.MercuryCart.com/imagearchive/new-header_r4_c8.gif' width='222' height='21' border='0'></td>
<td><img src='https://widget.MercuryCart.com/imagearchive/spacer.gif' width='1' height='21' border='0'></td>
</tr><tr>
<td><a href='http://www.widgetworld.com/home.htm'> <img src='https://widget.MercuryCart.com/imagearchive/new-header_r5_c1.gif' name='newheader_r5_c1' width='86' height='24' border='0'></a></td>
<td><a href='http://www.widgetworld.com/products.htm'> <img src='https://widget.MercuryCart.com/imagearchive/new-header_r5_c2.gif' name='newheader_r5_c2' width='106' height='24' border='0'></a></td>
<td colspan='2'><a href='http://www.widgetworld.com/company.htm'> <img src='https://widget.MercuryCart.com/imagearchive/new-header_r5_c3.gif' name='newheader_r5_c3' width='161' height='24' border='0'></a></td>
<td colspan='2'><a href='http://www.widgetworld.com/overview.htm'> <img src='https://widget.MercuryCart.com/imagearchive/new-header_r5_c5.gif' name='newheader_r5_c5' width='161' height='24' border='0'></a></td>
<td colspan='2'> <a href='http://www.widgetworld.com/productlist.htm' target='_blank'><img name='newheader_r5_c7' src='https://widget.MercuryCart.com/imagearchive/new-header_r5_c7.gif' width='111' height='24' border='0'></a></td>
<td><a href='http://www.widgetworld.com/region.htm'> <img src='https://widget.MercuryCart.com/imagearchive/new-header_r5_c9.gif' name='newheader_r5_c9' width='154' height='24' border='0'></a></td>
<td><img src='https://widget.MercuryCart.com/imagearchive/spacer.gif' width='1' height='24' border='0'></td>
</tr>
</table></td>
</tr>
</table>
<table width='760' border='0' align='centre' cellpadding='0' cellspacing='0' class='tableborder'>
<tr>
<td></td>
</tr><tr>
<td align='centre'><span class='body2'>
<!-- End Custom Header Code -->
Cart Page:
<!--Add this to cart page this adds a nice colour box above the cart table -->
</td>
</tr><tr>
<td>
<table width='744' border='0' cellspacing='0' cellpadding='0'>
<tr>
<td height='23' bgcolor='#FCEEC7' id='3side' class=smallgrey > If you are happy with your purchase click the checkout button below.<br>
To Edit the Quantity of a item enter the new value in the text field and click Edit Qty.<br>
To remove a item from your cart, just click the delete button next to the
item you wish to remove.<br>
Should you need any help please contact us. We are always help to help. </td>
</tr><tr>
<td background='https://widget.MercuryCart.com/aus/imagearchive/1065511235.jpg'> <img src='https://widget.MercuryCart.com/aus/imagearchive/1065511235.jpg' width='27' height='12' border='0' alt='fade-bg.jpg'></td>
</tr>
</table></td>
</tr><tr>
<td align='centre'>
<!-- end cart page-->
Cart Footer:
<!-- Start Custom Footer -->
<!--footer code--></td>
</tr><tr>
<td align='centre'><span class="body3">Widget World <br>
347 Widget Town<br>
Anywhere<br>
Some State
45221<br>
USA<br>
Tel: 555-555-5555 Fax: 555-555-5556<br>
Email <a href="mailto:sales@widgetworld.com">sales@widgetworld</a></span></td>
</tr>
</table>
<br>
<!-- Trust Logo Html Builder Code: Shows the logo at
URL https://widget.MercuryCart.com/imagearchive/secure_site.gif Logo type is
Credit Card Payment Logo ("SCAS") Not Floating //-->
<script type="text/javascript">
TrustLogo("https://widget.MercuryCart.com/aus/imagearchive/secure_site.gif ", "SC", "none");</script>
</div>
</body>
</html>
<!-- End the Custom Footer -->
The above code enables the designer to not only set a custom header including images, but also allows control over the overall feel of the page. Some users may also notice that the above code contains the necessary code to include a secure certificate.
Please note that if you wish to configure the background colour or border colour of the table that holds the products / purchases you need to alter the Cart Table colour properties within the Appearance Settings > General Settings > Colour.