Template Pages

Change the design of your Checkout Pages

Purpose: This template defines the layout of the checkout (page 3) of the 3 step checkout. This is where customers enter their shipping information. (Similar to checkout-step3.html, however, this one is used when an order contains multiple “ship to” addresses.)

Notes: The template contains a form which is used by the customer to enter their billing information. No changes should be done to the form as the field names/values are very important and should not be changed. Adding or removing fields could cause the form to stop working. You can however, change the look/feel of the form using CSS/HTML.

Code Blocks within Template: This template will also contain certain blocks which will only come into play during specific situations. For example, some of the Payment Method blocks will only apply if that payment method is used in the store. In the following Code Block sections we will outline these situational blocks.

Note: It is important to preserve the commented tags to ensure the software performs correctly.

Allow Different Billing/Same As Shipping

This first example of code blocks will come into play when the shopper either enters a new Billing Address or elects to use the same address as their Shipping Address. (Based on the Store Settings)

<!--start block 3-->
  <!--START: allow_different_billing-->
    [checkout3_Header-billingaddress]
    [checkout3_billingcomment]
    [CustomerInfo_firstname]
    [billing_firstname]
      <!--START: req_billing_firstname-->
      <!--END: req_billing_firstname-->
    [CustomerInfo_lastname]
    [billing_lastname]
      <!--START: req_billing_lastname-->
      <!--END: req_billing_lastname-->
    [CustomerInfo_company]
    [billing_company]
      <!--START: req_billing_company-->
      <!--END: req_billing_company-->
    [CustomerInfo_phone]
    [billing_phone]
      <!--START: req_billing_phone-->
      <!--END: req_billing_phone-->
    [CustomerInfo_address]
    [billing_address]
      <!--START: req_billing_address-->
      <!--END: req_billing_address-->
    [CustomerInfo_address2]
    [billing_address2]
      <!--START: req_billing_address2-->
      <!--END: req_billing_address2-->
    [CustomerInfo_city]
    [billing_city]
      <!--START: req_billing_city-->
      <!--END: req_billing_city-->
    [CustomerInfo_country]
    [CountryDropDown]
      <!--START: req_billing_country-->
      <!--END: req_billing_country-->
    [CustomerInfo_state]
    [state]
      <!--START: req_billing_state-->
      <!--END: req_billing_state-->
    [CustomerInfo_zip]
    [billing_zip]
      <!--START: req_shipping_zip-->
      <!--END: req_shipping_zip-->
  <!--END: allow_different_billing-->
  <!--START: samebilling_billing-->
    <!--start billing same as shipping-->
      <!--START: showsamebillingasshipping-->
        [checkout3_Header-billingaddress]
        [billing_firstname]
        [billing_lastname]
          <!--START: billing_company-->
            [billing_company]
          <!--END: billing_company-->
      [billing_address]
          <!--START: billing_address2-->
            [billing_address2]
          <!--END: billing_address2-->
      [billing_city]
      [billing_state]
      [billing_zip]
      [billing_country]
      [checkout2_shippinginfochange]
      <!--END: showsamebillingasshipping-->
    [shipping_firstname]
    [shipping_lastname]
    [shipping_company]
    [shipping_phone]
    [shipping_address]
    [shipping_address2]
    [shipping_city]
    [shipping_country]
    [shipping_state]
    [shipping_zip]
    <!--end billing same as shipping-->
  <!--END: samebilling_billing-->
<!--end block 3-->

Gift Certificates

This next example of code blocks will come into play when the shopper applies a Gift Certificate on the order. The block will display the Gift Certificate information for their review.

<!--START: GIFTCERTIFICATES-->
[viewcart_giftcertificates-header]
  <!--START: DISPLAY_GIFTCERTIFICATES-->
    [id]
    [certificate_name]
    [discount_amount]
    [discount_balance]
  <!--END: DISPLAY_GIFTCERTIFICATES-->
<!--END: GIFTCERTIFICATES-->

Payment Gateways

This next series of code blocks will depend on the specific payment module being used by the store.

