Here is a link to the help for creating a shopping cart template.
http://shopsite.com/help/10.1/en-US/sc/ ... .cart.html
There are 5 main sections in a shopping cart template (and a couple of additional sections to configure cross-sell layout) so setting up a shopping cart template isn't as easy as doing a page or product template.
If you would rather not create your own custom template but would like to customize the look of the default template to match your store you can still do that. I'll explain how below.
First go to Commerce Setup > Order System > Layout Info and select the "sc_default" template.
Next, on each of the Commerce Setup > Order System > (Shopping Cart, Check Out, Confirmation, Thank You, Email) screens are 2 fields that are labeled "Text at the top of the ***** screen" and "Text at the bottom of the ***** screen:". You can put the html code for the top of your page in the "top" field and for your footer in the "bottom" field. Do not include the starting or closing html, head, meta, or body tags as these will be provided by the ShopSite template. From your sample page that you linked to you would probably want to break the code like this.
For the "top" boxes
- Code: Select all
<div align="center">
<table border="0" width="960" id="table62" style="border-collapse: collapse">
<tr>
<td width="581" valign="top">
<h1 style="margin-top: 6px; margin-bottom: 0">
<font face="Verdana" size="2" color="#FFFFFF">FANTASY FOOTBALL STATS,
NEWS & PROJECTIONS</font></h1>
</td>
<td valign="top">
<h1 align="right" style="margin-top: 6px; margin-bottom: 0">
<span style="letter-spacing: 2px">
<font face="Verdana" size="2" color="#FFFFFF">FANTASY FOOTBALL METRICS</font></span></h1>
</td>
</tr>
<tr>
<td valign="top" width="58%">
<p align="left"> </p>
</td>
<td>
<p align="right"><span style="letter-spacing: 0px">
<font face="Verdana" size="1" color="#FFFFFF">fantasyfootballmetrics.com</font></span></p>
</td>
</tr>
</table>
<table border="2" width="960" id="table3" bordercolor="#666666">
<tr>
<td>
<table width="100%" id="table4" style="border-collapse: collapse; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px" bordercolor="#000000" bgcolor="#FFFFFF" border="0">
<tr>
<td>
<table border="0" width="100%" id="table5">
<tr>
<td width="106" valign="top">
<a href="http://fantasyfootballmetrics.com/">
<img border="0" src="images/FFMLogo100px.jpg" width="106" height="100" alt="Fantasy Football Metrics Draft Cheat Sheets, Player Ranking and Projections"></a></td>
<td>
<h1 align="right" style="margin-top: 0; margin-bottom:0">
<font face="Verdana" color="#2D3A4B">Fantasy Football
Metrics </font><font face="Verdana" color="#666666">
Shopping Cart</font></h1>
<h2 align="right" style="margin-top: 0">
<font face="Verdana" size="2" color="#808080">UNIQUE
PLAYER STATS : SCOUT ARTICLES :
TOP PICKS : PROJECTIONS</font></h2>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><hr>
</td>
</tr>
<tr>
<td>
<div align="right">
<table border="0" width="55%" style="border-collapse: collapse" id="table63">
<tr>
For this line you will want to do a little modification
- Code: Select all
<td><font size="2">Shopping Cart Code Here</font></td>
you need to replace "<font size="2">Shopping Cart Code Here</font>" with a table. Open a table in the top section and close the table in the bottom section so the content of the shopping cart will all be included in the table.
so here is the code that would be added at the end of the "top" section (including the <td> that started the line above.
- Code: Select all
<td><table><tr><td>
and this at the beginning of the "bottom" section including the </td> that ended the line above.
- Code: Select all
</td></tr></table></td>
For the "bottom" boxes
- Code: Select all
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
You should include your link to the style sheet at the beginning of the "top" section. Note that since it is using a non-secure http url you will need to modify it to secure https url for the Checkout, Confirmation and Thankyou screens since they will be using a secure url. Also any images that are loaded should also be modified on those screens to have secure url addresses.
- Code: Select all
<link rel="stylesheet" type="text/css" href="http://fantasyfootballmetrics.com/Code/style.css">