The Classy theme includes a page, product, search, gift certificate, tell a friend, customer registration and shopping cart template which are all specific to this theme. All of the colors for this theme can be changed within the back office by changing either the page or cart colors.

How Colors and Backgrounds Are Used

• Text Color - used as the text color for your pages.
• Background Color - used as the background color for your pages, as well as the link color for links on the left and right bars.
• Link Color - used as the link color for links in the main body of the page.
• Visited Link Color - used as the visited link color for links in the main body of the page.
• Active Link Color - used as the hover color for side links as well as main body links.
• Table Shade Color - used as the background color for the header, left bar, and right bar.
• Background Image - used as the background image, and will override the background color if used.

Template Screen Shots and Color Options

Shopping Cart Screen Shots: Blue, Brown, Deep Red, Green, Olive, Orange, Silver, USA

Theme Files

• classy_pa_template.sst - page template used by the Classy theme.
• classy_pr_template.sst - product template used by the Classy theme.
• classy_gc_template.sst - gift certificate template used by the Classy theme. This template controls the gift certificate order screen as well as the printable and email/digital gift certificates.
• classy_tf_template.sst - tell a friend template used by the Classy theme. This template controls the tell a friend pop up as well as the tell a friend email.
• classy_sc_template.sst - shopping cart template used by the Classy theme. This template controls the look of all screens in the shopping cart checkout process.
• classy_cr_template.sst - customer registration template used by the Classy theme. This template controls all the customer registration screens as well as any emails which are sent out in relation to the customer registration feature.
• classy_se_template.sst - search results template used by the Classy theme. This template controls how the search results screen looks.
• classy_se_link_template.sst - search link result template used by the Classy theme. This template controls how the search result links are formatted.
• classy_se_prod_template.sst - search product result template used by the Classy theme. This template controls how the search result products are formatted within the search results screen.
• classy_cr_javascript.js - JavaScript used by the Classy theme for the customer registration links.
• classy_cr_styles.css - CSS used by the Classy theme for the customer registration screens.
• classy_cr_vars.sst - VARS for the customer registration screens such as the colors used.
• classy_gc_styles.css - CSS used by the Classy theme for the gift certificate screen.
• classy_gc_vars.sst - VARS for the gift certificate screen including colors used.
• classy_pa_minicart.js - JavaScript for the mini cart on pages using the Classy theme.
• classy_pa_styles.css - CSS used by the Classy theme for the pages in your store.
• classy_pa_vars.sst - VARS for the pages including colors used.
• classy_pr_more_info_styles.css - CSS used by the Classy theme for the product more information pages.
• classy_pr_moreinfo_vars.sst - VARS for the product more information pages including the colors used.
• classy_pr_subproduct_vars.sst - VARS for the subproducts.
• classy_pr_vars.sst - VARS for the product including alignment options.
• classy_sc_styles.css - CSS used by the Classy theme for the shopping cart screens.
• classy_sc_vars.sst - VARS for the shopping cart screens including colors used.
• classy_tf_vars.sst - VARS for the tell a friend feature including colors used.

Enhance This Template

The Classy Theme by default will use the Table Shade Color as the background in the header section. If you would like to change this to use an image rather than a solid color you can do that by adding your own HTML/image to the header field within ShopSite. Below are header images that you can save to your desktop, upload into your ShopSite store, and then set as your header background. Here are the steps you would take to add one of these images into your header.

1. Save Image - Click on the image you would like to use. This will open the actual header image in a new window or new tab. Right click the actual header image, and then save to your desktop.
2. Upload Image - Login to your ShopSite store and go to the Images screen. Upload the image you have selected into the media folder.
3. Add HTML to Header - Copy the HTML in the text field below, and paste it into the header field within ShopSite (Preferences > Page Header/Footer).
4. Replace with Your Information - Replace the "media/gradient-additional-red.jpg" with the image URL for the image you uploaded into your store (you can get this URL by going to Images > View Image), as well as replace "Store Name Here" with your store name.

<table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-image: url(media/gradient-additional-red.jpg); background-position: top left;" height="150"> <tr> <td valign="top"><h1>Store Name</h1></td> </tr> </table>

Customize The Classy Theme Further:

• Add your own links to the left navigation bar
• Add in a header graphic.