Shipping Page Templates: Buttons

Shipping Page Template
Examples
Introduction
Required Tags
Page Colors
Title, Header, and Footer
Products and Totals
Comments
Addresses
Payment
E-Mail List
Custom Checkout Fields
Buttons

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>

</head>

<body>

[-- ShopSiteMessages --]

[-- ShippingHeader --]

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

[-- SHIP_CustomHTML 1 --]

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

Resulting Page

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>

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>