ShopSite Congruence Theme

Version Added: ShopSite Version 10

Color Options: Black, Blue, Clear Tabs, Happy Blue, Green, Orange, Red, Slate Pink, Yellow

Adding tabs in the Congruence Template

The Congruence theme is setup so that there are up to five tabs at the top of the pages. These tabs include links to the home page, the gift certificate screen, the sign in and register screens for customer registration and a shopping cart link. If you do not have customer registration or gift certificates turned on, then only the "Home" tab and "Your Shopping Cart" tab will be displayed at the top of the page.

If you would like to add your own tabs you would need to modify the Congruence template files. You can add tabs to the Congruence template by following the instructions below. You will need to modify the template itself, which requires ShopSite Manager or Pro.

First, go to Merchandising > Custom Templates > Page/Product, and make a copy of the Congruence.sst page template. In the template, there is a section which looks like this:

<div id="toptabs">
  <ul id="tabs">
    <li class="tab_home"><a href="[-- MyStoreURL --]" title="[-- STORE.Name --]"><span>Home</span></a></li>
[-- IF GiftCert --]    <li class="tab"><a href="[-- SHOPPING_CART_URL Base --]/order.cgi?storeid=[-- STORE.ID --]&cert=gift"><span>[-- STORE.SC_GiftCertificate --]</span></a></li>[-- END_IF --]
[-- IF SC_Registration --]
  [-- INCLUDE Congruence-Registration.js PROCESS --]
[-- END_IF --]
    <li class="tab"><a href="[-- SHOPPING_CART_URL --]" title="[-- STORE.SC_YourShoppingCart --]"><span>[-- STORE.SC_YourShoppingCart --]</span></a></li>
  </ul>
</div>

Next change the template code to include the links you want. You will want to change the code so that it looks similar to the following, replacing the three generic links with your own link names and page file names.
Note: there can only be up to five tabs at the top. The template is built to have up to five tabs; any more than five tabs will cause the tabs to not layout correctly.

<div id="toptabs">
  <ul id="tabs">
    <li class="tab_home"><a href="[-- MyStoreURL --]" title="[-- STORE.Name --]"><span>Home</span></a></li>
    <li class="tab_home"><a href="[-- OUTPUT_DIRECTORY_URL --]/page1.html"><span>Generic 1</span></a></li>
    <li class="tab_home"><a href="[-- OUTPUT_DIRECTORY_URL --]/page2.html"><span>Generic 2</span></a></li>
    <li class="tab_home"><a href="[-- OUTPUT_DIRECTORY_URL --]/page3.html"><span>Generic 3</span></a></li>
    <li class="tab"><a href="[-- SHOPPING_CART_URL --]" title="[-- STORE.SC_YourShoppingCart --]"><span>[-- STORE.SC_YourShoppingCart --]</span></a></li>
  </ul>
</div>

You will want to repeat the first two steps for the Congruence-MoreInfoPage.sst Include file and the Congruence-Search.sst search template file.
Lastly you will need to make copies of your modified copies and name them exactly the same as the originals. That way your modified files will override the original files.

Customize the Congruence Theme Further:

Cookbook Home Page>>ShopSite Built-In Templates>>Congruence Built-In ShopSite Theme Top Tabs