ShopSite Cross Sell Theme
Version Added: ShopSite Version 8.1
Color Options: Blues, Blue/Gold, Burnt Orange, Cool, Green, Pink, Primary, Sky, Southwest
This template was added before the cross sell feature in ShopSite was added. Because of this, this template uses the subproduct feature to list cross sell items on the product more information page. This template is also an entirely CSS driven template.
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 main body background color as well as the hover color for the left navigation links.
- Link Color - used as the link color for all links.
- Visited Link Color - used as the background color for the left navigation bar.
- Active Link Color - used as the page background color as well as the link hover color for all links.
- Table Shade Color - used as the table shade color for the shopping cart pages.
- Background Image - used both as the page background image and the main body background image.
Subproducts
The Cross Sell Theme displays subproducts different than other ShopSite themes. The Cross Sell Theme was created before the cross sell feature was added into ShopSite, so this template uses the subproduct feature to list cross sell items on the product more information pages. If you assign subproducts to parent products while using the Cross Sell Theme, those subproducts will be listed in the left navigation bar on the parent product more information page.
Theme Files
- CrossSell-Sky-page - page template used by the Cross Sell theme.
- CrossSell-Sky-product - product template used by the Cross Sell theme.
- CrossSell-Sky-gc - gift certificate template used by the Cross Sell theme. This template controls how the gift certificate purchase screen looks as well as the format for the printable and digital gift certificate.
- CrossSell-Sky-tf - tell a friend template used by the Cross Sell theme. This template controls how the tell a friend pop up looks as well as the format of the tell a friend email.
- CrossSell-Sky-sc - shopping cart template used by the Cross Sell theme. This template controls all screens in the checkout process as well as the email receipt to the customer when the order is completed.
- CrossSell-Sky-cr - customer registration template used by the Cross Sell theme. This template controls all the customer registration screens as well as any customer registration emails.
- CrossSell-Sky-search - search results template used by the Cross Sell theme. This template controls the basic layout of the search results screen.
- CrossSell-Sky-cr-cgi.js - JavaScript for the customer registration links in the Cross Sell theme which are displayed on the CGI pages (such as the search and the cart).
- CrossSell-Sky-cr.css - CSS for the customer registration screens with the Cross Sell theme.
- CrossSell-Sky-cr.js - JavaScript for the customer registration links in the Cross Sell theme.
- CrossSell-Sky-crFooter - code which is displayed at the bottom of the customer registration screens using the Cross Sell theme.
- CrossSell-Sky-crHeader - code which is displayed at the top of the customer registration screens using the Cross Sell theme.
- CrossSell-Sky-gc-em.css - CSS for the gift certificate email.
- CrossSell-Sky-gc-pr.css - CSS for the printable gift certificate.
- CrossSell-Sky-gc.css - CSS for the gift certificate order screen with the Cross Sell theme.
- CrossSell-Sky-link.sst - code which defines how the left links look with the Cross Sell theme.
- CrossSell-Sky-mi.css - CSS for the product more information page with the Cross Sell theme.
- CrossSell-Sky-MiniCart.js - JavaScript for the mini cart in the Cross Sell theme.
- CrossSell-Sky-pa-vars.sst - VARS for the pages using the Cross Sell theme including page colors.
- CrossSell-Sky-pr-vars.sst - VARS for the products using the Cross Sell theme including alignment settings.
- CrossSell-Sky-sc.css - CSS for the shopping cart screens using the Cross Sell theme.
- CrossSell-Sky-se.css - CSS for the search results screen using the Cross Sell theme.
- CrossSell-Sky-vars.sst - general VARS for the Cross Sell theme.
- CrossSell-Sky.css - general CSS for the Cross Sell theme.
Enhance This Template
The Cross Sell template does have a header section which is automatically populated with links including a home link and a shopping cart link. However, the background color for the header section is just a plain color, the same color used in the main body of the page. If you would like to add a more customized header you can save one of the images below to your desktop, upload it into your ShopSite store, and then add the HTML below to your header field. This will allow you to add a header which gives your store a more complete feel.
- Save Image - Click on the image you would like to use. This will open the actual header image in a new window or new tab. Right click the actual header image, and then save to your desktop.
- Upload Image - Login to your ShopSite store and go to the Images screen. Upload the image you have selected into the media folder.
- Add HTML to Header - Copy the HTML in the text field below, and paste it into the header field within ShopSite (Preferences > Page Header/Footer).
- Replace with Your Information - Replace the "media/crosssell-swish-red.jpg" with the image URL for the image you uploaded into your store (you can get this URL by going to Images > View Image), as well as replace "Store Name Here" with your store name and "store slogan goes here" with your store slogan.
