Customize the Crop Circles Template - Add Your Own Links to the Top Navigation Tabs
The Crop Circles Theme creates a layout where you have links on the top, and left sides of the page. The links on the top navigation bar include the following:
- Home - link to the "My Store" link found under Preferences > Hosting Service.
- Gift Certificates - link to the Gift Certificates page if you have enabled this feature (Pro only).
- Click Here to Register - link to customer registration sign up page if you have enabled this feature (Pro only).
- Click Here to Sign In - link to customer regstration sign in page if you have enabled this feature (Pro only).
- Your Shopping Cart - link to shopping cart.
If you would like add you own links, you need to modify the Crop Circles template itself. Below are the steps that you would go through in order to modify the Crop Circles templates to show your custom top navigation tabs.
1. Copy the Crop Circles templates. Below are a list of files and templates that you would need to copy in your store.
- CropCircles.sst - this is the crop circles page template.
(Mechandising > Custom Templates > Page/Product > Copy ShopSite Template) - CropCircles-Cart.sst - this is the crop circles shopping cart template.
(Mechandising > Custom Templates > Shopping Cart > Copy ShopSite Template) - CropCircles-Search.sst - this is the crop circles search template.
(Mechandising > Custom Templates > Advanced > Copy ShopSite Template) - CropCircles-GiftCert.sst - this is the crop circles gift certificate template.
(Mechandising > Custom Templates > Advanced > Copy ShopSite Template) - CropCircles-MoreInfoPage.sst - this is the crop circles product more information page file.
(Mechandising > Custom Templates > Includes > Copy ShopSite Template) - CropCircles-crHeader.sst - this is the header section of the crop circles customer registration pages.
(Mechandising > Custom Templates > Includes > Copy ShopSite Template)
2. Locate the DIV section with id="toplinks". Within all of these templates and template files locate the DIV section named “toplinks.” The “toplinks” section will look like the code below:
3. Add your own links using the format below. If you would like to remove the ShopSite generated links, you can remove all the code between the <li> and </li> including all the information between each of these tags. Below the example shows the ShopSite links as well as additional links. Add the line of code shown below, and replace the URL with the full URL to the page you want to link to, and replace "Page Name" with the text you would like displayed for the link.
<li class="tab"><a href="http://domain.com/filename.html">Page Name</a></li>
Your final code should look similar to:
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 crop circles theme and it will read your new files and display your new links.
Customize the Crop Circles Theme Further:
