Quick & Easy Custom Shopping Cart Template

To quickly and easily create a custom shopping cart template, take the basic layout that you would like for your shopping cart page and follow the steps below, pasting the code found below, into your layout.

Start by creating the basic layout that you want for your shopping cart page. The Quick & Easy template options work best if you have one main cell in your design where you would like ShopSite to put information, and the rest of your template, such as the header, left links, and footer remain the same. Three examples of basic page layouts are shown below. The gray areas are where the information is hard coded, and the white area is where the code from this tutorial will be inserted.

Repeat your page code 4 times in the same file. The shopping cart template is one file which creates 4 different shopping cart screens as well as sends a thank you email to your customers. Because of this you would need to add the code for your page 4 times, one for each screen created by this template.
NOTE: The first screen, the shopping cart screen, works like a regular page, you can include the full URL to images, CSS and JavaScript files. The next three screens, the checkout screen, confirmation screen and thank you screen, are all secure screens. You would need to add the secure URL for all images, CSS and JavaScript files you use on these screens. You can get the secure URL by going to Preferences > Hosting Service, or by contacting your hosting company directly.
Add [-- DEFINE ShoppingCart --] to the top of your template (above the DOCTYPE and HTML tags of your first full page HTML).
Add the following to the HEAD section of your first full HTML page.

[-- INCLUDE sc_cart.css PROCESS --]

Next copy the code from below and paste it into your main cell in your full HTML page. In the examples shown above, the main cell would be the white space in the middle.

[-- ShoppingCartHeader --]
[-- ShopSiteMessages --]
[-- SC_Reward_Program --]

[-- SC_Form --]
[-- IF SC_Registration --]
[-- SC_Registration --]
[-- END_IF --]

[-- SC_Cart --]

<table border="0" cellpadding="0" cellspacing="0" style="line-height:150%">
   <tr>
    <td align="left" valign="top"><br>[-- SC_Tax_Shipping --][-- SC_Surcharge --]</td>
    <td width="20px"> </td>
    <td valign="top" align="right">[-- SC_Totals --]
    [-- IF SC_Coupon --]
      <br><table border="0" cellpadding="3" cellspacing="0" align="right">
        <tr>
          <td><nobr>[-- STORE.CouponCaption --]</nobr></td>
          <td>[-- SC_Coupon --]</td>
          <td align="left">[-- BUTTON ApplyCoupon --]</td>
        </tr>
      </table>
    [-- END_IF --]</td>
  </tr>
</table>

<center>[-- BUTTON Recalculate --] [-- BUTTON ContinueShopping --] [-- BUTTON EmptyCart --]</center>
<br /><br /><small><i>[-- STORE.SC_AnyChanges --]</i></small>

[-- IF SC_OrderingInstructions --]
<center>[-- SC_OrderingInstructions 4 60 --]</center>
[-- END_IF --]

[-- IF SC_GiftCert --]
<center>
[-- STORE.EnterGiftCert --]
[-- IF SC_GiftCert_Button --]
[-- STORE.GiftCert_Redeem --]
[-- ELSE --]
[-- STORE.GiftCert_Recalculate --]
[-- END_IF --]
<br><table border="0" cellpadding="3" cellspacing="0">
  <tr>
    <td>[-- SC_GiftCert --]</td>
      [-- IF SC_GiftCert_Button --]
    <td align="left">[-- BUTTON ApplyGiftCert --]</td>[-- END_IF --]
   </tr>
</table>
[-- END_IF --]
<center>[-- SC_PaymentSelection --]<br />
<br />[-- BUTTON Checkout --]<br />
<br />[-- SC_ShowBasket --]</center>

[-- IF ShopSiteSecurityImage --]
<center>[-- ShopSiteSecurityImage --]</center>
[-- END_IF --]
</form>
[-- ShoppingCartFooter --]

Add the following to your template between the first full HTML page and the second full HTML page (after the first page's /HTML tag and before the second page's DOCTYPE and HTML tags).

Add the following to the HEAD section of your second full HTML page.

[-- INCLUDE sc_cart.css PROCESS --]

Next copy the code from below and paste it into your main cell in your second full HTML page.

[-- ShippingHeader --]
[-- ShopSiteMessages --]
[-- SC_Form --]
[-- IF CustomHTML --]
<p>>[-- SHIP_CustomHTML 1 --]</p>
[-- END_IF --]

[-- SC_Cart --]
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td width="70%">[-- IF SC_Comments --][-- SC_Comments --][-- END_IF --]</td>
<td width="30%">[-- SC_Totals --]</td>

[-- IF CustomHTML --]
<p>[-- SHIP_CustomHTML 2 --]</p>
[-- END_IF --]
<hr noshade size="1">

[-- IF CustomHTML --]
<p>[-- SHIP_CustomHTML 3 --]</p>
[-- END_IF --]