<!--start block 4-->
  [checkout3_methodofpaymentselect]
  <!--START: CCGATEWAY--> (Generic block used by most payment gateways)
    [payment_description]
    [payment_description_message]
    [id]
    [FIRSTOPTIONCHECKED]
    [payment_description]
    [CustomerInfo_creditcardnumber]
    [id]
      <!--START: ccStartDate-->
        [CustomerInfo_creditstartdate]
        [id]
        [monthlist]
        [id]
        [yearlistdtstart]
      <!--END: ccStartDate-->
    [CustomerInfo_creditexpiration]
    [id]
    [monthlist]
    [id]
    [yearlist]
    [CustomerInfo_cardtype]
    [id]
    [cctype]
      <!--START: ccIssueNumber-->
        [CustomerInfo_creditissuenumber]
        [id]
      <!--END: ccIssueNumber-->
    [id]
  <!--END: CCGATEWAY-->
  <!--START: AUTHNETCIMBLOCK--> (Block used for Authorize.Net CIM/Token Enabled Gateway)
    [payment_description]
    [id]
    [FIRSTOPTIONCHECKED]
    [payment_description]
      <!--START: authCIMBlock-->
        [checkout3_use-creditcard-on-file]
          <!--START: authCIMPaymentProfileItem-->
            [custProfId]
            [custPmntProfId]
            [authCIMProfileID_cardlastdigits]
            [authCIMProfileID_cardexp]
            [checkout3_creditcard-last-digits]
            [authCIMProfileID_cardlastdigits]
            [CustomerInfo_creditexpiration]
            [authCIMProfileID_cardexp]
          <!--END: authCIMPaymentProfileItem-->
      <!--END: authCIMBlock-->
  <!--END: AUTHNETCIMBLOCK-->
  <!--START: MILITARYSTAR-->
    [payment_description]
    [payment_description_message]
    [id]
    [id]
    [id]
    [FIRSTOPTIONCHECKED]
    [payment_description]
    [CustomerInfo_creditcardnumber]
    [id]
  <!--END: MILITARYSTAR-->
  <!--START: LINKGATEWAY--> (used by redirect payment gateways)
    [payment_description]
    [payment_description_message]
    [id]
    [FIRSTOPTIONCHECKED]
    [payment_description]
  <!--END: LINKGATEWAY-->
  <!--START: PPEXPRESS--> (used by the PayPal Express payment gateways)
    [payment_description]
    [payment_description_message]
    [id]
    [payment_description]
  <!--END: PPEXPRESS-->
  <!--START: CUSTOM--> (used for Offline Payment Methods)
    [payment_type]
    [payment_description]
    [id]
    [FIRSTOPTIONCHECKED]
    [payment_type]
      <!--START: CUSTOM_FIELD-->
        [InputName]
        [field]
      <!--END: CUSTOM_FIELD-->
    <!--END: CUSTOM-->
<!--end block 4-->

Everything Else

This last series of code blocks will cover all other code blocks and variables on the page.

    [shipping_firstname]
    [shipping_lastname]
    [shipping_company]
    [shipping_address]
    [shipping_address2]
    [shipping_city]
    [shipping_phone]
    [shipping_state]
    [shipping_zip]
    [shipping_country]
    [shipping_state]
    [checkout1_step]
    [checkout2_step]
    [checkout3_step]
    [checkout4_step]
<!--START: CATEGORY_HEADER-->
    [CONTENT]
<!--END: CATEGORY_HEADER-->
    [checkout2_Header-shippinginfo]
<!--START: shipment-->
    [oshipfirstname]
    [oshiplastname]
    [oshipcity]
    [oshipstate]
    [oshipzip]
    [oshipcountry]
<!--END: shipment-->
    [checkout2_shippinginfochange]
<!--start block 2-->
    [checkout3_Header-ordersummary]
    [shoppingcart_subtotal]
    [SUBTOTAL]
    [shoppingcart_discount]
    [DISCOUNT]
    [shoppingcart_shipping]
    [SHIPPING]
    [shoppingcart_taxes]
    [TAX]
      <!--START: GIFTCERTS-->
        [shoppingcart_total]
        [TOTAL]
        [shoppingcart_giftcertificate]
        [GIFTCERTS]
      <!--END: GIFTCERTS-->
    [shoppingcart_balance]
    [BALANCE]
<!--end block 2-->
<!--START: checkout_questions-->
  [checkout3_checkoutquestions]
    <!--START: questions-->
      questions]
    <!--END: questions-->
