Build a "Search Engine Friendly" Online Store
in just a few clicks!

  StaticStore » StaticStore Manual » Customization (Look & Feel)

5. Customization (Look & Feel)

    5.1 Customization Basics
    5.2 Template Basics
    5.3 How to edit templates
    5.4 What is the variable words in the templates/HTML files?
    5.5 How to use images in templates
    5.6 Default Store Template Customization Explanation
    5.7 General Template Guidelines
    5.8 How to use template includes
    5.9 Global Variables (Variables available to all templates)
    5.10 How to use custom category templates
        5.10.1 How to create custom template sets
        5.10.2 How to assign custom templates to categories
    5.11 How to create your front page
    5.12 How to customize your front page
    5.14 Customizing The Search Results Template Plug-Ins
    5.15 Customizing The Rating Templates Plug Ins
    5.16 Customizing The Review Templates Plug Ins
    5.17 Customizing The What's New Template Plug Ins
    5.18 Customizing The Top Hits Template Plug Ins
    5.19 Customizing The Broken Product Page Templates

5.1 Customization Basics

Everything displayed to end-users of your store and search engine is template driven. The templates can also be thought of as skins. To edit these templates you may go to the ‘Template Manager’ in the control panel. All HTML/text displayed to end-users is customizable.

5.2 Template Basics

The templates that is used by StaticStore is just ordinary HTML files. The only exception is that the templates or HTML files contains variable words that StaticStore uses for pointers where it needs to place data. You can basically open the HTML files with your favorite web editor or with what ever you prefer and edit away. The thing that confuses most new users of StaticStore is that some templates use other templates in combination with each other. This is actually very easy to understand. Some templates combine into each other to form an entire page.

5.3 How to edit templates
 
You can edit the templates from the Template Manager. To go to the Template Manager, go to the control panel. Then click the 'Template Manager' tab. Click on any of the template links in the Template Manager to edit templates.

Templates can be edited by copying and pasting the HTML code directly into your web editor when editing templates from the Template Manager. Once you have changed the template contents, you may copy and paste it back into the edit box and save it.

You may also open the template files directly with your web editor to edit them. The templates are stored inside your ‘data’ directory. You can get the file names from the ‘Template Manager’ inside the Control Panel – Click on each template name to get the file name of the template you would like to edit.

5.4 What is the variable words in the templates/HTML files?

The variable words are enclosed by !! or %% characters. Examples of such variable words are:
%%date%% or %%pages%% etc...

Variable words are replaced by chunks of data supplied by StaticStore when users browse your store. The location of the variables in the HTML templates acts like pointers where StaticStore substitutes the variable words with data.

For example:

%%date%% is replaced by the date of a product listing and %%pages%% are replaced by the number of pages that contains product listings, etc.

Note: It is very important that most of these variable words are present in your templates. Without them your store may not function correctly. Only remove variable words if you what the variables does.

5.5 How to use images in templates
 
To make use of images in the templates, you must use a URL link to indicate their locations. For example:
<img src="someimage.gif"> will not work. You have to indicate the entire URL where someimage.gif is located. For example:
<img src="http://www.yourdomain.com/someimage.gif">

5.6 Default Store Template Customization Explanation

The HTML files or templates used for the Default Store Template Set is:

defdir.html
tmplsearch.html
tmplsearch_prem.html
subdirs.html
directories1.html
related1.html
related2.html
linkinfo.html

The above files are situated in the 'data' directory. The 'data' directory is explained in the installation instructions.
 
All the files above are combined into one when displaying the contents of your store. Another way of saying this is to say that the above files are used in combination with each other to form one template or page that is used when displaying the contents of your store. The combinations and details of these files is explained below.

Explanation of each HTML file or template used in the Default Store/Category Template Plug-In's

defdir.html (Store Template)

This is the main template used when displaying the products/contents of your categories.

This template and tmplsearch.html, tmplsearch_prem.html, subdirs.html, directories1.html, related1.html, related2.html and linkinfo.html is combined to form a category page.

tmplsearch.html

This template is used in conjunction with defdir.html - It is substituted by the %%searchresults%% variable in defdir.html - In other words, %%searchresults%% is replaced by the HTML code of tmplsearch.html in defdir.html

This template indicates the actual style of the product listings. The HTML code for this template is repeated for each product that is displayed in a category.

