ShopSite Classy Theme

Version Added: ShopSite Version 8.1

Color Options: Blue, Brown, Deep Red, Green, Olive, Orange, Silver, USA

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.

Theme Colors & Backgrounds
Colors and background images for this theme can be modified under Preferences > Layout Settings.

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.

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.

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.
Upload Image - Login to your ShopSite store and go to the Images screen. Upload the image you have selected into the media folder.
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).
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>

DOBA Intergation Image Modification
If you are using the DOBA product listing integration with the Classy Theme in ShopSite, you may want to use this helpful tip for images. You may have noticed that the DOBA images are not all the same size. This is mostly because the products and their images are all coming from different drop shippers. By adding the code below, you force all the images to look uniform on your store pages, and make sure they are not jumbo size on the more information pages. Simply copy and paste the code below into a field that is displayed on all pages, such as one of the text fields under Preferences > Layout Settings.