Shopping Cart Template Introduction

A shopping cart template defines the layout and elements of the shopping cart pages for a store. The template actually includes definitions for five separate pages in one file:

  • The Shopping Cart Page
  • The Shipping Page (which includes billing information)
  • The Confirmation Page (an optional page that can be turned on by the merchant)
  • The Thank You Page
  • The E-Mail Receipt that is sent to customers

In other words, a single file (template) contains five sets of [-- DEFINE --] tags, like this:

    [-- DEFINE Shopping_Cart --]
    # The code here defines how the shopping cart page will look
    [-- END_DEFINE Shopping_Cart --]

    [-- DEFINE Shipping --]
    # The code here defines how the shipping/billing page will look
    [-- END_DEFINE Shipping --]

    [-- DEFINE Confirmation --]
    # The code here defines how the optional confirmation page will look
    [-- END_DEFINE Confirmation --]

    [-- DEFINE ThankYou --]
    # The code here defines how the thank you page will look
    [-- END_DEFINE ThankYou --]

    [-- DEFINE ThankYou_Email --]
    # The code here defines how the HTML customer receipt will look
    [-- END_DEFINE ThankYou_Email --]

Merchants have a lot of flexibility in how they configure options for the cart pages, and that can have quite an impact on what the pages look like. For example, a merchant can choose to display shipping options as a drop-down list or as radio buttons, and may choose not to display the ordering instructions box at all.

Fortunately, the custom template tags take care of this for you. For example, the [-- SC_Tax_Shipping --] tag will produce either a drop-down list or radio buttons, depending on the merchant's choice, and you don't have to change anything in your template. Likewise, the [-- SC_OrderingInstructions --] tag will not produce any output if the merchant has disabled that feature, so there is no harm in having it in your template regardless of the merchant's setting.

Because many of the custom template tags produce formatted output, your main focus when creating a shopping cart template will probably be the overall layout. To make that easier, the HTML output of most custom template tags includes CSS (Cascading Style Sheet) class attributes. The examples show you how to use those attributes to define the look of your shopping cart.

Shopping Cart Page Shipping Page Confirmation, Thank You and E-Mail Receipt
Required Tags
Page Colors
Title, Header, and Footer
Product Listing
Tax and Shipping
Surcharges
Totals
Coupons
Buttons
Ordering Instructions
Payment Selection
Customer Registration
Required Tags
Page Colors
Title, Header, and Footer
Products and Totals
Comments
Addresses
Payment
E-Mail List
Custom Checkout Fields
Buttons
Required Tags
Page Colors
Title, Header, and Footer
Order Number
Products and Totals
Ordering Instructions,
Comments, and E-Mail List

Addresses
Payment
Custom Checkout Fields
Buttons
Next: Required SC Tags