|
How to customize the look and feel of your store?
|
|
|
All the pages of your store are made of templates. Each page is a combination of multiple templates organized in a hierarchical structure. There is always the main
container or high level template and that main template includes lower level templates which also include other templates and so on.
Each of the sub-templates
defines the look and feel of a particular section of the page. If you want to change a particular portion of the page you need to apply a change to the corresponding
template. To find which template corresponds to which part of the page you can use the webmaster mode and its debugging console. Once you know which template to change you
can connect FTP/Telnet into your server and make the change that way or use the template editor (recommended) that comes with your store.
|
|
|
|
The webmaster mode and the debugging console
|
|
The debugging console is a tool, that allows you to discover the template structure of the page that you are currently viewing. This console is actually a separate popup
window that will come on top of the browsing window each time you click on a new link. To open a debugging console you need to start the webmaster mode. To start this mode
with the debugging console, you first need to enable the ‘enable the debugging console’ checkbox in the ‘General settings/general options’ (bottom of page), then select
the ‘Webmaster mode’ option from the ‘CONTENT MANAGEMENT’ menu section:
|
|
|
|
|
then click the [Start webmaster mode] button on the Webmaster Mode page, the debugging console will come up. The console will display a structured list of templates that
have been used to generate the actual page being browsed. The console will look like the one below:
|
|
|
|
|
|
|
In order to find out which template corresponds to which section you can just mouse over some of the links located in the debug console, the corresponding section will
eventually be shown to you by a top and bottom black mark like it is shown on the picture above for the 'Special' section. Once you have found the template that you want
to change you can just click on the corresponding link, it will take you right to the ‘Edit template’ page with that template selected and ready to be edited:
|
|
|
|
Once the changes made you need to click the [save] button but also need to reset the templates cache. To clean your template cache you would have to run the
‘cleanup.php’ program. If for example your web site address is www.mydomain.com, then you would point your browser to the following address:
http://www.mydomain.com/cleanup.php
|
|
|
|
To end the webmaster mode, go back on the webmaster mode page and click the [Stop webmaster mode] button.
|
|
|
|
|
The Edit Template page
|
|
If you know the name of the template, you do not need to use the webmaster mode or debugging console, you can go directly to the ‘Edit templates’ page by selecting the
‘Edit templates’ option from the ‘CONTENT MANAGEMENT’ menu section and do a browse-by-name to find the template that you need to change.
|
|
|
|
|
Using this page you will be able to edit templates, configuration files as well as CSS files. Using the same interface, you will also be able to create or upload new
templates.
|
|
|
|
|
Editing language variables
|
With very few exceptions, most of the text displayed on your store as well as on the admin panel is defined by a language variable which value can be changed on the ‘Edit
Languages’ page. If you look closely inside a template definition you will realize that all the text are displayed using language variables.
In order to edit a
language variable you first need to find its name, then go to the Languages page by selecting the ‘Languages’ option from the ‘CONTENT MANAGEMENT’ menu section:
|
|
|
|
|
|
|
Select a defined language and then provide the name of the variable in the ‘Apply filter’ field :
|
|
|
|
|
|
|
and then click the [Go] button, the system will find and display the language variable in the ‘Edit language entries’ section. You can edit it and then click the [Update
all] button to save its content. The ‘Edit languages’ page can also be used to delete or create a new language variable.
|
|
|
|
|
Webmaster mode to edit a variable
|
|
If you are having difficulty to find the name of a language variable, you can use the Webmaster mode to edit a variable directly on the page. After the webmaster mode is
started a lot of the text displayed (but not all) will be displayed in ‘Green’ color to indicate that this text can be
edited by clicking on it. When you click on the text, a window will open, display the name of the variable as well as its value inside a field. You can modify that value
and click the [save] button. In the example shown below, we clicked on the text ‘Market price’ :
|
|
|
|
|
|
|
Please note that the name of the product displayed “Bach's Goldberg Variations” is not displayed in green because its
value does not come from a language variable since it is a product name which is stored in the product table and not in the language table.
|
|