Note that <html> and <body> must not be present in this template.

tmplsearch_prem.html

This template basically does the same thing that tmplsearch.html does, but it is only used for premium listings so that premium listings can have a different look or appearance.

Note that <html> and <body> must not be present in this template.

subdirs.html - Sub Categories Style 1

This template is used in conjunction with defdir.html - It is substituted by the %%subdirectories%% variable in defdir.html - In other words, %%subdirectories%% is replaced by the HTML code of subdirs.html in defdir.html

The HTML code of subdirs.html is used for displaying sub categories of the current category/store when browsing the store.

Note that <html> and <body> must not be present in this template.

directories1.html - Sub Directory Product Style 2

This template is used in combination with subdirs.html - The function of this template is the actual style of each sub category displayed. You can add a graphic next to each subcategory in this template.

The variable %%substyle%% which is used in this template is replaced by actual store category names.

Let's say you want to add a graphic next to each category displayed. Then the contents of directories1.html would look something like this:

<img src="http://www.yourdomain.com/smpdirl.gif"> %%substyle%%

related1.html – Related Categories Style 1

This template is used to display related categories for the existing category. This template is used in combination with defdir.html

It is substituted by the %%related%% variable in defdir.html - In other words, %%related%% is replaced by the HTML code of related1.html in defdir.html

related2.html - Related Categories Style 2

This template is used in combination with related1.html - The function of this template is the actual style of each related category displayed.

linkinfo.html - Extra product information

This template is used to create an individual page for each product in your store. This means that each product can have it’s own page.

If the variable !!more_info_url!! is present inside tmplsearch.html or tmplsearch_prem.html  then each product displayed in your store will have a link to an extra page where the product information can also be displayed. You can for example display more extended information about the product on the extra page. The extended information could be contained in extra fields/keys.

5.7 General Template Guidelines

A lot of the templates work in combination with each other and others work independently where they are not combined with other templates.

The rest of the templates work in more or less the same manner as explained in section 5.6. The moment you open (with your web editor) a template you should know or have a good idea where it is to be used.

Probably the easiest and best way to know exactly how the templates work is to experiment and play around with them. If something went wrong and your store doesn’t seem to be working anymore because of template problems, you can just go back to the default templates that were present when you first installed StaticStore. You can go back to the original templates by clicking the ‘Restore Default’ button when editing templates from the ‘Template Manager’.

Also look carefully at the templates that was present when StaticStore was first installed to get a good idea of how they work and what each variable word does. You can find these in the .zip installation file.

5.8 How to use template includes

5.8.1 What is template includes?

Template includes works with StaticStore like SSI (server side includes) would work with a web server. Template includes is pieces of HTML code that you can include in any of the templates used by StaticStore. The pieces of HTML code could be menu bars, footers, headers, search boxes, etc.

You could for example create a template include that will be a menu bar that you would like placed on the left side of all your store pages. Without template includes you would have to open each template and insert the menu bar. With template includes you just insert a variable word inside any template and the HTML code that is contained within the template include is replaced by the variable. In the event where something of your menu bar changes, you just edit the template include and the rest of the templates containing the menu bar via the template include changes.

5.8.2 How to create a template include

Go to the Control Panel and click on the Template Manager tab. Now click on the ‘Create/Edit Template Includes’ link. A popup window will appear.

Go to the ‘Add New Template Include’ form in the popup window and enter a name and some text or HTML code to the text box. Then click the ‘Add new Template Include’ button.

5.8.3 How to include template includes inside your templates

Template includes will be listed in the Template Include Popup Window when template includes has been added. With all the template include listings there will be a field or section that displays a StaticStore variable. The variable is a word enclosed by %% characters. Use this variable inside any of your templates to include the contents of the Template Include in the templates of your choice. To use template includes inside your templates, go to the template manager and edit your templates by adding the include variable at the location where you would like the contents of the include to be displayed.

5.9 Global Variables (Variables available to all templates)

StaticStore variables are words enclosed by %% and !! characters.

Variable words are replaced by chunks of data supplied by StaticStore when users browse your store. The location of the variables in the HTML templates acts like pointers where StaticStore substitutes the variable words with data.

There are some variables that is global and available in all templates.

The following variables are available in all templates:

!build_url! – This is always replaced by the URL path to the ‘html’ directory, or the directory where all generated HTML files are stored.

