ShopSite Cross Sell Theme

Version Added: ShopSite Version 8.1

Color Options: Blues, Blue/Gold, Burnt Orange, Cool, Green, Pink, Primary, Sky, Southwest

Customize the Cross Sell Template - Add Your Own Links to the Top Navigation Bar

The Cross Sell theme displays a few top navigation links which are found on the pages, more information pages, customer registration pages, gift certificate page, shopping cart pages and the search result pages. The Cross Sell theme also has left navigation links which are listed on your store pages (using the loop link feature), your product more information pages (using the subproduct feature), and there is a left navigation bar on your search result pages which does not contain any links.

If you would like to add your own links to the top of left navigation, or have the left navigation links the same on the pages, product more information pages and search result pages, you will need to make changes to the Cross Sell template files. Below are the steps for changing the top navigation links in the Cross Sell theme.

1.   Copy the Cross Sell theme files. Below are a list of files that you would need to copy in your store.

• CrossSell-Sky-page - this is the Cross Sell page template.
  (Merchandising > Custom Templates > Page/Product > Copy ShopSite Template)
• CrossSell-Sky-product - this is the Cross Sell product template.
  (Merchandising > Custom Templates > Page/Product > Copy ShopSite Template)
• CrossSell-Sky-search - this is the Cross Sell search template.
  (Merchandising > Custom Templates > Advanced > Copy ShopSite Template)
• CrossSell-Sky-gc - this is the Cross Sell gift certificate template.
  (Merchandising > Custom Templates > Advanced > Copy ShopSite Template)
• CrossSell-Sky-sc - this is the Cross Sell shopping cart template.
  (Merchandising > Custom Templates > Shopping Cart > Copy ShopSite Template)
• CrossSell-Sky-crHeader - this is the header section of the Cross Sell customer registration pages.
  (Merchandising > Custom Templates > Includes > Copy ShopSite Template)

2.   Locate the DIV section with id="globalNav". Within all of these templates and template files locate the DIV section named “globalNav.” The “globalNav” section will look similar to the code below:

<div id="globalNav"> [-- IF ANALYTICS_MULTI_DOMAIN --] <script type="text/javascript" language="JavaScript"> document.write('<a href="javascript:__utmLinker(\'[-- MyStoreURL --]\');">[-- STORE.Home --]</a>'); </script> <noscript> <a href="[-- MyStoreURL --]">[-- STORE.Home --]</a> </noscript> [-- ELSE --] <a href="[-- MyStoreURL --]">[-- STORE.Home --]</a> [-- END_IF --] [-- IF STORE.Type "PROFESSIONAL" --] [-- IF SC_Registration --]  |  [-- INCLUDE VAR.CR_JS PROCESS --] [-- END_IF --] [-- IF GiftCert --]  |   [-- GiftCertLink --] [-- END_IF --] [-- IF TELLAFRIEND --]  |   [-- TELLAFRIEND VAR.tell_friend_link --] [-- END_IF --] [-- END_IF --] </div> <!-- end globalNav -->

3.   Modify the links or add your own links using the format below. The complete top bar includes the following links: Home, Click here to Sign In, Click here to Register, Gift Certificates, Send to a Friend!, Your Shopping Cart. You can rearrange these links, remove these links or add your own links. For this example I am going to keep the home link and gift certificate link, I'll remove the customer registration links and tell a friend links, and I will add a contact us and about us link.

<a href="http://domain.com/filename.html">Page Name</a>

Your final code should look similar to:

<div id="globalNav"> [-- IF ANALYTICS_MULTI_DOMAIN --] <script type="text/javascript" language="JavaScript"> document.write('<a href="javascript:__utmLinker(\'[-- MyStoreURL --]\');">[-- STORE.Home --]</a>'); </script> <noscript> <a href="[-- MyStoreURL --]">[-- STORE.Home --]</a> </noscript> [-- ELSE --] <a href="[-- MyStoreURL --]">[-- STORE.Home --]</a> [-- END_IF --] <a href="http://domain.com/contact.html">Contact Us</a> <a href="http://domain.com/about.html">About Us</a> [-- IF GiftCert --]  |   [-- GiftCertLink --] [-- END_IF --] </div> <!-- end globalNav -->

4.   Copy YOUR copy and name it the EXACT same as the original. Once you have finished making modifications, you can copy your copied templates and give them the exact same name as the originals. If you do this, your new templates will override the original templates. Once your file names override the originals, you can use the Cross Sell theme and it will read your new files and display your new links.

5.   Publish. To publish your store with the modified files and new links you can go to Utilities > Publish > Regenerate.

Customize the Cross Sell Theme Further

• Add your own links to the left navigation bar.
• Learn more about the Cross Sell theme.