Shipping Page Templates:
Buttons

There are two general-purpose buttons for the Shipping Page: Return to Cart and Submit Order. You should have both of these buttons in your template. You can place them in any location that makes sense to you, and you can have more than one instance of each button.

The [-- BUTTON name--] tags will produce either a graphic form button or a text form button, depending on what the merchant defines for each button.
The [-- BUTTON SubmitOrder --] tags will produce either a "Confirm" button if the Confirmation page is enabled, or a "Submit This Order" button if it is not.

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

[-- SHIP_CustomHTML 1 --]

<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>[-- SHIP_CustomHTML 2 --]</td></tr>

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

[-- SHIP_CustomHTML 3 --]

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

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

[-- SHIP_CustomHTML 4 --]

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

[-- SHIP_CustomHTML 5 --]

  <tr>
    <td align="center">[-- BUTTON ReturnToCart --] [-- BUTTON SubmitOrder --]</td>
  </tr>

</table>

</form>

[-- ShippingFooter --]

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

Buttons CSS

Each button has a unique CSS class. Beyond that, you may want to wrap the buttons in an HTML table cell or a span to apply additional formatting, such as white space around the buttons.

input.button68	The "Return To Cart" button.
input.button67	The "Submit This Order" button.
input.button62	The "Confirm" button if the Confirmation page is enabled.

This example puts the buttons inside table cells and defines CSS attributes for the td.buttons selector.

[-- 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;
}
/***********************/
/***  Payment Table  ***/
/***********************/
table.payment{
  color: #[-- STORE.SC_TextColor --];
  margin-left: auto;
  margin-right: auto;
}

table.pay_holder {
  margin-left: auto;
  margin-right: auto;
}

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

td.paymentselection {
  text-align: center;
  padding-top: 20px;
}

td.payment {
  text-align: right;
}

td.payment_value {
  text-align: left;
}

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

/*****************/
/***  Buttons  ***/
/*****************/
td.buttons {
  text-align: center;
  padding-top: 20px;
}
</style>

</head>

<body>

[-- ShopSiteMessages --]

[-- ShippingHeader --]

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

[-- SHIP_CustomHTML 1 --]

<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>[-- SHIP_CustomHTML 2 --]</td></tr>

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

<tr><td>[-- SHIP_CustomHTML 3 --]</td></tr>

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

<tr><td>[-- SHIP_CustomHTML 4 --]</td></tr>

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

<tr><td>[-- SHIP_CustomHTML 5 --]</td></tr>

  <tr>
    <td class="buttons">[-- BUTTON ReturnToCart --] [-- BUTTON SubmitOrder --]</td>
  </tr>

</table>

</form>

[-- ShippingFooter --]

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

Next: Confirm Required Tags

Shipping Page Templates:Buttons

Buttons CSS

Check These Out

Top Template Tips

Update Your Templates

Shipping Page Templates:
Buttons