<center>
[-- SC_Address --]

[-- IF CustomHTML --]
<p>[-- SHIP_CustomHTML 4 --]</p>
[-- END_IF --]

<hr noshade size="1">
[-- SC_Payment --]

[-- IF CustomHTML --]
<p>[-- SHIP_CustomHTML 5 --]</p>
[-- END_IF --]

[-- IF Email_List --][-- Email_List --]<br />[-- END_IF --]
[-- IF SECURITYIMAGE --][-- SHIPSECURITYIMAGE --]<br />[-- END_IF --]
[-- BUTTON SubmitOrder --]
[-- IF ShopSiteSecurityImage --][-- ShopSiteSecurityImage --][-- END_IF --]
</center>
</form>
[-- ShippingFooter --]

Add the following to your template between the second full HTML page and the third full HTML page (after the second page's /HTML tag and before the third page's DOCTYPE and HTML tags).

[-- END_DEFINE Shipping --]

[-- DEFINE Confirmation --]

Add the following to the HEAD section of your third full HTML page.

[-- INCLUDE sc_cart.css PROCESS --]

Next copy the code from below and paste it into your main cell in your third full HTML page.

[-- ConfirmationHeader --]
[-- ShopSiteMessages --]
[-- SC_Form --]

[-- SC_Cart --]
[-- SC_Totals --]
<hr noshade size="1">
<center>
[-- SC_Address --]
<hr noshade size="1">
[-- SC_Payment --]
<hr noshade size="1">
[-- IF SC_OrderingInstructions_Text --]
[-- SC_OrderingInstructions --]<br />
[-- END_IF --]

[-- IF SC_Comments_Text --]
[-- SC_Comments --]<br />
[-- END_IF --]

[-- IF CustomHTML_Values --]
[-- CustomHTML_Values --]<br />
[-- END_IF --]

[-- IF Email_List --]
[-- Email_List --]<br />
[-- END_IF --]
<hr noshade size="2">
<br />
[-- BUTTON MakeChanges --] [-- BUTTON Confirmation --]
[-- IF ShopSiteSecurityImage --][-- ShopSiteSecurityImage --][-- END_IF --]
</center>
</form>
[-- ConfirmationFooter --]

Add the following to your template between the third full HTML page and the fourth full HTML page (after the third page's /HTML tag and before the fourth page's DOCTYPE and HTML tags).

[-- END_DEFINE Confirmation --]

[-- DEFINE ThankYou --]

Add the following to the HEAD section of your last full HTML page.

[-- INCLUDE sc_cart.css PROCESS --]

Next copy the code from below and paste it into your main cell in your last full HTML page.

[-- ThankYouHeader --]
[-- BUTTON ReturnToStore --]

<center>[-- STORE.SC_YourReceipt --] <b>[--Store.SC_OrderNumber--] [-- ThankYouOrderNumber --]</b></center>

[-- SC_Cart --]
[-- SC_Totals --]
<hr noshade size="1">
[-- SC_Address --]
<hr noshade size="1">
[-- SC_Payment --]
<hr noshade size="1">

[-- IF SC_OrderingInstructions_Text --]
[-- SC_OrderingInstructions --]<br />
[-- END_IF --]

[-- IF SC_Comments_Text --]
[-- SC_Comments --]<br />
[-- END_IF --]

[-- IF CustomHTML_Values --]
[-- CustomHTML_Values --]<br />
[-- END_IF --]

[-- IF Email_List --]
[-- Email_List --]<br />
[-- END_IF --]

<hr noshade size="1">
[-- ThankYouFooter --]

Add the following to the bottom of your template, below the /HTML tag of your fourth full page.

[-- END_DEFINE ThankYou --]

[-- DEFINE ThankYou_Email --]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>[-- STORE.SC_ThankYou Remove_Html --]</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
[-- INCLUDE sc_thankyouemail.css PROCESS --]
</head>

<body>
[-- ThankYouHeader --]
<p><b>[--Store.SC_OrderNumber--] [-- ThankYouOrderNumber --]</b></p>

[-- SC_Cart --]
[-- SC_Totals --]
<hr noshade size="1">
[-- SC_Address --]
<hr noshade size="1">
[-- SC_Payment --]
<hr noshade size="1">

[-- IF SC_OrderingInstructions_Text --]
[-- SC_OrderingInstructions --]<br />
[-- END_IF --]

[-- IF SC_Comments_Text --]
[-- SC_Comments --]<br />
[-- END_IF --]

[-- IF CustomHTML_Values --]
[-- CustomHTML_Values --]<br />
[-- END_IF --]

[-- IF Email_List --]
[-- Email_List --]<br />
[-- END_IF --]

<hr noshade size="1" />
[-- ReceiptFooter --]
</body>
</html>
[-- END_DEFINE ThankYou_Email --]

