Hover over the images below to see a small of each color scheme to the right.
The Sleek Theme includes both page links down the left, and store links at the top. This template includes many graphics as part of the layout. You would not be able to change these graphics from within the back office of ShopSite, but you can hange the rest of the colors on the page including the link colors, background colors and text colors. When customers click to go to one of the pages listed on the left, that page will be highlighted (assuming the link to that page is on that page). One unique feature within this template is how the subproducts are displayed (see below).
How Colors and Backgrounds Are Used
Text Color - used as the text color and the color of links in the left navigation.
Background Color - used as the page background color.
Link Color - used as the link color and the "send to a friend" link color.
Visited Link Color - used as the shopping cart link color, product price color and the registration link (in the cart) color.
Active Link Color - used as the dotted line color and the active link color for links on the left. The active link color for the shopping cart screen is used to control the background images in the top navigation bar and the title bars in the body.
Table Shade Color - used as the table shade color for products on the shopping cart screen.
Background Image - will override the page background color if used.
Subproducts
The Sleek Theme displays subproducts different than other ShopSite themes. Subproducts are displayed in a pull down menu. If you would like the parent product to be listed in the pull down menu as well, you can add the parent product as a subproduct of itself. This will make is so that the parent product is listed in the pull down menu along with the subproducts. An example of this can be seen below. Each of the options within the pull down menu is its own product.
Not using this theme but want to have your subproducts displayed how the Sleek and Congruence themes display them? Click here to learn how you can add this subproduct feature to your custom template.
Theme Files
Sleek.sst - page template used for the Sleek theme.
SleekProductTemplate.sst - product template used for the Sleek theme.
Sleek-GiftCert.sst - gift certificate template for the Sleek theme 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.
Sleek-TellAFriend.sst - tell a friend template for the Sleek theme which controls how the tell a friend pop up looks, as well as how the tell a friend email looks.
Sleek-Cart.sst - shopping cart template for the Sleek theme which controls how all the pages of the shopping cart look, how the order email receipt looks as well as how the cross sell items are laid out on the shopping cart screens.
Sleek-cr.sst - customer registration template for the Sleek theme which controls how all of the customer registration screens look, as well as how the customer registration emails look.
Sleek-Search.sst - search template for the Sleek theme which controls the layout of the search results screen.
search_link - default link template for page links on the search results screen.
SleekSearchProductTemplate.sst - product template which controls how the products appear on the search results screen.
Sleek-Cart.css - include file with CSS for the shopping cart screens and controlling elements on those screens only.
Sleek-Colors.sst - include file which assigns the appropriate CSS file to the color scheme it goes with based off of the cart active link color.
Sleek-cr.css - include file containing the CSS for the customer registration screens.
Sleek-crHeader.sst - include file containing the code for the top of the customer registration screens including starting the form, pulling CSS and creating the HEAD section.
Sleek-crFooter.sst - include file containing the code for the bottom of the custom registration screens including ending the form and closing the BODY and HTML.
Sleek-Head.sst - include file containing the gift certificate link (Pro only). If you would like to add your own left links, or additional left links you can do so by editing this file.
Sleek-LeftLinks.sst - include file containing the links to the CSS files for this theme. If you would like to modify the CSS or add your own you can edit this file to do so.
Sleek-MiniCart.js - include file containing the JavaScript for the mini cart.
Sleek-MoreInfoPage.sst - include file which controls how the more information page looks.
Sleek-TopLinks.sst - include file containing the links found on the top navigation bar. If you would like to change these links you can do so by editing this file.
Sleek.css - include file containing the general CSS for this template used on all screens, specifically how the color fields are used.
External CSS - this theme also uses external CSS files (files found where ShopSite images are stored for your store). If you would like to change these files, you can do so by editing the 'Sleek-Head.sst' file. Directions for making these changes can be found below, or in the include file itself.
ShopSite Features Not Available With This Theme
Page Width - the width of the pages in this theme is set and cannot be changed.
Right Navigation - in version 11 there is a new navigation feature which allows you to add a global navigation to the left, right and footer of all your pages. The right navigation feature is not available with this theme.
Modifying the CSS in the Sleek Theme
The Sleek theme handles the CSS files differently than other built-in ShopSite themes. Instead of the CSS being included in the templates and added as part of the code on the page, the CSS files are kept in the ShopSite images directory on the server and then linked to for each page. There is a single include file within ShopSite which links to the CSS files for the Sleek theme. If you would like to modify the CSS of this theme, you would follow the following steps:
Copy the Sleek-Head.sst file. Go to Merchandising > Custom Templates > Includes, and make a copy of the Sleek-Head.sst include file.
Rename same as the original. Next make a copy of YOUR copy and rename it the exact same as the original. This will make it so that your file overrides the original.
Copy Sleek theme CSS.Click here to see the CSS for the Sleek theme. Copy all of the CSS.
Paste Sleek theme CSS into include file. Go to Merchandising > Custom Templates > Includes > Sleek-Head.sst > Edit Include. In the include file you will see a section which looks like:
#<style type="text/css">
#<!--
#-->
#</style>
Remove the pound signs (#) from in front of all four lines, so the code would look like:
<style type="text/css">
<!--
-->
</style>
Then paste the CSS you copied from the page above between the <!-- and -->.
Save changes and view your page. Once you have the include file setup the way you want, save changes then go to Pages > Preview to see the changes.
Adding/Hardcoding your own links into the top nav or left nav of the Sleek theme Note: in ShopSite version 11 this functionality is built in using the Navigation feature. You can configure this by going to Preferences > Navigation, and using the Left Navigation feature setup.
The Sleek theme is setup in such a way that you would be able to add your own links to the top navigation bar or left navigation bar. For the top bar, only five links fit across the top so if you would like to remove some of the ShopSite links, such as the customer registration links, you can remove those links from the Sleek-TopLinks.sst file and add your own links in their place.
For the left navigation you can add your own links in additional to looping the links on your store pages, or you can choose to not use the page link feature within ShopSite and add all of your own links. You would do this by making a copy of the Sleek-LeftLinks.sst include file, adding your own links (format for these links is shown within the include file), then saving the changes to that file and republishing your store. Note, your copy of either of these files needs to be the exact same name as the original so that it will override the original.
Copy Sleek Include File. Make a copy of the 'Sleek-TopLinks.sst' or 'Sleek-LeftLinks.sst' include file.
Copy YOUR copy and Rename Same as Original. Make a copy of YOUR copy and rename it the exact same name as the original so that your file overrides the original.
Add Your links. Add your own links to the file. If the file has instructions for the format of the link then follow those instructions.
Publish. Once you have setup your include file you can go to Utilities > Publish > Regenerate, to republish your website with the updated links.
