ShopSite Business Casual Theme
Version Added: ShopSite Version 10 sp2
Theme Colors & Backgrounds
Colors and background images for this theme can be modified under Preferences > Layout Settings.
- Text Color - Page text, product text, cross sell text, and links at the top of the page.
- Background Color - Background for whole page.
- Link Color - Left and top navigation link hover color, search "Go" box color, and bar of color near the bottom of the page.
- Visited Link Color - Left navigation link color, "Send to a Friend" link color, and mini cart text color.
- Active Link Color - Top navigation background color.
- Table Shade Color - Table shade, top and bottom borders for page body, and gift certificate box border in cart.
- Background Image - Repeating pattern over the whole page.
- Color 1 - SKU text color.
- Color 2 - Top navigation link text, and link text for the links at the bottom of the page.
- Color 3 - Thin line of color beneath the top navigation bar.
- Color 4 - Side borders for body of the page and recalculate text background color.
- Color 5 - Do not change this color. It controls which CSS file is used for the theme.
Theme Tips and Tricks
This theme is using a template with many tricks that you can do it further enhance the look of your store. The main trick has to do with the include file called Multi-Use-Theme-Select.sst. What you'll want to do is (1) first go to Merchandising > Custom Templates > Includes > Copy ShopSite Include, and make a copy of the Multi-Use-Theme-Select.sst include file. (2) Next, make a copy of YOUR copy and name it the exact same name as the original. You can then remove your copy (the copy which does not have the exact same name as the original). In this include, you will find many VAR tags. One example is [-- VAR.SubproductDisplay "select" --]. This VAR tag determines how the subproducts are displayed for the products in your store. "Select" means that they are displayed in a pull down menu. You can change the text "select" to "radio" to have the subproducts be radio buttons, "checkbox" to have the subproducts displayed with checkboxes to add multiple subproducts to the cart at once, or "table" which will display the subproducts in a table format, each with its own add to cart button. (3) Once you have changed the VAR tags to "yes" or "no" or something else, you can save changes, then go to Utilities > Publish > Regenerate, to republish your website using the new settings.
Other options found in the file 3Column-SelectTheme.sst include:
- [-- VAR.Breadcrumbs "yes" --]: this tag will control the display of breadcrumbs on your product more information pages.
- [-- VAR.CartProgressBar "yes" --]: this tag will control the display of the cart checkout progress bar.
- [-- VAR.MoreInfoOptionsOnly "no" --]: this tag will remove ordering options, quantity input, etc, from displaying on your product category pages, so that these fields are only displayed on your product more information pages.
- [-- VAR.SearchOnAllPages "no" --]: this tag will add the search field in the header to all pages including the cart pages.
- [-- VAR.AdditionalSEO "no" --]: this tag will repeat certain fields on your store pages for additional SEO.
- [-- VAR.ExtraProductFields "no" --]: this tag will display all of your additional product fields on your product more information pages.
- [-- VAR.SubproductDisplay "select" --]: this tag controls the format your product subproducts are displayed in.
Another feature available with the Multi-Use template is the option to have the category navigation (page links) on the left, right, or right in the middle of the page. You can choose this by changing the template. Most themes default with the navigation menu on the left. To change this you would go to Pages > Edit Page Layout, and change the template to Multi-Use-Page-Right.sst or Multi-Use-Page.sst (for center navigation). You can also control the navigation menu on the search pages and the gift certificate pages. The product more information pages will be set by the page template. The customer registration and cart templates do not display the navigation at all.
- Multi-Use-Page-Left.sst - page template with left navigation.
- Multi-Use-Page-Rightt.sst - page template with right navigation.
- Multi-Use-Page.sst - page template with navigation in main body.
- Multi-Use-Product.sst - product template.
- Multi-Use-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.
- Multi-Use-GiftCert-Left.sst - gift certificate template with left navigation.
- Multi-Use-GiftCert-Right.sst - gift certificate template with right navigation.
- Multi-Use-TellAFriend.sst -tell a friend template which controls how the tell a friend pop up looks, as well as how the tell a friend email looks.
- Multi-Use-Cart.sst - shopping cart template 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.
- Multi-Use-Registration.sst - customer registration template which controls how all of the customer registration screens look, as well as how the customer registration emails look.
- Multi-Use-Search-Left.sst - search template which controls the layout of the search results screen with a left navigation.
- Multi-Use-Search-Right.sst - search template which controls the layout of the search results screen with a right navigation.
- Multi-Use-Search.sst - search template which controls the layout of the search results screen with no side navigation.
- BasicPage-Link.sst - default link template for page links on the search results screen.
- BasicProduct-Search.sst - default product template for the product results on the search results screen.
- MU-000005.css - include with CSS which sets colors.
- MU-000005.css - publish file containing CSS for this theme.
- MU-Basics.css - publish file containing all default CSS for this theme.
- Multi-Use-Cart-Content.sst - include with the cart screen information.
- Multi-Use-Cart-Vars.sst - include with the cart VARS such as cart colors.
- Multi-Use-Confirmation-Content.sst - include with the confirmation screen information.
- Multi-Use-crFooter.sst - include file specifying the bottom of the customer registration screens.
- Multi-Use-crHeader.sst - include file specifying the top of the customer registration screens.
- Multi-Use-Footer.sst - include file which specifies the footer IF there is no footer specified.
- Multi-Use-GiftCert-Vars.sst - include file with the VARS such as gift certificate colors.
- Multi-Use-Menu-Sub.sst - include file with the sub menu links.
- Multi-Use-Menu.sst - include file with the main menu, or navigation links.
- Multi-Use-More-Info-Content.sst - include file with the product more information screen inner code.
- Multi-Use-More-Info-Vars.sst - include file with the VARS such as colors and alignment.
- Multi-Use-More-Info.sst - include file for the more information page frame.
- Multi-Use-Page-Content.sst - include file for the page inner code.
- Multi-Use-Page-SideBar.sst - include file containing the left side bar code such as the payment options image, security logo, and gift certificate link.
- Multi-Use-Page-Vars.sst - include file with the VARS such as page colors and alignment.
- Multi-Use-Search-Content.sst - include file with the search inner code.
- Multi-Use-Shipping-Content.sst - include file with the checkout, shipping and billing address screen inner code.
- Multi-Use-ThankYou-Content.sst - include file with the thank you screen inner code.
- Multi-Use-Theme-Select.sst - include file which specifies the CSS files to use, and options such as how subproducts are displayed.