Shipping Page Templates:
Billing and Shipping Addresses

There is only one custom template tag to produce the address fields on the Shipping Page: [-- SC_Address --]. The merchant can make choices in the back office that affect the look of the output. They may be minor changes, such as choosing not to display certain fields, or major changes, such as choosing to display the billing address above the shipping address instead of beside it. The merchant can also choose to only ship to the billing address, which means that only one set of address fields will be displayed to the customer.

You can use the Vertical parameter to force the billing address to be displayed above the shipping address, like this: [-- SC_Address Vertical --]. The narrower display may fit better if the Shipping Page is displayed inside a frame or if there is other content on the sides of the page.
By default, the field labels are on the left side of each address field. You can have them appear on the right with the [-- SC_Address Right --] tag.

[-- DEFINE Shipping --]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>[-- STORE.Ship_CheckOut --]</title>

<script type="text/javascript" language="JavaScript">
<!-- 
[-- SC_JAVASCRIPT extras --]
// -->
</script>

<style type="text/css">
/***********************/
/***  Page Defaults  ***/
/***********************/
body {
  color: #[-- STORE.SC_TextColor --];
  background-color: #[-- STORE.SC_BackgroundColor --];
  [-- IF STORE.SC_BackgroundImage --]
  background-image: url("[--STORE.SC_BackgroundImage--]");
  [-- END_IF --]
}
</style>

</head>

<body>

[-- ShopSiteMessages --]

[-- ShippingHeader --]

# Start the shipping page form
[-- SC_Form --]

<table border="0" width="0" align="center">
  <tr>
    <td align="right">
      [-- SC_Cart --]
    </td>
  </tr>

  <tr>
    <td align="right">
      [-- SC_Totals --]
    </td>
  </tr>

[-- IF SC_Comments --]
  <tr>
    <td align="center">
      [-- SC_Comments --]
    </td>
  </tr>
[-- END_IF --]

  <tr>
    <td align="left">
      [-- SC_Address --]
    </td>
  </tr>

</table>

</form>

[-- ShippingFooter --]

</body>
</html>
[-- END_DEFINE Shipping --]

Shipping and Billing Address CSS

Each set of address fields is contained within an HTML table. The tables and all cells in the tables have CSS classes that you can define in a style sheet to define the look of the address fields. Here is a list of the CSS selectors used in the shipping and billing address display.

table.addr	Outer table that contains both the billing and shipping addresses.
table.ship_addr	Table containing the shipping address fields.
table.bill_addr	Table containing the billing address fields.
table.addr_name	Table of registered name elements (only present with customer registration).
td.addr_name_val	Cells containing each piece of a registered name (only present with customer registration).
td.bill_addr_hdr	The cell containing the "Billing Address" header text.
td.ship_addr_hdr	The cell containing the "Shipping Address" header text.
td.addr	Cells containing address field labels, such as "First."
td.addr_val	Cells containing text input fields for address values.
input.addr	text input fields for address values.
select.addr	Select list of state or country names.
td.ship_check	Checkbox for shipping same as billing address.
td.addr_foot	Footnote about required fields.

This example is the same as the one above, plus it includes a brief style sheet with selectors for some of the ordering instructions elements.

[-- DEFINE Shipping --]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>[-- STORE.Ship_CheckOut --]</title>

<script type="text/javascript" language="JavaScript">
<!-- 
[-- SC_JAVASCRIPT extras --]
// -->
</script>

<style type="text/css">
/***********************/
/***  Page Defaults  ***/
/***********************/
body {
  color: #[-- STORE.SC_TextColor --];
  background-color: #[-- STORE.SC_BackgroundColor --];
  [-- IF STORE.SC_BackgroundImage --]
  background-image: url("[--STORE.SC_BackgroundImage--]");
  [-- END_IF --]
}
/**********************************/
/***  Table of Products (Cart)  ***/
/**********************************/
table.cart {
  width: 100%;
  padding-top: 1em;
  border-collapse: separate;
  border-spacing: 3px;
}

th {
  text-align: center;
}

td.cart_quantity, td.cart_cp_quantity {
  padding: 3px;
  width: 70px;
  text-align: center; 
  background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_name, td.cart_cp_name {
  padding: 3px;
  text-align: left; 
  background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_sku, td.cart_cp_sku {
  padding: 3px;
  text-align: left; 
  background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_price, td.cart_cp_price {
  padding: 3px;
  font-style: italic;
  text-align: right; 
  background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_total, td.cart_cp_total {
  padding: 3px;
  text-align: right; 
  background-color: #[-- STORE.SC_ShadeColor --];
  white-space: nowrap;
}

td.cart_op {
  padding: 3px;
  text-align: left; 
  background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_op1, td.cart_op2 {
  padding: 3px;
  background-color: #[-- STORE.SC_ShadeColor --];
}

/***************************************/
/***          Table of Totals        ***/
/***  Subtotal, Tax, Shipping, etc.  ***/
/***************************************/
table.totals {
  color: #[--STORE.SC_TextColor--];
  vertical-align: middle; 
  line-height: 150%;
}

td.totals_txt, td.totals_all_txt {
  text-align: right;
  padding-right: 15px;
}

td.totals, td.totals_all {
  text-align: right;
  padding-right: 3px;
}

td.totals_all, td.totals_all_txt {
  font-weight: bold;
}

/**********************************/
/***  Comments/More Info Table  ***/
/**********************************/
table.comm {
  margin-left:auto;
  margin-right:auto;
  text-align: center;
}

td.comm_hdr {
  font-weight: bold;
  text-align: left;
}

/***********************/
/***  Address Table  ***/
/***********************/
table.addr { /* outer table that contains both billing and shipping addresses */
  color: #[-- STORE.SC_TextColor --];
}

table.bill_addr, table.ship_addr {   /* inner table for billing and shipping address */
  margin-left: auto;
  margin-right: 0px;
}

table.addr_name { /* table of registered name elements */
  margin-left: -4px;
  margin-right: auto;
}

td.bill_addr_hdr, td.ship_addr_hdr {
  font-weight: bold;
  text-align:center;
}

td.addr {
  text-align: right;
  padding-right: 5px;
}

td.addr_val {
  text-align: left;
}

td.ship_check {   /* checkbox for shipping same as billing */
  text-align:left;
}

td.addr_foot {    /* footnote about required fields */
  font: bold smaller Arial;
  text-align: center;
}

td.sql_addr {
  padding-right: 15px;
}
</style>

</head>

<body>

[-- ShopSiteMessages --]

[-- ShippingHeader --]

# Start the shipping page form
[-- SC_Form --]

<table border="0" width="0" align="center">
  <tr>
    <td align="right">
      [-- SC_Cart --]
    </td>
  </tr>

  <tr>
    <td align="right">
      [-- SC_Totals --]
    </td>
  </tr>

[-- IF SC_Comments --]
  <tr>
    <td align="center">
      [-- SC_Comments --]
    </td>
  </tr>
[-- END_IF --]

  <tr>
    <td align="center">
      [-- SC_Address --]
    </td>
  </tr>

</table>

</form>

[-- ShippingFooter --]

</body>
</html>
[-- END_DEFINE Shipping --]

Next: Checkout Payment Tags

Shipping Page Templates:Billing and Shipping Addresses

Shipping and Billing Address CSS

Check These Out

Top Template Tips

Update Your Templates

Shipping Page Templates:
Billing and Shipping Addresses