!!tseeksearch!! – This is always replaced by the URL path to the search CGI scripts. The search CGI scripts are the scripts that searches through your store.

!!whatsnew!! – This is always replaced by a URL path to the page that indicates the latest product additions to your store.

!!tophits!! - This is always replaced by a URL path to the page that indicates most popular products inside your store.


All template include variables are also globally available for use in all templates.

5.10 How to use custom store templates

Custom category/store templates provide you with the ability to assign custom store templates to categories of your choice. This means that you can give certain categories a total original look, or target advertisements at specific categories with text and images. The advertisements that you could target could be text or forms where banners would not work. Use the Banner Manager that comes with StaticStore to rotate banners in your categories and search engine.

5.10.1 How to create custom template sets

To create a custom template set, go to the Control Panel. Then click on the ‘Template Manager’ tab. Click the ‘Create or Edit Custom Store/Category Templates’ link. A popup window will appear. Now click on the ‘Add new Directory Template’ button.

Assign a name to the custom template you are about to create by filling in a name where asked for a name of the new custom store template set. (Near the top of the window)

You will see Field Text Boxes that contains HTML code. The HTML code displayed here comes from the default store templates. The default store templates is: defdir.html, tmplsearch.html, tmplsearch_prem.html, subdirs.html, directories1.html, related1.html, related2.html and linkinfo.html
 
Change the HTML code to your liking and click the 'Add New Custom Template Set' button.

5.10.2 How to assign custom templates to categories

Go to the ‘Store Manager’. Browse your categories in the ‘Store Manager’ until you find a category where you would like to use the custom template set that you created in 5.10.1. Click on the ‘Default’ link displayed next to the category. A popup window will appear where you can assign the custom template set that you  created to the category.

5.11 How to create your front page

How to use JavaScript Includes to create and maintain your front page

When in the ‘Store manager’ click on the text on the left bar reading ‘Generate Front Page’. A new browser window will open. Click on the ‘'Front Page Creation/Generation Settings' link. Go over the settings and change it to your needs. The last setting asks you if you want to have the front page written to a file and if so, that you have to supply a full server path to the file. Supply the full server path to the filename where the front page should be written/updated too and click the save button. Then click on the hyperlink that prompts you to continue.

Now click on the ‘Generate/Update Front Page or Get Front Page HTML code’ link. There will be boxes containing HTML code. Copy the HTML code as instructed into the page where you would like your store front page included.

Remember that each time you change the names of your main categories that you will need to re-generate or update your front page this way.

How to use SSI’s to create and maintain your Front Page (You will need to know how SSI works, to use this)

When in the ‘Store manager’ click on the text on the left bar reading ‘Generate Front Page’. A new browser window will open. Click on the ‘'Front Page Creation/Generation Settings' link. Go over the settings and change it to your needs. The last setting asks you if you want to have the front page written to a file and if so, that you have to supply a full server path to the file. Supply the full server path to the filename where the front page should be written/updated too and click the save button.

Now you will need to add an SSI tag to your existing front page or an existing web page that will include the filename you specified like explained above. Once the SSI tag has been included, generate your front page. This can be done by again clicking on the ‘Generate Front Page’ link when in the ‘Store manager’. Then click ‘Generate/Update Front Page or Get Front Page HTML code’ and the front page will be written to the file name that you specified in the ‘front page’ settings.

Remember that each time you change the names of your categories that you will need to re-generate or update your front page.

How to add a search box to your front page

To get the HTML code for the search box, (enabling end users to search your store) click on the ‘Generate Front Page’ link to the left when in the ‘Store manager’. Then click on the ‘Generate/Update Front Page or Get Front Page HTML code’ link. At the bottom of the page there will be a box containing the HTML code which you can place inside your front page or other web pages of your web site.

5.12 How to customize your front page

You can customize the look and feel of the categories that is to be displayed on your front page, by going to the Control Panel. Then click the Store Manager tab. Now click the Generate Front Page link in the left menu bar. A popup window will appear. Click on the 'Front Page Creation/Generation Settings' link. Now you will be able to change many aspects regarding the display of your main store categories.

5.13 Customizing The Search Results Template Plug-Ins

When in the template manager, all template sets are listed in a block. Refer to the screenshot below. You can edit each template by clicking on the respective template links when in the template manager. You can customize the Default Store Template set by going to the template manager in the control panel. Then click on 'Store Template HTML code' or you can just manually open the HTML files and edit away.

