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 select their shipping method(s).

Notes: 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-->
    <!--column left-->
      <!--START: Shipping Rate -->
        [checkout2_Header-shippingmethods]
        [checkout2_shippingmethodsmessage]
        <!--START: CARRIER-->
          <!--START: displayblock-->
            [OPTION-SHIPPER]
            [OPTION-SHIPPER]
          <!--END: displayblock-->
            [OPTION-SHIPPER]
            [OPTION-SHIPPER]
          <!--START: SHIPPING_OPTION-->
            [ID]
            [SELECTED]
            <!--[OPTION-SHIPPER]-->
              [OPTION-DESCRIPTION]
              [OPTION-PRICE2]
          <!--END: SHIPPING_OPTION-->
        <!--END: CARRIER-->
        <!--START: INSURANCE-->
          [checkout2_insurance]
          [insurance_cost]
          [checkout2_insurance-selected]
          <!--START: optional-->
            [checkout2_insurance-not-selected]
          <!--END: optional-->
        <!--END: INSURANCE-->
        <!--START: checkout_questions-->
          [checkout2_checkoutquestions]
          <!--START: questions-->
            [questions]
          <!--END: questions-->
          <!--START: checkout_questions_templates-->
            <!--START: textarea-format-->
              [question]
              <!--START: req[id]-->
              <!--END: req[id]-->
              [id]
              [answer]
            <!--END: textarea-format-->
            <!--START: text-format-->
              [question]
              <!--START: req[id]-->
              <!--END: req[id]-->
              [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-->
        <!--END: checkout_questions-->
        [checkout2_submitbutton]
      <!-- END: Shipping Rate-->
    <!--column left ends-->
    <!--column right-->
      <!--customer info starts-->
        [checkout2_Header-shippinginfo]
        [checkout2_shippinginfomessage]
        [shipping_firstname]
        [shipping_lastname]
        [shipping_company]
        [shipping_address]
        [shipping_address2]
        [shipping_city]
        [shipping_state]
        [shipping_zip]
        [shipping_country]
        [checkout2_shippinginfochange]
      <!--customer info ends-->
        [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-->

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-shippingmethods] - Displays the Title of the "Shipping Methods" after the package number. (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_insurance] - Displays the Title for the "Package Insurance" section. (See Settings ->Design ->Store Language)
  • [insurance_cost] - Inserts the applicable insurance cost.
  • [checkout2_insurance-selected] - Displays the Text on the Package Insurance "Select" option. (See Settings ->Design ->Store Language)
  • [checkout2_insurance-not-selected] - Displays the Text on the Package Insurance "DOn't Add Insurance" option. (See Settings ->Design ->Store Language)
  • [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)
  • [checkout2_Header-shippinginfo] - Displays the Title of the "Shipping Information" header on the page. (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)
  • [shipping_firstname] - Inserts the shopper's Shipping "First Name" Information.
  • [shipping_lastname] - Inserts the shopper's Shipping "Last Name" Information.
  • [shipping_company] - Inserts the shopper's Shipping "Company" Information.
  • [shipping_address] - Inserts the shopper's Shipping "Address" Information.
  • [shipping_address2] - Inserts the shopper's Shipping "Suite/Apt #" Information.
  • [shipping_city] - Inserts the shopper's Shipping "City" Information.
  • [shipping_state] - Inserts the shopper's Shipping "State" Information.
  • [shipping_zip] - Inserts the shopper's Shipping "Zip" Information.
  • [shipping_country] - Inserts the shopper's Shipping "Country" Information.
  • [checkout2_shippinginfochange] - Displays the Text for the "Change address" link. (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)

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

Screenshot of the checkout-step2.html Template