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.  

HTML:

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

<h1>Checkout</h1>
<p><em>*</em> = required field </p>
{if #shipping.form.errors}
  <ul class="errors">
    {loop items="#shipping.form.errors" value="error"}
      <li>{#error.message}</li>
    {/loop}
  </ul>
{/if}
<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>Confirmation</li>
  <li class="last">Receipt</li>
</ul>
{#shipping.form.tag.open}
  <h2>Shipping Address</h2>
  <table class="form-tbl" cellspacing="0">
    <tbody>
      <tr>
        <th><label for="{#shipping.form.fields.shipFirstName.id}">First Name <em>*</em></label></th>
        <td>{#shipping.form.fields.shipFirstName.tag}</td>
      </tr>
      <tr>
        <th><label for="{#shipping.form.fields.shipLastName.id}">Last Name <em>*</em></label></th>
        <td>{#shipping.form.fields.shipLastName.tag}</td>
      </tr>
      <tr>
      <th><label for="{#shipping.form.fields.shipAddress.id}">Address <em>*</em></label></th>
        <td>{#shipping.form.fields.shipAddress.tag}</td>
      </tr>
      <tr>
        <th><label for="{#shipping.form.fields.shipCity.id}">City <em>*</em></label></th>
        <td>{#shipping.form.fields.shipCity.tag}</td>
      </tr>
      <tr>
        <th><label for="{#shipping.form.fields.shipStateText.id}">State/Region/Province<em>*</em></label></th>
        <td>{#shipping.form.fields.shipStateText.tag}</td>
      </tr>
      <tr>
        <th><label for="{#shipping.form.fields.shipZipCode.id}">Zip/Postal Code<em>*</em></label></th>
        <td>{#shipping.form.fields.shipZipCode.tag}</td>
      </tr>
      <tr>
        <th><label for="{#shipping.form.fields.shipCountry.id}">Country <em>*</em></label></th>
        <td>{#shipping.form.fields.shipCountry.tag}</td>
      </tr>
      <tr>
        <th><label for="{#shipping.form.fields.shipPhone.id}">Phone <em>*</em></label></th>
        <td>{#shipping.form.fields.shipPhone.tag}</td>
      </tr>
      <tr>
        <th><label for="{#shipping.form.fields.shipEmail.id}">Email <em>*</em></label></th>
        <td>{#shipping.form.fields.shipEmail.tag}</td>
      </tr>
      <tr>
        <th>&nbsp;</th>
        <td><input type="submit" name="submit" value="Continue &raquo" /></td>
      </tr>
    </tbody>
  </table>
</form>

CSS:

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%;}