The templates that is used when displaying search results is: searchres.html, lsearchres_loc.html, lsearchres_loc_prem.html

Below is an explanation on what each template does:

searchres.html
This is the main template that is used to display search results with. This template works in combination with lsearchres_loc.html, lsearchres_loc_prem.html

lsearchres_loc.html
This template indicates the product style of each product displayed in search results. This template is used in conjunction with searchres.html - It is substituted by the %%searchresults%% variable in searchres.html

lsearchres_loc_prem.html
This template indicates the product style of premium products displayed in search results. The style of this template will be used to indicate premium products inside search results. It works in almost the same way as lsearchres_loc.html

nomatch.html
This template will be displayed to end users when a match was not found when searching. This template does not work in combination with other templates. Also see: 3.1.20 What to use when a search revealed no matches

Also See:
    5.2 Template Basics
    5.3 How to edit templates
    5.4 What is the variable words in the templates/HTML files?
    5.5 How to use images in templates

5.16 Customizing The Rating Templates Plug Ins

The Rating templates are used when users assign ratings to products on a scale from 1-10.

You will need to edit the following templates to customize the Rating templates:

rate_it.html
This is the rating template with a form that enables end-users to cast a rating for a product.

rate_it_success.html
This template is displayed to end-users when a rating has successfully been assigned to a product.

rate_it_fail.html
This template is displayed to end-users to inform them that they can only cast one rating per product.

Also See:
    5.2 Template Basics
    5.3 How to edit templates
    5.4 What is the variable words in the templates/HTML files?
    5.5 How to use images in templates

5.17 Customizing The Review Templates Plug Ins

The Review templates are used when end-users post comments or reviews about products.

You will need to edit the following templates to customize the Rating templates:

review_it.html
This template is used to enable end users to view and post reviews/comments about products.

reviewlinks.html
This template is used to display comments/reviews. It is used in combination with review_it.html

reviewadded.html
This template displayed when an end-user successfully added a review/comment.

reviewproblem.html
This template is displayed if there was a problem when trying to add a review/comment.

Also See:
    5.2 Template Basics
    5.3 How to edit templates
    5.4 What is the variable words in the templates/HTML files?
    5.5 How to use images in templates

5.18 Customizing The What's New Template Plug Ins

This set of templates is used for the 'What's New' page. The 'what's new' page lists new listings in the store.

You will need to edit the following templates to customize the What's New templates:

whatsnew_main.html
This template is used when displaying the latest additions to the store. This template is used in combination with whatsnew_lists.html and whatsnew_lists_prem.html

whatsnew_lists.html
This template reflects the HTML code used when displaying new product listings. It is used in combination with whatsnew_main.html

whatsnew_lists_prem.html
This template reflects the HTML code used when displaying new premium product listings. It is used in combination with whatsnew_main.html

Also See:
    5.2 Template Basics
    5.3 How to edit templates
    5.4 What is the variable words in the templates/HTML files?
    5.5 How to use images in templates

5.19 Customizing The Top Hits Template Plug Ins

This set of templates is for the Top Hits page. The Top Hits page lists listings that received the most hits/clicks in your store.

You will need to edit the following templates to customize the Top Hits templates:

tophits_main.html
This template is used when displaying the most clicked products in the store. It is used in combination with tophits_listings.html and tophits_listings_prem.html

tophits_listings.html
This template reflects the HTML code used when displaying the products that was most clicked. It is used in combination with tophits_main.html

tophits_listings_prem.html
This template reflects the HTML code used when displaying premium products that was most clicked. It is used in combination with tophits_main.html

Also See:
    5.2 Template Basics
    5.3 How to edit templates
    5.4 What is the variable words in the templates/HTML files?
    5.5 How to use images in templates

5.20 Customizing The Broken Product Page Templates

This set of templates is displayed when end users report broken product pages.

You will need to edit the following templates to customize the Broken Product Page templates:

brokenlink.html
This template will be displayed to end-users when they want to report a broken product page.

brokenlink_success.html
This template is displayed to end-users when they successfully reported a broken product page.

Also See:
    5.2 Template Basics
    5.3 How to edit templates
    5.4 What is the variable words in the templates/HTML files?
    5.5 How to use images in templates