Confirmation Page Template: Buttons

There are two buttons for the Confirmation Page: Make Changes and Submit This Order. You should have both of these buttons in your Confirmation Page template. The Thank You Page and E-Mail Receipt do not have any buttons that use the [-- BUTTON --] tag.

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.

Confirmation Page Example

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

  <tr>
    <td align="center">
      [-- SC_Payment --]
    </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 CustomHTML_Values --]
  <tr>
    <td align="center">
      <table class="CustomHTML">
        <tr>
          <td align="left">
            [-- CustomHTML_Values --]
          </td>
        </tr>
      </table>
    </td>
  </tr>
[-- END_IF --]

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

  <tr>
    <td class="buttons">
      [-- BUTTON MakeChanges --] [-- BUTTON Confirmation --]
    </td>
  </tr>

</table>

</form>

[-- ConfirmationFooter --]

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

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.button163	The "Make Changes" button.
input.button67	The "Submit This Order" button.

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

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

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

td.payment_value {
  text-align: left;
}

td.sql_pay {
  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;
}

td.buttons {
  text-align: center;
  padding-top: .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>

  <tr>
    <td align="center">
      [-- SC_Payment --]
    </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 CustomHTML_Values --]
  <tr>
    <td align="center">
      <table class="CustomHTML">
        <tr>
          <td align="left">
            [-- CustomHTML_Values --]
          </td>
        </tr>
      </table>
    </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>

  <tr>
    <td class="buttons">
      [-- BUTTON MakeChanges --] [-- BUTTON Confirmation --]
    </td>
  </tr>

</table>

</form>

[-- ConfirmationFooter --]

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

Finish: Return To Template Cookbook

Confirmation Page Template: Buttons

Confirmation Page Example

Buttons CSS

Check These Out

Top Template Tips

Update Your Templates