drew_n's profile

1.4K Messages

 • 

262.9K Points

Saturday, October 5th, 2013 2:05 PM

Closed

What are the template files used in the checkout?

By default, BigCommerce stores' checkout is handled on one page with four to five different sections, depending on your store's individual settings and whether your customers are logged into your store before checking out.  You can change this, however, to a multi-page checkout in your Checkout Settings on your Control Panel.  This will force customers to navigate through multiple, separate webpages while checking out.  While this can give you greater control, we recommend using the single-page checkout to keep things simpler for your customers.

The checkout process is handled by a number of different template files depending on which style you are using, but caution must be used when editing these.  Changing the code of these files may prevent your customers from checking out in your store, so please make sure to only undertake this task if you are proficient with HTML and CSS.  Also, please note that technical support does not help with customization of your template files, so you may want to look into the hiring of a web designer if you wish to edit these files, but do not know HTML and CSS.

The express checkout (single page) uses the following template files.  The indented files are all located in the Snippets folder of your template files.


  • checkout_express.html - the overall container for the checkout page and calls the rest of the files listed below that handle the individual parts of the checkout process

  • ExpressCheckoutAddress.html - contains the variables for displaying the available options for addresses from which to choose when checking out with an account

  • ExpressCheckoutChooseAddress.html - for customers checking out with an account, this handles the address list, and additional address creation

  • ExpressCheckoutChooseShipper.html - the panel specifically for the Shipping Method step in the checkout

  • ExpressCheckoutConfirmation.html - the panel for the Order Confirmation area in the checkout process that displays which products are being ordered and includes the area for your customers to use coupon codes, gift certificates, write order comments, or agree to the terms & conditions

  • ExpressCheckoutCreateAccount.html - if a customer chooses to create an account with your store in the checkout process, this panel will be called at the beginning of the Billing Details panel

  • ExpressCheckoutShippingMethod.html - contains the code for displaying the individual shipping methods within the Shipping Method step in the checkout





The multi-page checkout uses the following template files.  The indented files are those panels that are called out in the parent (un-indented) file.  These files can be found in the Panels folder of your template files.


  • checkout.html - only customers who either want to checkout as a guest or are not logged in will see this page

  • checkout_address.html - contains the coding for calling the individual parts of the Billing Details & Shipping Details pages

  • ChooseBillingAddress.html

  • ChooseShippingAddress.html

  • CheckoutNewAddressForm.html



  • checkout_shipper.html - contains the coding for calling the shipping method panel

  • ChooseShippingProvider.html



  • checkout_confirm.html - contains the coding for calling the individual parts of the Order Confirmation page (not the "Thanks For Your Order" page)

  • ConfirmOrder.html - this is the meat of the Order Confirmation page and what you would want to edit if you want to add or delete content in a specific area of the checkout page



  • checkout_payment.html - this will only display if you have an on-checkout payment gateway, and not a hosted or offline checkout method such as Cheque or PayPal Express Checkout



  • If you would like to edit the final confirmation page that displays "Thanks For Your Order!," please visit this article.  The template files above are used both when your customers are checking out as a guest and if they have logged in with an account.  It is important to note that not all the code is going to be used at once, as there are variables used specifically for guest checkout vs. account checkout.  Testing on your store while you are changing the code will be crucial to make sure that everything is still in working order and displaying how you wish.

    This conversation is no longer open for comments or replies and is no longer visible to community members.

    No Responses!