Confirmation Page, Thank You Page, and E-Mail Receipt Templates:
Billing and Shipping Addresses

When you use the [-- SC_Address --] tag on the Confirmation Page, Thank You Page, and E-Mail Receipt, it displays the address information that the customer entered on the Shipping Page. You cannot control the contents, but you do have some control over the display:

You can use the Vertical parameter to force the billing address to be displayed above the shipping address, like this: [-- SC_Address Vertical --].

Confirmation Page Example: Billing and Shipping Addresses

The Thank You Page and E-Mail Receipt use the same tags shown here for the Confirmation Page.

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

<title>Confirm Your Order</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 --]

[-- ConfirmationHeader --]

# Start the confirmation 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>

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

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

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

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

</table>

</form>

[-- ConfirmationFooter --]

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

Shipping and Billing Address CSS

The Confirmation Page and the Thank You page both look better when a CSS style sheet is used to give a little color and space. Many E-Mail client programs can also apply a style sheet to a message, so you may want to include a style sheet in the E-Mail Receipt. The CSS selectors for the address information are a subset of those used on the Shipping Page.

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_val	Cells containing text input fields for address values.

This example Confirmation page template includes an embedded CSS style sheet and some horizontal rules to visually separate the information on the page.

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

<title>Confirm Your Order</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 --];
}

/***********************/
/***  Hyperlinks     ***/
/***********************/
a:link { 
  color: #[-- STORE.SC_LinkColor --];
}
a:visited { 
  color: #[-- STORE.SC_VisitedLinkColor --];
}
a:hover { 
  color: #[-- STORE.SC_LinkColor --];
}
a:active { 
  color: #[-- STORE.SC_ActiveLinkColor --];
}

/**********************************/
/***  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;
  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 --];
}

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


/***********************/
/***  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: 0px;
  margin-right: auto;
}

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: left;
}

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

td.addr_val {
  text-align: left;
}

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

td.sql_addr {
  padding-right: 15px;
}

/*************************************/
/***  Ordering Instructions Table  ***/
/*************************************/
table.instruct {
  padding-bottom: .5em;
}

td.instruct_hdr {
  font-weight: bold;
  text-align: center
}

/**********************************/
/***  Comments/More Info Table  ***/
/**********************************/
table.comm {
  padding-bottom: .5em;
}

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

table.CustomHTML {
  text-align: center;
  padding-bottom: .5em;
}

td.email {
  text-align: center;
  padding-bottom: .5em;
}

</style>

</head>

<body>

[-- ShopSiteMessages --]

[-- ConfirmationHeader --]

# Start the confirmation 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>

  <tr><td align="center"><hr noshade size="2"></td></tr>

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

  <tr><td align="center"><hr noshade size="2"></td></tr>

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

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

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

  <tr><td align="center"><hr noshade size="2"></td></tr>

</table>

</form>

[-- ConfirmationFooter --]

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

Next: Confirmation & Thank You Payment

Confirmation Page, Thank You Page, and E-Mail Receipt Templates:Billing and Shipping Addresses

Confirmation Page Example: Billing and Shipping Addresses

Shipping and Billing Address CSS

Check These Out

Top Template Tips

Update Your Templates

Confirmation Page, Thank You Page, and E-Mail Receipt Templates:
Billing and Shipping Addresses