ShopSite Content Focus Theme

Version Added: ShopSite Version 12

Color Options: Gray/Pink.

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

• Text Color - text color, and some header/footer link colors.
• Background Color - page background color.
• Link Color - link color and hover color for side links.
• Visited Link Color - button color, side link color and hover color for main links.
• Active Link Color - navigation hover color and store name (if no logo is used) color.
• Table Shade Color - background color of line items in the shopping cart.
• Background Image - page background image.
• Color 1 - borders on products - light gray.
• Color 2 - borders on products - darker gray.
• Color 3 - on sale price color.
• Color 5 - must be #000005. Do not change this color. It controls which CSS file is used for the theme.

Theme Files

To modify any of these template files you would go to Merchandising > Custom Templates, and click on the section the template file is in (i.e. "Product Templates" or the product template files or "Include Files" for include or publish files). Then click on "Copy ShopSite Template." Make a copy of the ShopSite template you want to edit. Save changes. Then make a copy of your copy and rename it the exact same name as the original. (You can then delete your original copy with a different name). Your copy will override the original template file. If you ever want to revert back to the original template file you can simply delete (or rename) your copied file and regenerate your site.

• Full-Page.sst - page template.
• Full-Product.sst - product template.
• Full-GiftCert.sst - gift certificate template which controls how the gift certificate ordering page looks, how the gift certificate email receipt looks, and how the printable email receipt within the back office looks.
• Full-Registration.sst - customer registration template which controls how all of the customer registration screens look, as well as how the customer registration emails look.
• Full-Search.sst - search template which controls the layout of the search results screen.
• Full-Cart.sst - shopping cart template which controls the layout of the shopping cart screens and post-order emails.
• full.css - publish file containing CSS for this theme.
• full.js - publish file containing JavaScript for this theme (mini cart, registration, heights).
• Full-Head.sst - include file specifying the CSS files, JavaScript files and other meta tags.
• Full-Header.sst - include file containing the start of the page HTML.
• Full-Footer.sst - include file containing the header, footer, and side navigation areas on all pages.
• Full-VARs-DOCTYPE.sst - include file specifying the VAR tags for this theme and the DOCTYPE HTML tag.

All Templates Using the Full Template Files
This theme uses the Full Template files. These files are used by many other themes. The templates check the store color field 5 to see what color is selected. Based on the color selected, different CSS will be rendered to change the look of your website. The additional themes using the Full template files are: Floating Page, .

Add Breadcrumbs

To add breadcrumbs to this theme in ShopSite Manager or ShopSite Pro, you would follow these steps. (1) Go to Merchandising > Custom Templates > Includes > Copy A ShopSite Include, and make a copy of the Full-VARs-DOCTYPE.sst include file. (2) Now make a copy of your copy and name it the exact same name as the original, Full-VARs-DOCTYPE.sst. (3) Edit the include file. In the VAR tag for breadcrumbs, change "no" to "yes" to display breadcrumbs. (4) Save changes, then go to Utilities > Publish > Regenerate, to recreate your entire store with the new breadcrumb feature added.

Add Your Own CSS

For designers who want to add their own styles but would like to keep all the main functionality as well as styles for most of the features, you can upload your own CSS file with additonal styles. The instructions below tell you the easiest way to do this:

1. Go to Preferences > Layout Settings, and change the Store Color 5 to #000010.
2. Under Merchandising > Custom Templates > Includes > Create New Publish File, and name the new publish file full-alternate.css.
3. Now you can edit the publish file by adding any CSS styles that you want. Publish your changes each time you make changes to this publish file.