Shopping Cart Template: Colors

Your template can use the colors selected by the merchant, or you can hard-code color values. The best way to define colors in your template is with a cascading style sheet. This example adds a simple embedded style sheet to the Required Tags example. The style sheet uses the colors defined by the merchant. There is no output from this example (unless you set a background image for the cart).

You may want to create one style sheet and use it in all of your shopping cart pages. The easiest way to do that is to make the style sheet a separate file and use an [-- INCLUDE --] tag in the <head> section of each page. See the include file examples for more information.

  • If you aren't familiar with Cascading Style Sheets, you can find several primers or tutorials on the Web, or you can pick up a book on the subject at most any bookstore. CSS basics are easy to learn.
  • The cart color settings always have values. However, the merchant may not have selected a background image, so you should use an [-- IF STORE.SC_BackgroundImage --] tag as a test before defining a background image for the page.
  • The color tags return a six-digit hex value, but you must hard-code the pound sign (#) in front of the value.
  • Most of the hyperlinks on the cart pages are graphic buttons, so you may not need to define the pseudo-elements such as a:link in the style sheet. They are shown in this example, but not in any of the other cart examples. (If customer registration is enabled in a ShopSite Pro store, there are text links on the cart page.)
    [-- DEFINE ShoppingCart --]
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script type="text/javascript" language="JavaScript">
    <!--
    [-- SC_JAVASCRIPT extras --]
    // -->
    </script>
    <style type="text/css">
    body {
       color: #[-- STORE.SC_TextColor --];
       background-color: #[-- STORE.SC_BackgroundColor --];
       [-- IF STORE.SC_BackgroundImage --]background-image: url("[--STORE.SC_BackgroundImage--]");[-- END_IF --]
    }
    a:link {color: #[-- STORE.SC_LinkColor --];}
    a:visited {color: #[-- STORE.SC_VisitedLinkColor --];}
    a:hover {color: #[-- STORE.SC_LinkColor --];}
    a:active {color: #[-- STORE.SC_ActiveLinkColor --];}
    </style>
    </head>
    <body>
    [-- ShopSiteMessages --]
    [-- SC_Form --]

    <!------------------------------------>
    <!-- THE BODY OF THE CART GOES HERE -->
    <!------------------------------------>
    </form>
    </body>
    </html>
    [-- END_DEFINE ShoppingCart --]
Next: SC Title, Header, Footer