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