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 billing information.
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: allow_different_billing--> [checkout3_Header-billingaddress] [checkout3_billingcomment] [BCHECKED] [checkout3_billingsameasshipping] [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_billing_zip--> <!--END: req_billing_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-->
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: CHECKGATEWAY--> (used by eCheck compatible payment gateways) [payment_description] [payment_description_message] [FIRSTOPTIONCHECKED] [payment_description] [CustomerInfo_check-type] [checktypelist] [CustomerInfo_check-acct-type] [checkaccttypelist] [CustomerInfo_check-routing] [CustomerInfo_check-acct] <!--END: CHECKGATEWAY--> <!--START: checkoutByAmazon--> (used by the CBA payment gateway) [payment_description] [amazon_cba_form] <!--END: checkoutByAmazon--> <!--START: CCGATEWAY--> (Generic block used by most payment gateways) [payment_description] [payment_description_message] [FIRSTOPTIONCHECKED] [payment_description] [CustomerInfo_creditcardnumber] [id] <!--START: ccStartDate--> [CustomerInfo_creditstartdate] [monthlist] [yearlistdtstart] <!--END: ccStartDate--> [CustomerInfo_creditexpiration] [id] [monthlist] [yearlist] [CustomerInfo_cardtype] [cctype] [CustomerInfo_creditissuenumber] [id] <!--END: CCGATEWAY--> <!--START: AUTHNETCIMBLOCK--> (Block used for Authorize.Net CIM/Token Enabled Gateway) [payment_description] [FIRSTOPTIONCHECKED] [payment_description] <!--START: authCIMBlock--> [checkout3_use-creditcard-on-file] <!--END: authCIMBlock--> <!--END: AUTHNETCIMBLOCK--> <!--START: MILITARYSTAR--> [payment_description] [payment_description_message] [id] [FIRSTOPTIONCHECKED] [payment_description] [CustomerInfo_creditcardnumber] <!--END: MILITARYSTAR--> <!--START: LINKGATEWAY--> (used by redirect payment gateways) [payment_description] [payment_description_message] [FIRSTOPTIONCHECKED] [payment_description] <!--END: LINKGATEWAY--> <!--START: ELAYAWAYGATEWAY--> (used by the eLayAway payment gateway) [payment_description] [payment_description_message] [FIRSTOPTIONCHECKED] [lay_order_total] [company_name] [max_lay_length] [currency_code] <!--END: ELAYAWAYGATEWAY--> <!--START: PPEXPRESS--> (used by the PayPal Express payment gateways) [payment_description] [payment_description_message] [id] [payment_description] <!--END: PPEXPRESS--> <!--START: PAYPALADV--> (used by the PayPal Advanced payment gateway) [payment_description] [payment_description_message] [id] [payment_description] <!--END: PAYPALADV--> <!--START: SHOPATRON--> (used by ShopaTron payment gateway) [payment_description] [payment_description_message] [payment_description] <!--END: SHOPATRON--> <!--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-->
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--> [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] <!--column left--> [checkout3_methodofpaymentselect] <!--START: checkout_questions--> [checkout3_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--> [checkout3_Header-comment] [checkout3_commentmessage] [checkout3_Header-comment] [checkout3_submitbutton] <!--column left ends--> <!--column right--> [checkout3_Header-shippingmethodinfo] [oshipmethod] [shoppingcart_shipping] [SHIPPING] [checkout3_shippingmethodchange] <!--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: BUYSAFE--> [buysafe_totalbondcost] <!--END: BUYSAFE--> <!--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] [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.
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.)