Template Pages

Change the design of your Checkout Pages

Purpose: This template defines the layout of the checkout (page 2) of the 3 step checkout. This is where customers enter their shipping information. (Similar to checkout-step2.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. This template also contains a special code block labeled "checkout_questions_templates" which inserts checkout questions if they are present on step 2 of the checkout process.

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

For example:


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

For example:

	[checkout1_step]
	[checkout2_step]
	[checkout3_step]
	[checkout4_step]
<!--START: CATEGORY_HEADER-->
	[CONTENT]
<!--END: CATEGORY_HEADER-->
<!--start left-->
  <!--START: required_fields-->
  <!--END: required_fields-->
  <!--START: account_login-->
    <!--start current customer block-->
      [checkout1_loginmessage]
      [checkout1_loginmessage2]
      [checkout1_login]
    <!-- end current customer block-->
    <!--start create account block-->
      [checkout1_Header-createnewaccount]
      [CustomerInfo_email]
    <!--START: emailrequired-->
      <!--START: req_email-->
      <!--END: req_email-->
    <!--END: emailrequired-->
      [CustomerInfo_password]
    <!--START: passwordrequired-->
      <!--START: req_pass-->
      <!--END: req_pass-->
    <!--END: passwordrequired-->
      [maillist]
      [checkout1_joinmailinglist]
    <!--end create account block-->
  <!--END: account_login-->
    [checkout2_Header-shippinginfo]
  <!--START: address_block-->
    [package_number]
    [checkout2_Header-shippingmethods]
    [checkout2_shippinginfomessage]
    [oshipfirstname]
    [oshiplastname]
    [oshipcompany]
    [oshipaddress]
    [oshipaddress2]
    [oshipcity]
    [oshipstate]
    [oshipzip]
    [oshipcountry]
    <!--START: addressType-->
      [addressTypeText]
    <!--END: addressType-->
      [shipment_id]
      [checkout2_shippinginfochange]
      [checkout2_shippingmethodsmessage]
    <!--START: CARRIER-->
      <!--START: displayblock-->
        [OPTION-SHIPPER]
        [shipment_id]
        [shipment_id]
        [OPTION-SHIPPER]
      <!--END: displayblock-->
        [OPTION-SHIPPER]
        [shipment_id]
        [OPTION-SHIPPER]
      <!--START: SHIPPING_OPTION-->
        [shipment_id]
        [ID]
        [SELECTED]
      <!--[OPTION-SHIPPER]-->
        [OPTION-DESCRIPTION]
        [OPTION-PRICE2]
      <!--END: SHIPPING_OPTION-->
    <!--END: CARRIER-->
  <!--END: address_block-->
  <!--START: checkout_questions-->
    [checkout2_checkoutquestions]
    <!--START: questions-->
      [questions]
    <!--END: questions-->
  <!--END: checkout_questions-->
    [checkout2_submitbutton]
  <!----- END: Shipping Rate---->
<!--end left-->
<!--start right-->
	[checkout1_Header-shoppingcart]
  <!--START: SHOPPING_CART_ITEM-->
    [ITEM_CATALOGID]
    [THUMBNAIL]
    [ITEM_NAME]
    [ITEM_PRICE]
    [ITEM_QUANTITY]
    [ITEM_SUBTOTAL]
  <!--END: SHOPPING_CART_ITEM-->
  <!--START: DISCOUNTS-->
    [shoppingcart_subtotal]
    [CARTSUBTOTAL]
    [checkout1_discounts]
    [DISCOUNTS]
  <!--END: DISCOUNTS-->
  <!--START: BUYSAFE-->
    [buysafe_totalbondcost]
  <!--END: BUYSAFE-->
    [shoppingcart_total]
    [CARTTOTAL]
  <!--START: GIFTCERTS-->
    [shoppingcart_giftcertificate]
    [GIFTCERTS]
  <!--END: GIFTCERTS-->
<!--end right-->
<!--START: CATEGORY_FOOTER-->
	[CONTENT]
<!--END: CATEGORY_FOOTER-->
<!--START: email_req_validator--> 
<!--END: email_req_validator--> 
<!--START: pass_req_validator--> 
<!--END: pass_req_validator--> 
<!--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: reqid]-->
    [question]
    <!--START: option-->
      [id]
      [option]
      [selected]
      [option]
    <!--END: option-->
  <!--END: radio-format-->
  <!--START: dropdown-format-->
    <!--START: req[id]-->
    <!--END: req[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)
  • [checkout1_loginmessage] - If the Shopper is not yet logged into their respective account, this variable displays the Text of the "Shopped with us before?" heading. (See Settings->Design ->Store Language)
  • [checkout1_loginmessage2] - If the Shopper is not yet logged into their respective account, this variable displays the Text of the login instructions. (See Settings->Design ->Store Language)
  • [checkout1_login] - If the Shopper is not yet logged into their respective account, this variable displays the Text of the "Log in to Your Account" link/button. (See Settings->Design ->Store Language)
  • [checkout1_Header-createnewaccount] - If the Shopper is not yet logged into their respective account, this variable displays the Text of the "Create New Account" heading. (See Settings->Design ->Store Language)
  • [CustomerInfo_email] - If the Shopper is not yet logged into their respective account, this variable displays the Title of the "Email" field. (See Settings->Design ->Store Language)
  • [CustomerInfo_password] - If the Shopper is not yet logged into their respective account, this variable displays the Title of the "Password" heading. (See Settings->Design ->Store Language)
  • [maillist] - If the Shopper is not yet logged into their respective account, this variable is used by the Software to dispay and record the mailing list checkbox during the account creation.
  • [checkout1_joinmailinglist] - If the Shopper is not yet logged into their respective account, this variable will display the text of the Join Mailing List section. (See Settings ->Design ->Store Language)
  • [checkout2_Header-shippinginfo] - Displays the Title of the "Shipping Information" header on the page. (See Settings ->Design ->Store Language)
  • [package_number] - Inserts the specific package number for the multiple ship to sections.
  • [checkout2_Header-shippingmethods] - Displays the Title of the "Shipping Methods" after the package number. (See Settings ->Design ->Store Language)
  • [checkout2_shippinginfomessage] - Displays the Text of the "Your Package will be deleviered to:" message on the shipment listing. (See Settings ->Design ->Store Language)
  • [oshipfirstname] - Inserts the Shipment's First Name information.
  • [oshiplastname] - Inserts the Shipment's Last Name information.
  • [oshipcompany] - Inserts the Shipment's Company information.
  • [oshipaddress] - Inserts the Shipment's Address information.
  • [oshipaddress2] - Inserts the Shipment's Suite/Apt # information.
  • [oshipcity] - Inserts the Shipment's City information.
  • [oshipstate] - Inserts the Shipment's State information.
  • [oshipzip] - Inserts the Shipment's Postal Code information.
  • [oshipcountry] - Inserts the Shipment's Country information.
  • [addressTypeText] - Inserts the Shipment's Address Type (commerical/residential) information.
  • [shipment_id] - This variable is used by the Software to provide links to the shipment's database ID for editing referencing.
  • [checkout2_shippinginfochange] - Displays the Text for the "Change address" link. (See Settings ->Design ->Store Language)
  • [checkout2_shippingmethodsmessage] - Displays the Text for the "Pick the Shipping Method:" label on the shipping options section. (See Settings ->Design ->Store Language)
  • [OPTION-SHIPPER] - Used by the Software to insert applicable shipping Carrier options available.
  • [ID] - Used by the Software to reference the populated shipping methods.
  • [SELECTED] - Used by the Software to identify the selected shipping method.
  • [OPTION-DESCRIPTION] - Inserts the Caption of each applicable and listed shipping method. (See Settings ->Shipping ->Shipping Methods)
  • [OPTION-PRICE2] - Inserts the price of each applicable and listed shipping method.
  • [checkout2_checkoutquestions] - Displays the Title of the "Additional Questions" section of the page, if checkout questions are added to the step 2 page. (See Settings ->Design ->Store Language)
  • [questions] - This variable controls the area where the questions are contained.
  • [checkout2_submitbutton] - Displays the Title of the "Proceed to Payment Information" link/button. (See Settings ->Design ->Store Language)
  • [checkout1_Header-shoppingcart] - Displays the Title of the "Shopping Cart" section header on the page. (See Settings ->Design ->Store Language)
  • [ITEM_CATALOGID] - This variable is used by the Software to reference the applicable shopping cart Items.
  • [THUMBNAIL] - This variable is used by the Software to insert the product(s) thumbnail image(s).
  • [ITEM_NAME] - Inserts the Product's Name information.
  • [ITEM_PRICE] - Inserts the Product's Price information.
  • [ITEM_QUANTITY] - Inserts the number of units ordered for the product.
  • [ITEM_SUBTOTAL] - Insertse the Subtotal of each item.
  • [shoppingcart_subtotal] - Displays the Title of the cart's "Subtotal" section. (See Settings ->Design ->Store Language)
  • [CARTSUBTOTAL] - Inserts the shopping cart's Subtotal.
  • [checkout1_discounts] - Displays the Title of the cart's "Discounts" section. (See Settings ->Design ->Store Language)
  • [DISCOUNTS] - Inserts the monetary amount of any applied discounts.
  • [buysafe_totalbondcost] - If BuySafe is used on the store/order, this variable will insert the Cost for the BuySafe bonding service.
  • [shoppingcart_total] - Displays the Title of the cart's "Total" section. (See Settings ->Design ->Store Language)
  • [CARTTOTAL] - Inserts the cart's Total
  • [shoppingcart_giftcertificate] - Displays the Title of the cart's "Gift Certificate(s)" section. (See Settings ->Design ->Store Language)
  • [GIFTCERTS] - Inserts the monetary amount of any applied Gift Certificate(s)

These next few variables will be present in the "checkout_questions_templates" Code Block. They will be used in the display and presentation of the Checkout Questions.

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

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

Screenshot of the checkout-step2_multiple.html Template