<!--END: checkout_questions-->
<!--start block 5-->
  [checkout3_Header-comment]
  [checkout3_commentmessage]
  [checkout3_Header-comment]
<!--end block 5-->
[checkout3_submitbutton]
<!--START: checkout_questions_templates-->
  <!--START: textarea-format-->
    <!--START: req[id]-->
    <!--END: req[id]-->
      [question]
      [id]
      [answer]
  <!--END: textarea-format-->
  <!--START: text-format-->
    <!--START: req[id]-->
    <!--END: req[id]-->
      [question]
      [id]
      [answer]
  <!--END: text-format-->
  <!--START: file-format-->
    [question]
    [oname]
  <!--END: file-format-->
  <!--START: checkbox-format-->
    <!--START: req[id]-->
    <!--END: req[id]-->
      [id]
      [answer]
      [selected]
      [question]
  <!--END: checkbox-format-->
  <!--START: radio-format-->
    <!--START: req[id]-->
    <!--END: req[id]-->
      [id]
      [question]
  <!--START: option-->
      [id]
      [option]
      [selected]
      [option]
  <!--END: option-->
  <!--END: radio-format-->
  <!--START: dropdown-format-->
    <!--START: req[id]-->
    <!--END: req[id]-->
      [id]
      [question]
      [id]
    <!--START: option-->
      [selected]
      [option]
    <!--END: option-->
  <!--END: dropdown-format-->
<!--END: checkout_questions_templates-->			

Note: Code blocks and their respective variables will only work with specific template pages.

