Shopping Cart Templates

The Shopping Cart Template contains definitions for the Shoping Cart screen, the Payment Information Screen, the optional Confirmation Screen, the Thank You screen, and the customer Reciept E-Mail message.

Shopping Cart

The Shopping Cart screen is where the customer can view and modify a list of items to be purchased. This is also where the customer selects a payment method and can enter a shipping destination country/ZIP. This allows ShopSite to present an accurate order total on this screen, before the customer has to enter any detailed personal information.

Shoping Cart Header/Footer

Every individual screen in the checkout process can have its own unique header and footer. The merchant defines these in the Back Office, and will probably include HTML tags within them. The header and footer may be identical on all the shopping cart pages, or it may be different for each one.

Customer Registration Links

If customer registration is available, links allowing the customer to log in or out can be displayed on the main shopping cart screen. These links are created by ShopSite, and they will change depending on whether the customer is logged in or not. There is no real requirement for where the links go; ultimately, the question to ask is how signficant is Customer Registration. If customers are required to register before checking out, the links probably need to be more prominent than if registration is optional. Most of the ShopSite templates include the links near the top of the shopping cart screen, but another popular location for such things would be in a sidebar.

Coupon Form Elements

If the merchant has enabled coupons, the form for redeeming coupons should be included somewhere on the checkout screen. Like the customer registration links, where these go depends on the prominence the merchant wants to give this feature, as well as design preference. Because coupons could be considered a part of the payment, they could be put down along with the payment type selection, or they could be an extra feature listed in a sidebar. If gift certificates are also enabled, there is also the question of whether certificates and coupons should be placed together, since they are similar, or separately, in order to reduce possible confusion between the two things.

Gift Certificate Form Elements

Gift Certificate redemption form elements are a similar situation to Coupons and Customer Registration. Where and how they appear on the screen is largely a matter of how much attention you want to draw to the feature, and how you want customers to think of them.

Customer Reward Program Information

If reward programs are active in the store, information about rewards the customer is eligible for can be displayed on the shopping cart. Because reward programs can be linked to customer registration, you may want to display them close to the customer registration feature. Another option would be to display them close to the shopping cart contents, which might be a better location if rewards are only linked to the current shopping cart.

Show Cart Checkbox

If the merchant selects the option to allow the customer to select whether to see the shopping cart each time an item is added to the cart, the checkbox and instructions for this option need to be displayed on the shopping cart screen. There is no real guideline on where a feature such as this should be displayed, but most of the templates that ship with ShopSite include this just above the cart contents.

Cart Contents Form

On the first screen of the shopping cart, the customer has the option to modify the cart contents, including removing items, changing quantities, and modifying order options. The cart contents block is created by ShopSite, but the template designer has some control over what information appears, and what order it's presented.

Checkout Totals

The checkout totals can include the subtotal, tax, shipping, grand total, and the savings from coupons or discounts. The totals block may be displayed below the cart contents, or you may want to put things such as surcharges, payment method, coupons, or other objects that would modify the totals, between the contents and totals.

Order Instructions Form Elements

The merchant may elect to include a text box where the customer can add specific order instructions. This may be used combined with other options like the surcharge, or as a special handling request, and how it is used will dictate how and where it should be displayed.

Surcharge Form Elements

Merchants can select to include options for special shipping surcharges, such as gift wrapping, or oversize packaging, which the customer can request for an additional charge. These may be used in conjunction with the Order Instructions; for example, for a gift wrapping surcharge, the order instructions could be used as a field for entering a message to be included on a gift tag.

Tax/Shipping Form Elements

When the merchant configures shopper selected tax or shipping options, the shipping method and tax selection fields are created on the shopping cart screens.

Payment Method Form Elements

ShopSite allows the customer to select a payment method on the shopping cart screen, which determines what information is collected on the next screen.

Cart Buttons

In addition to a return to store button and a button to continue with the checkout process, there are options to include a button that empties the cart and another to recalculate the cart totals. Coupons and Gift Certificates can be configured to use their own individual buttons, or to use the recalculate button to be applied.

Payment Information

The Payment Information screen contains a form for entering shipping and payment information.

Cart Contents

The cart contents are not required as part of the Payment Information screen, and can no longer be modified. If the merchant is not using a confirmation screen, showing the cart contents on the billing info screen can provide a chance for the customer to review their shopping cart before finalizing the order. If there is a confirmation screen, it can simplify the payment information screen to leave out any unnecessary information.

Checkout Totals

