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

 StaticStore » StaticStore Manual » The Basics in 20 Minutes

StaticStore should be very easy to use and is mostly self-explanatory. Please read this guide as it will save you time. This section has been written to get you started in the shortest time possible. It provides you with the basics of creating your store. It will also give you a good feel of how everything works together.

Step 1. Create your category structure and add products.

Step 2. Create or generate 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 a 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 the categories of your 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.

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 a 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. Add the SSI tag to an existing HTML page which will serve as your front page. 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 main 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 search engine) 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 that you can place inside your front page or other web pages of your web site.

See the following for more information on front page creation:
5.11 How to customize and create your front page
5.12 How to customize your front page
8.6 Generating Your Front Page (Index Page)

Step 3 – Customizing the look and feel of your product store

The Template concept in a few short words

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. We'll talk more about this later. For now, remember that the templates are ordinary HTML files.

How to edit the 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.

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...

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

For example:

%%date%% is replaced by the date of a product/item listing and %%pages%% are replaced by the number of pages that contains product/item 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 know what they do.

Template Customization – Default Category Template Customization Explanation

The HTML files or templates used for the Default Category Template Set are:

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 categories. The combinations and details of these files is explained below.

Explanation of each HTML file or template used in the Default Category/Category Template Plug-Ins

defdir.html (Category Template)

This is the main template used when displaying the product/items/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/item listings. The HTML code for this template is repeated for each product/item 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 Category 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%% that is used in this template is replaced by actual 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/item information

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

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

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 here. 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.

See the following for more detailed information on template customization:
5. Customization (Look & Feel)