Note: Many of the following variables are dynamically inserted from your cart's Settings ->Design ->Store Language section.

  • [checkout1_step] - Displays the Title of the "Step 1" Checkout Step Process at the top of the page. (See Settings ->Design ->Store Language)
  • [checkout2_step] - Displays the Title of the "Step 2" Checkout Step Process at the top of the page. (See Settings ->Design ->Store Language)
  • [checkout3_step] - Displays the Title of the "Step 3" Checkout Step Process at the top of the page. (See Settings ->Design ->Store Language)
  • [checkout4_step] - Displays the Title of the "Thank You" Checkout Step Process at the top of the page. (See Settings ->Design ->Store Language)
  • [checkout2_Header-shippinginfo] - Displays the Title of the "Shipping Information" section. (See Settings ->Design ->Store Language)
  • [oshipfirstname] - Inserts the Shipping First Name information
  • [oshiplastname] - Inserts the Shipping Last Name information
  • [oshipcity] - Inserts the Shipping City information
  • [oshipstate] - Inserts the Shipping State information
  • [oshipzip] - Inserts the Shipping Zip Codeinformation
  • [oshipcountry] - Inserts the Shipping Country information
  • [checkout2_shippinginfochange] - Inserts a link on the "Shipping Method" section which allows the shopper to change their shipping address.
  • [checkout3_Header-ordersummary] - Displays the Title of the "Order Summary" section of the page. (See Settings ->Design ->Store Language)
  • [shoppingcart_subtotal] - Displays the Title of the "Subtotal" Column within the Order Summary Section. (See Settings ->Design ->Store Language)
  • [SUBTOTAL] - Inserts the cart's subtotal
  • [shoppingcart_discount] - Displays the Title of the "Discount(s)" column within the Order Summary Section. (See Settings ->Design ->Store Language)
  • [DISCOUNT] - Inserts any applicable discount amount that is present on the order.
  • [shoppingcart_shipping] - Displays the Title of the "Shipping" column within the Order Summary section. (See Settings ->Design ->Store Language)
  • [SHIPPING] - Inserts the applicable shipping amount on the order.
  • [shoppingcart_taxes] - Displays the Title of the "Taxes" column within the Order Summary section. (See Settings ->Design ->Store Language)
  • [TAX] - Inserts the applicable Tax present on the order.
  • [shoppingcart_total] - Displays the Title of the "TOTAL" column within the Order Summary section. (See Settings ->Design ->Store Language)
  • [TOTAL] - Inserts the applicable Total amount present on the order.
  • [shoppingcart_giftcertificate] - Displays the Title of the "Gift Certificate(s)" column within the Order Summary section when applicable. (See Settings ->Design ->Store Language)
  • [GIFTCERTS] - Inserts the Gift Certificater amount present on the order.
  • [shoppingcart_balance] - Displays the Title of the "Balance" column within the Order Summary section. (See Settings ->Design ->Store Language)
  • [BALANCE] - Inserts the applicable Balance amount present on the order.
  • [checkout3_Header-billingaddress] - Displays the Title of the "Billing Address" section of the page. (See Settings ->Design ->Store Language)
  • [checkout3_billingcomment] - Displays the content of the top portion in the "Billing Address" section where instructions are given to the shopper. (See Settings ->Design ->Store Language)
  • [CustomerInfo_firstname] - Displays the Title of the "First Name" Field (See Settings ->Design ->Store Language)
  • [billing_firstname] - Controls/Inserts the Shopper's first name information
  • [CustomerInfo_lastname] - Displays the Title of the "Last Name" Field (See Settings ->Design ->Store Language)
  • [billing_lastname] - Controls/Inserts the Shopper's last name information
  • [CustomerInfo_company] - Displays the Title of the "Company" Field (See Settings ->Design ->Store Language)
  • [billing_company] - Controls/Inserts the Shopper's company information
  • [CustomerInfo_phone] - Displays the Title of the "Phone" Field (See Settings ->Design ->Store Language)
  • [billing_phone] - Controls/Inserts the Shopper's phone information
  • [CustomerInfo_address] - Displays the Title of the "Address" Field (See Settings ->Design ->Store Language)
  • [billing_address] - Controls/Inserts the Shopper's address information
  • [CustomerInfo_address2] - Displays the Title of the "Suite / Apt #" Field (See Settings ->Design ->Store Language)
  • [billing_address2] - Controls/Inserts the Shopper's address 2 information
  • [CustomerInfo_city] - Displays the Title of the "City" Field (See Settings ->Design ->Store Language)
  • [billing_city] - Controls/Inserts the Shopper's first name
  • [CustomerInfo_country] - Displays the Title of the "Country" Field (See Settings ->Design ->Store Language)
  • [CountryDropDown] - Controls/Inserts the Country Drop Down menu
  • [CustomerInfo_state] - Displays the Title of the "State" Field (See Settings ->Design ->Store Language)
  • [billing_state] - Controls/Inserts the Shopper's State information
  • [CustomerInfo_zip] - Displays the Title of the "Zip" Field (See Settings ->Design ->Store Language)
  • [billing_zip] - Controls/Inserts the Shopper's postal code information
  • [billing_country] - Controls/Inserts the Shopper's country information
  • [viewcart_giftcertificates-header] - Displays the Title of the "Gift Certificates" section if one is used on the order. (See Settings ->Design ->Store Language)
  • [certificate_name] - Inserts the applicable Gift Certificate code
  • [discount_amount] - Displays the title of the Gift Certificate "Amount" section. (See Settings ->Design ->Store Language)
  • [discount_balance] - Inserts the Balance left after Gift Certificate is applied.
  • [checkout3_methodofpaymentselect] - Displays the Title of the Billing Selection area. (See Settings ->Design ->Store Language)
  • [payment_description] - Inserts the respective payment method's caption. (Dependent on Payment Method used on store)
  • [payment_description_message] -Inserts the respective payment method's description. (Dependent on Payment Method used on store)
  • [checkout3_checkoutquestions] - Displays the Title of the Checkout Questions section if applicable. (See Settings ->Design ->Store Language)
  • [questions] - Begins the Checkout Questions section.
  • [question] - Inserts the applicable questions.
  • [answer] - Controls the Checkout Question answers (used for Checkbox, Text and Text Area questions)
  • [selected] - (scripting) Records if the selection was made.
  • [option] - Lists the Question Answer options available. (Used for radio and dropdown questions)
  • [checkout3_Header-comment] - Displays the Title of the page's "Comments" section. (See Settings ->Design ->Store Language)
  • [checkout3_commentmessage] - Displays the Title of instructional message displayed on the comments section. (See Settings ->Design ->Store Language)
  • [checkout3_submitbutton] - Displays the Title of the "Check Out" button. (See Settings ->Design ->Store Language)

Download this Template     (Save as a backup or edit to customize)

Screenshot of the checkout-step3.html Template