[-- DEFINE GLOBAL_CROSS_SELL --]
[-- IF PRODUCT.Graphic --]
[-- IF CROSS_SELL_LINK --]
<a href="[-- CROSS_SELL_LINK --]"><img class="gcs_img" [-- PRODUCT.Graphic REMOVE_HTML --] alt="[-- PRODUCT.Name REMOVE_HTML --]"></a>
[-- ELSE --]
<img class="gcs_img" [-- PRODUCT.Graphic REMOVE_HTML --] alt="[-- PRODUCT.Name REMOVE_HTML --]">
[-- END_IF --]
[-- END_IF --]
# Name
[-- IF PRODUCT.DisplayName --]
[-- IF CROSS_SELL_LINK --]
<a class="gcs_name" href="[-- CROSS_SELL_LINK --]">[-- PRODUCT.Name --]</a>
[-- ELSE --]
<span class="gcs_name">[-- PRODUCT.Name --]</span>
[-- END_IF --]
[-- END_IF --]
# Price
[-- IF PRODUCT.DisplayPrice --]
[-- IF PRODUCT.SaleOn --]
<span class="gcs_price"><strike>[-- IF PRODUCT.AltPrice --][-- PRODUCT.AltPrice --] [-- END_IF --][-- PRODUCT.Price --]</strike> [-- IF PRODUCT.AltSaleAmount --][-- PRODUCT.AltSaleAmount --] [-- END_IF --][-- PRODUCT.SaleAmount --]</span>
[-- ELSE --]
<span class="gcs_price">[-- IF PRODUCT.AltPrice --][-- PRODUCT.AltPrice --][-- END_IF --] [-- PRODUCT.Price --]</span>
[-- END_IF --]
[-- END_IF --]
# Add To Cart
[-- IF AddImage? --]
<a class="gcs_add" href="[-- PRODUCT.AddToCartURL --]"><img alt="Add to Cart" [-- AddImage --] border="0"></a>
[-- ELSE --]
<a class="gcs_add" href="[-- PRODUCT.AddToCartURL --]">[-- AddText --]</a>
[-- END_IF --]
[-- END_DEFINE GLOBAL_CROSS_SELL --]
####################################
[-- DEFINE CART_CROSS_SELL --]
[-- IF PRODUCT.Graphic --]
[-- IF CROSS_SELL_LINK --]
<a href="[-- CROSS_SELL_LINK --]"><img class="pcs_img" [-- PRODUCT.Graphic REMOVE_HTML --] alt="[-- PRODUCT.Name REMOVE_HTML --]"></a>
[-- ELSE --]
<img class="pcs_img" [-- PRODUCT.Graphic REMOVE_HTML --] alt="[-- PRODUCT.Name REMOVE_HTML --]">
[-- END_IF --]
[-- END_IF --]
# Name
[-- IF PRODUCT.DisplayName --]
[-- IF CROSS_SELL_LINK --]
<a class="pcs_name" href="[-- CROSS_SELL_LINK --]">[-- PRODUCT.Name --]</a>
[-- ELSE --]
<span class="pcs_name">[-- PRODUCT.Name --]</span>
[-- END_IF --]
[-- END_IF --]
# Price
[-- IF PRODUCT.DisplayPrice --]
[-- IF PRODUCT.SaleOn --]
<span class="pcs_price"><strike>[-- IF PRODUCT.AltPrice --][-- PRODUCT.AltPrice --] [-- END_IF --][-- PRODUCT.Price --]</strike> [-- IF PRODUCT.AltSaleAmount --][-- PRODUCT.AltSaleAmount --] [-- END_IF --][-- PRODUCT.SaleAmount --]</span>
[-- ELSE --]
<span class="pcs_price">[-- IF PRODUCT.AltPrice --][-- PRODUCT.AltPrice --][-- END_IF --] [-- PRODUCT.Price --]</span>
[-- END_IF --]
[-- END_IF --]
# Add To Cart
[-- IF AddImage? --]
<a class="pcs_add" href="[-- PRODUCT.AddToCartURL --]"><img alt="Add to Cart" [-- AddImage --] border="0"></a>
[-- ELSE --]
<a class="pcs_add" href="[-- PRODUCT.AddToCartURL --]">[-- AddText --]</a>
[-- END_IF --]
[-- END_DEFINE CART_CROSS_SELL --]

Last, upload your template into your ShopSite store. In your ShopSite store, go to Merchandising > Custom Templates > Shopping Cart > Upload Template. Upload your custom shopping cart template. You would then need to go to Commerce Setup > Order System > Layout Info, and select your custom template from the template pull down menu.

Next: Quick & Easy Gift Certificate

Quick & Easy Custom Shopping Cart Template

Check These Out

Top Template Tips

Update Your Templates