Shipping Page Templates:
Customer Comments Box

Merchants can enable a custom comments text box that lets customers type comments or more information for the order. Your template should use the [-- IF SC_Comments --] tag to test whether this option is enabled and, if it is, use the [-- SC_Comments --] tag to display the box. You can place the box anywhere on the page that fits your layout.

[-- 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 --]

</table>

</form>

[-- ShippingFooter --]

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

Customer Comments Box CSS

Here is a list of the CSS selectors used in the customer comments box display.

table.comm	The table containing the customer comments.
td.comm_hdr	The cell containing the comments header.
td.comm	The cell containing the textarea field in which customers can type comments.
textarea.comm	The textarea field in which customers can type comments.

This example is the same as the one above, plus it includes a brief style sheet with selectors for some of the customer comments box 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;
}
</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 --]

</table>

</form>

[-- ShippingFooter --]

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

Next: Checkout Addresses

Shipping Page Templates:Customer Comments Box

Customer Comments Box CSS

Check These Out

Top Template Tips

Update Your Templates

Shipping Page Templates:
Customer Comments Box