ShopSite Modern Theme

Version Added: ShopSite Version 9

Color Options: Blue/Brown, Blue/Green, Blue/Yellow, Green, Muted, Natural, Orange, Pink, Pink/Green, Red/Yellow

The Modern Theme does allow you to control nearly all of the colors on the page. This makes it easy for merchants to change the colors to get the exact color they way. If you set a background image, that image will fill up the top navigation bar. This theme also includes left, top and right links.

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

• Text Color - used as the text color on your pages.
• Background Color - used as the background color on your pages.
• Link Color - used as the left and right bar color, the footer background color as well as the link color for links in the main body of the page.
• Visited Link Color - used as the search bar background color, the left and right link border color and also used as the hover color for the top navigation links.
• Active Link Color - used as the hover color for links on the left and right, as well as used for the background color for the text 1 page field and the product add to cart section.
• Table Shade Color - used as the table shade for the shopping cart pages.
• Background Image - used for the top navigation bar background.
• Additional Color - one additional color is used for the page text 1 and more information page add to cart section border as well as the stripe of color above the footer. This color is determined by the template and what color scheme you have selected.

Subproducts
The Modern Theme displays subproducts different than other ShopSite themes. Subproducts are displayed in a list of checkboxes. If you would like the parent product to be listed in the list as one of the checkboxes, you can add the parent product as a subproduct of itself. This will make is so that the parent product is included in the list of subproducts. An example of this can be seen below. Each of the options in the list is it's own product.

Rose Lotion 4 oz. $3.99
Rose Lotion 8 oz. $5.99
Rose Lotion 12 oz. $8.99

Not using this theme but want to have your subproducts displayed how the Modern theme displays them? Click here to learn how you can add this subproduct feature to your custom template.

Theme Files

• Modern.sst - page template.
• ModernProductTemplate.sst - product template.
• Modern-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.
• Modern-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.
• Modern-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.
• Modern-cr.sst - customer registration template which controls how all of the customer registration screens look, as well as how the customer registration emails look.
• Modern-Search.sst - search template which controls the layout of the search results screen.
• search_link - default link template for page links on the search results screen.
• search_product - default product template for the product results on the search results screen.
• Modern-Colors.sst - file which sets the line color in the footer.
• Modern-crFooter.sst - code at the bottom of the customer registration screens including ending the customer registration form.
• Modern-crHeader.sst - code at the top of the customer registration screens including starting the customer registration form.
• Modern-crLinks.sst - JavaScript for the customer registration screens found in the top navigation bar for this theme.
• Modern-MoreInfoPage.sst - code for the product more information page.
• Modern.css - css for this theme.
• Modern_sc_cart.css - css for the shopping cart screens.

Enhance This Template

The Modern Theme uses the background image as the background for the top navigation bar. if you would like to change the top navigation bar to another color or another design you would need to upload a new image. Below are some images that you can use with the modern theme to get a new color for your top navigation bar. The steps to add these to your store are as follows:

1. Save Image To Desktop - Click the image to get the actual image in a new window. Save the image to your desktop. If you are using a PC you can right mouse click the image and select "Save Image As" to save the image to your desktop.
2. Upload Image To Store - Upload the image into your ShopSite store by going to Images > Upload an Image.
3. Set Image As Background Image - Set the image you have uploaded as the background image for all screens within your ShopSite store. You would do this for your pages by going to Pages > Edit Page Layout. You can set this image as the background image for your more information page by going to Preferences > More Info. For the shopping cart pages you would go to Commerce Setup > Order System > Layout Info, and set the background graphic there.