General

This document is just a brief introduction to customizing the EOS template. A complete list of all variables can be found in the "help" subfolder in your EOS project directory. More information about variable settings and trouble shooting is available in the F.A.Q. in the Yahoo! group. This is an easy to remember shortcut: eostemplate.com/faq. If you have specific questions please post to the EOS Template Yahoo! group (only for customers).

Note: Starting with version 2.5 these files can be found in the directory "eoscommon" in the EOS project folder instead of the EOS template folder.

Settings File

Basically there is only one file you need to change. All functionality can be set by editing the file "settings.js". Though it's a Javascript file it is nothing but a simple text file and can be edited with any text editor, e.g. notepad. If your text editor offers syntax highlighting it will be a big help. Since version 2.3 of the EOS template you will find helpful scripts in the subdirectory "help".

I won't go into detail and explain every variable because the settings file is very extensive and well documented. Basically it contains the following sections:

  • various settings
  • new variables
  • items with prices
  • special items
  • discount settings
  • shipping and tax
  • additional shipping options
  • my contact information
  • customer contact information
  • checkout options
  • 3rd party merchant settings

Language File

Though it is called "language_en.js" it contains all text which is used in the template. That means you easily change any wording in this file. This file is available in the following languages: Danish, Dutch, Finnish, French, German, Hungarian, Italian and Spanish. If your language is not listed here then you can easily translate it on your own.

Example:
txt_zip = "Zip Code"
can be easily changed to:
txt_zip = "Postcode"

You can even show images instead of text if you like. The following example changes the text link into an animated button:
discount_opts = "Discount options"
can be easily changed to:
discount_opts = "<img src='special_offers.gif' border='0'>"

It is recommended to put the GIF image in the common folder and add a tooltip on mouse-over:
discount_opts = "<img src='" + common_images_DIR + "special_offers.gif' "
discount_opts+= " border='0' title='Check out our discount options!'>"

Style Sheet

Editing the file "style.css" enables you to adapt the design of the template to your existing website. You can set background color or images, font type and sizes, link colors and much much more. Before you edit we recommend to read a tutorial on CSS (Cascading Style Sheets).

Note that the designs of the example galleries are avaialable and ready to use. You can pick any of them to be used for your website or use it as starting point for further customization.

Top