Template Pages

Change the design of your Checkout Pages

Purpose: This template defines the layout of the checkout (page 1) of the 3 step checkout. This is where customers enter their shipping information.

Notes: The template contains a form which is used by the customer to enter their shipping address 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 1 of the checkout process.

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: paypalexpress-->
  <!--END: paypalexpress-->
  <!--START: GOOGLECHECKOUT-->
    [gc_merchantid]
  <!--END: GOOGLECHECKOUT-->
  <!--column left-->
    <!--START: account_login-->
      <!--start current customer block-->
        [checkout1_loginmessage]
        [checkout1_loginmessage2]
        [checkout1_login]
        <!--START: fbconnect-->
        <!--END: fbconnect-->
      <!-- end current customer block-->
      <!--start create account block-->
        [checkout1_Header-createnewaccount]
        [CustomerInfo_email]
        [email]
      <!--START: emailrequired-->
        <!--START: req_email-->
        <!--END: req_email-->
      <!--END: emailrequired-->
      <!--START: confirm_email-->
        [CustomerInfo_confirmemail]
        [email]
        <!--START: emailrequired-->
          <!--START: req_email-->
          <!--END: req_email-->
        <!--END: emailrequired-->
      <!--END: confirm_email-->
        [CustomerInfo_password]
      <!--START: passwordrequired-->
        <!--START: req_pass-->
        <!--END: req_pass-->
      <!--END: passwordrequired-->
        [maillist]
        [checkout1_joinmailinglist]
      <!--end create account block-->
    <!--END: account_login-->
    <!--START: GIFT_REGISTRY_SHIPPING-->
      [checkout1_Header-giftreg]
      [checkout1_Header-giftreg-instructions]
      <!--tr>
        [checkout1_Header-giftreg-shiptofriendaddress]
        [checkout1_Header-giftreg-shiptomyaddress]
      </tr-->
    <!--END: GIFT_REGISTRY_SHIPPING-->
      [checkout1_Header-shippinginformation]
    <!--START: required_fields-->
    <!--END: required_fields-->
    <!--START: SAVE_ADDRESSES-->
      [checkout1_address-book]
      [address_list]
    <!--END: SAVE_ADDRESSES-->
      [CustomerInfo_firstname]
      [shipping_firstname]
    <!--START: req_shipping_firstname-->
    <!--END: req_shipping_firstname-->
      [CustomerInfo_lastname]
      [shipping_lastname]
    <!--START: req_shipping_lastname-->
    <!--END: req_shipping_lastname-->
      [CustomerInfo_company]
      [shipping_company]
    <!--START: req_shipping_company-->
    <!--END: req_shipping_company-->
      [CustomerInfo_phone]
      [shipping_phone]
    <!--START: req_shipping_phone-->
    <!--END: req_shipping_phone-->
      [CustomerInfo_address]
      [shipping_address]
    <!--START: req_shipping_address-->
    <!--END: req_shipping_address-->
      [CustomerInfo_address2]
      [shipping_address2]
      [CustomerInfo_city]
      [shipping_city]
    <!--START: req_shipping_city-->
    <!--END: req_shipping_city-->
      [CustomerInfo_country]
    <!--START: req_shipping_country-->
    <!--END: req_shipping_country-->
      [CountryDropDown]
      [CustomerInfo_state]
      [state]
    <!--START: req_shipping_state-->
    <!--END: req_shipping_state-->
      [CustomerInfo_zip]
      [shipping_zip]
    <!--START: req_shipping_zip-->
    <!--END: req_shipping_zip-->
    <!--START: addressType-->
      [CustomerInfo_address_type]
      [addressTypeDropDown]
    <!--END: addressType-->
    <!--START: checkout_questions-->
      [checkout1_checkoutquestions]
      <!--START: questions-->
        [questions]
      <!--END: questions-->
    <!--END: checkout_questions-->
    <!--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]-->
      [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-->
    [checkout1_submitbutton]
  <!--column left ends-->
  <!--column 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-->
  <!--column right ends-->
  <!--START: CATEGORY_FOOTER-->
    [CONTENT]
  <!--END: CATEGORY_FOOTER-->
  <!--START: AddressValidatorBlock-->
    <!--START: AddressValidatorBlock_ValidationFailed-->
      [result_msg]
    <!--END: AddressValidatorBlock_ValidationFailed-->
    <!--START: AddressValidatorBlock_ValidationSuggestion-->
      [result_msg]
      <!--START: AddressValidatorBlock_ValidationSuggestion_SingleAddressBlock-->
        [checkout1_AddressValidator_SuggestedAddress]
        [AddrressValidator_address1]
        [AddrressValidator_address2]
        [AddrressValidator_city]
        [AddrressValidator_state]
        [AddrressValidator_zip]
        [AddrressValidator_address]
        [AddrressValidator_city]
        [AddrressValidator_state]
        [AddrressValidator_zip]
      <!--END: AddressValidatorBlock_ValidationSuggestion_SingleAddressBlock-->
      [checkout1_AddressValidator_Continue]
    <!--END: AddressValidatorBlock_ValidationSuggestion-->
    [checkout1_AddressValidator_Close]
  <!--END: AddressValidatorBlock-->
    [useAddressValidator]
  <!--START: confirmemailscript-->
  <!--END: confirmemailscript-->
  <!--START: phonerequiredscript-->
  <!--END: phonerequiredscript-->
  <!--START: addressTypeScript-->
    [CustomerInfo_address_type]
  <!--END: addressTypeScript-->
    [intI]
    [intI]
    [id]

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)
  • [gc_merchantid] - Used by the Software to insert/reference the Merchant ID for Google Checkout if it is used.
  • [checkout1_loginmessage] - Displays the Title of the "Shopped with us before?" heading on the page, if the shopper is not logged in. (See Settings ->Design ->Store Language)
  • [checkout1_loginmessage2] - If the shopper is not yet logged into their respective account, and the store is set up to have login requirement as an optional decision; this variable will insert a link for them to sign in. (See Settings ->Design ->Store Language)
  • [checkout1_login] - If the shopper is not yet logged into their respective account, this variable will insert a link for them to sign in. (See Settings ->Design ->Store Language)
  • [checkout1_Header-createnewaccount] - Displays the Title of the "Create New Account" heading if the shopper is creating a new account. (See Settings ->Design ->Store Language)
  • [CustomerInfo_email] - Displays the Title of the form's "Email" field. (See Settings ->Design ->Store Language)
  • [email] - Accomodates the information entered in the form's "Email" text input field.
  • [CustomerInfo_confirmemail] - Displays the Title of the form's "Confirm Email" field. (See Settings ->Design ->Store Language)
  • [CustomerInfo_password] - Displays the Title of the "Create New Account" area's "Password" Field. (See Settings ->Design ->Store Language)
  • [maillist] - Used by the Software to reference when the shopper elects to join the mailing list during sign-up by checking the box.
  • [checkout1_joinmailinglist] - Displays the Title of the "Yes!, I would like to be notified..." message next to the Mailing List Checkbox. (See Settings ->Design ->Store Language)
  • [checkout1_Header-giftreg] - If the order is being placed as part of a Gift Registry, this variable will insert the Title of the Gift Registry shipping information. (See Settings ->Design ->Store Language)
  • [checkout1_Header-giftreg-instructions] - If the order is being placed as part of a Gift Registry, this variable will insert the text of the Gift Registry instruction information. (See Settings ->Design ->Store Language)
  • [checkout1_Header-shippinginformation] - Displays the Title of the "Shipping Information" section on the page. (See Settings ->Design ->Store Language)
  • [checkout1_address-book] - If the shopper is logged into their account, this Variable will display the Title of the "Address Book" selection area. (See Settings ->Design ->Store Language)
  • [address_list] - If the shopper is logged into their account, this Variable will control the "Address Book" selection drop down.
  • [CustomerInfo_firstname] - Displays the Title of the form's "First Name" field. (See Settings ->Design ->Store Language)
  • [shipping_firstname] - Inserts the shopper's Shipping "First Name" Information.
  • [CustomerInfo_lastname] - Displays the Title of the form's "Last Name" field. (See Settings ->Design ->Store Language)
  • [shipping_lastname] - Inserts the shopper's Shipping "Last Name" Information.
  • [CustomerInfo_company] - Displays the Title of the form's "Company" field. (See Settings ->Design ->Store Language)
  • [shipping_company] - Inserts the shopper's Shipping "Company" Information.
  • [CustomerInfo_phone] - Displays the Title of the form's "Phone" field. (See Settings ->Design ->Store Language)
  • [shipping_phone] - Inserts the shopper's Shipping "Phone" Information.
  • [CustomerInfo_address] - Displays the Title of the form's "Address" field. (See Settings ->Design ->Store Language)
  • [shipping_address] - Inserts the shopper's Shipping "Address" Information.
  • [CustomerInfo_address2] - Displays the Title of the form's "Suite/Apt #" field. (See Settings ->Design ->Store Language)
  • [shipping_address2] - Inserts the shopper's Shipping "Suite/Apt #" Information.
  • [CustomerInfo_city] - Displays the Title of the form's "City" field. (See Settings ->Design ->Store Language)
  • [shipping_city] - Inserts the shopper's Shipping "City" Information.
  • [CustomerInfo_country] - Displays the Title of the form's "Country" field. (See Settings ->Design ->Store Language)
  • [CountryDropDown] - Used by the software to insert/control the "Country" selection drop down.
  • [CustomerInfo_state] - Displays the Title of the form's "State" field. (See Settings ->Design ->Store Language)
  • [state] - Used by the Software to insert/reference the entered "State" information.
  • [CustomerInfo_zip] - Displays the Title of the form's "Zip" field. (See Settings ->Design ->Store Language)
  • [shipping_zip] - Inserts the shopper's Shipping "Zip" Information.
  • [CustomerInfo_address_type] - If the Store is set to allow shipping selection (Residential or Commercial), this variable will display the Title of the shipping selection menu. (See Settings ->Design ->Store Language)
  • [addressTypeDropDown] - If the store is set to allow shipping selection (Residential or Commercial), this variable will insert the selection drop down.
  • [checkout1_checkoutquestions] - Displays the Title of the form's "State" field. (See Settings ->Design ->Store Language)
  • [questions] - Used by the Software to house any applicable Checkout Questions on the Step 1 checkout page.
  • [question] - Inserts the applicable question.
  • [id] - Used by the Software to reference the Question ID.
  • [answer] - Applies to the Checkout Question's open text field. (For Text and TextArea entered answers)
  • [oname] - Used by the Software to designate Checkout Question Answer entries.
  • [SELECTED] - Used by the Software to identify the selected option(s).
  • [option] - Applies the Checkout Question's selection options. (For drop down, and radio selected answers.)
  • [checkout1_submitbutton] - Displays the Title of the "Proceed to Shipping Calculation 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)
  • [option] - Lists the Question Answer options available. (Used for radio and dropdown questions)

These next variables will be present on the page as part of Shift4Shop's Address Verification Add-on.
(Note: This add-on requires additional purchase in order for the scripting to apply to your pages.)

  • [result_msg]
  • [checkout1_AddressValidator_SuggestedAddress]
  • [AddrressValidator_address1]
  • [AddrressValidator_address2]
  • [AddrressValidator_city]
  • [AddrressValidator_state]
  • [AddrressValidator_zip]
  • [AddrressValidator_address]
  • [checkout1_AddressValidator_Continue]
  • [checkout1_AddressValidator_Close]
  • [useAddressValidator]

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

Screenshot of the checkout-step1.html Template