Like the cart contents, the checkout totals will not change on the payment information screen, and can clutter up an already complex screen. One good reason to display the cart totals, however, is that the customer may want to review the payment total at the same time they enter their payment method information. If your design shows the cart contents, you may want to put the checkout totals with the contents. Another good location for the checkout totals would be near the payment information fields.

Billing/Shipping Information Form Elements

The Billing/Shipping Information form elements are where the billing and shipping name and addresses are collected. ShopSite generates the entire form section, either with a single set of information to use for both shipping and billing, or with separate sets displayed side-by-side or one above the other, all according to the Merchant's selection in the Back Office. This leaves the template designer limited control over the presentation of the information, and what looks good in one layout may not look good in another.

Comments Form Elements

The merchant can select whether or not to include a comments field on the billing information screen. This field is similar to the shopping cart screen's Order Instructions field, in that it could be used in conjunction with other form elements to gather specific information, or it could be used alone for a more generic purpose.

Custom Form Elements

ShopSite Pro allows merchants to define a number of custom form elements that can be used to gather additional information, either related to billing, or for customer profiling, such as asking how customers heard about the Web site and what types of items they usually buy. Because the form elements are completely customizable, they are rarely used as part of a generic template, but can be extremely handy in site-specific designs.

E-Mail List Checkbox

Many merchants have e-mail lists of customers, which they use for newsletters, or for mailing advertisements or coupons. This checkbox allows merchants to ask customers to opt-in for such mailings, which helps improve the efficiency of using such lists. It can be included anywhere on the payment information form, depending on what other information is being gathered.

Payment Information Form Elements

Most forms of payment a customer can select require specific payment information, such as a credit card number or check number. ShopSite includes the required fields on the payment information screen based off the payment method selected on the shopping cart screen.

Security Image Form Elements

Security Images, also known as Human Validation Images, are used to help prevent credit card fraud done by testing card numbers using an automated program. The merchant may have the security image on for all transactions, after a specified number of failed tranactions, or always off. The security image is often included as part of the payment method information, but it can be put anywhere on the screen, depending on how important a feature it is for the merchant.

Cart Buttons

There are two buttons that should be included in the payment info screen. One button returns the customer to the shopping cart screen without completing the order. The other button will either take the customer to the confirmation screen, or finalize the order, depending on how the merchant configures the checkout process in the Back Office.


The optional Confirmation screen is used as a final check-point before the order is finalized. The merchant can turn this function on or off in the Back Office.

Cart Contents

If the merchant has configured ShopSite to use a confirmation screen, it is the last chance for the customer to verify their order before it is finalize. None of the information on the confirmation screen can be modified there; the customer must return to the screen where they entered it originally. The cart contents are identical on this screen to how they would appear on the Payment Information screen, and it is usually a good idea to follow the same flow across all the screens.

Checkout Totals

Checkout totals are the same on the confirmation screen as they are on the payment information screen, and should usually be displayed in the same order they were on that screen.

Billing/Shipping Information

The Billing/Shipping Information is read-only on the confirmation screen, but should be displayed so the customer can review the information for accuracy before finalizing the order. The information will be laid aout in the same format as it was on the payment information screen, and should be presented in the same order as on that screen.

Comments Information

The contents of the optional comments field on the Payment Information screen is displayed in a read-only format on the confirmation screen.

Custom Form Information

Custom form information is displayed in a table, with each individual field description and the customer's form selection.

E-Mail List Information

If the customer has selected to be included on an e-mail list, the confirmation screen will contain that information. You may want to include it in the same order it appeared on the previous screen, or you may want to group it with the Comments and Custom Form information.

Payment Information

The selected payment method information is displayed on the confirmation screen, although the first 12 digits of the credit card number and the CVV2 number will be replaced with stars (*) if they are used.

Cart Buttons

The Confirmation screen has a back button to allow customers to return to the previous screen and fix any errors, and a submit order button, which will process the order.

Thank You

The Thank You screen appears once the order has been completed. It serves as an order confirmation screen and a receipt, and contains all the same information available on the Confirmation screen, as well as the finalized order number.

Order Number

When ShopSite has processed an order, an order number is generated. The order number can be used by the customer to contact the merchant, and also serves as a confirmation number to verify the order was accepted. It should be displayed prominently on the Thank You screen and in the Reciept E-Mail message.

Store Link

The Thank You screen is the last screen in the checkout process. Providing a link back to the main store page helps to encourage customers to remain on the site, rather than leaving. Including a link in the Reciept E-Mail message is also a useful way to provide the customer with a quick way to return to the store.

Reciept E-Mail

The E-Mail Receipt is similar to the Thank You screen, and contains all of the same information. It is delivered to the customer's e-mail address.

Next Topic: Gift Certificate Design