Checkout - Shipping Code Sample

Here is some example code and CSS to build the Checkout - Shipping step for the store. This is, of course, an example and you have the flexibility to lay out the page to suit your own design. 

Below is a screenshot of the layout that this code will build.  


Below is the HTML / Branch code that would go in the Template field for the Checkout - Billing content template. 

<p><em>*</em> = required field </p>
{if #shipping.form.errors}
  <ul class="errors">
    {loop items="#shipping.form.errors" value="error"}
<ul id="checkoutsteps">
  <li><a href="{#shipping.urls.cart}">Shopping Cart</a></li>
  <li class="currentstep">Shipping Address</li>
  <li>Billing &amp; Payment</li>
  <li class="last">Receipt</li>
  <h2>Shipping Address</h2>
  <table class="form-tbl" cellspacing="0">
        <th><label for="{}">First Name <em>*</em></label></th>
        <th><label for="{}">Last Name <em>*</em></label></th>
      <th><label for="{}">Address <em>*</em></label></th>
        <th><label for="{}">City <em>*</em></label></th>
        <th><label for="{}">State/Region/Province<em>*</em></label></th>
        <th><label for="{}">Zip/Postal Code<em>*</em></label></th>
        <th><label for="{}">Country <em>*</em></label></th>
        <th><label for="{}">Phone <em>*</em></label></th>
        <th><label for="{}">Email <em>*</em></label></th>
        <td><input type="submit" name="submit" value="Continue &raquo" /></td>


Ideally this CSS would go in your CSS file, however, you could also put it in the Inline CSS textbox for the content template.

#checkoutsteps {list-style: none; margin: 0; padding: 0;}
#checkoutsteps li {font-size: small; display: inline; color: #aaa; padding: 0 10px; border-right: 1px solid #999;}
#checkoutsteps li.currentstep {color: #000;}
#checkoutsteps li.last {border-right: none;}
table.form-tbl {width: 100%;}
table.form-tbl td, table.form-tbl th {padding: 4px 2px;}
table.form-tbl th {width: 160px;}
table.form-tbl input[type="text"], table.form-tbl textarea {width: 75%;}