ShopSite Bar Navigation 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 color, product name and text color, cross sell text color, mini cart text color, and link color for links at the very top of the page
- Background Color - Background color for the header and body.
- Link Color - Top navigation background color, top navigation link hover color and left navigation link hover color.
- Visited Link Color - Left navigation link color, footer background color, flyout menu background color for top navigation, and "send to a friend" link color.
- Active Link Color - Search box "Go" border.
- Table Shade Color - Top and bottom of page border line colors, table shade color for checkout, gift certificate box border in checkout.
- Background Image - Background image for the body and header of the page. Only overridden for the product text fields.
- Color 1 - Not applicable in this theme.
- Color 2 - Top navigation link color, and link color for the links found at the very bottom of the page.
- Color 3 - Product separator line in checkout table, and a thin line near the top navigation.
- Color 4 - Recalculate background color, body separation border for the pages, and cross sell line 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-000004.css - include with CSS which sets colors.
- MU-000004.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.