Customizing storefront design of X-Cart based online store

Revision date: Jan 31, 2006

1 2 3

Practical examples

Finding a particular template by its contents

Just a hint to find templates you need.

To find a certain template you should use any utility that searches for files by their content. In Windows you can press F3 from 'My computer' window to access the search dialog. In UNIX you can use grep utility. For example, if you want to find the template that contains information about the store being a demo, just search for a file that includes the line "This is a demo store". Note that default location of all templates is /skin1 directory.

You can also use X-Cart debugging console, 'Webmaster mode', to explore the template structure. Enable this option in 'General settings'-> 'General options'. You will be able to view the hierarchy of templates which assemble the current page. This console helps to locate the template to customize.

Note. In the multilingual installation the text that appears in X-Cart interface is stored in the database.

Modifying the color scheme

The color scheme of your store may be customized by editing the '<xcart-dir>/skin1/skin1.css' file.

Re-uploading the default images stored in the '<xcart-dir>/skin1/images/' directory

Use either FTP or the 'Edit templates' feature to do that. For instance, to replace the default logo image, you should re-upload the <xcart-dir>/skin1/images/xlogo.gif file.

Editing language variables

Most of X-Cart texts are stored in so called 'language variables'. For instance, if you view such variable like in a template, it is substituted with the content of the txt_site_title language variable. You can edit the language variables under the 'Languages' section of the administrator interface.

You may need modify the following tepmlates:

skin1/customer/home.tpl - the main template, all other templates are directly or indirectly included from this one.
skin1/customer/categories.tpl - the categories list at the left part of the screen.
skin1/customer/main/subcategories.tpl - the subcategories list in the central space.
skin1/head.tpl - the header part of the screen.

When a customer visits your site, the statement is substituted with the value of the txt_welcome language variable.

We really recommend you trying the 'Webmaster mode' feature. It can help you to determine the proper template which needs to be edited. Also, when the webmaster mode is started, you can easily modify language variables: just click the corresponding text and edit it.

Making a new welcome message for your store

If you open the <xcart_dir>/skin1/customer/main/welcome.tpl template, you will see the following statement there:

By default this variable is set to "This is a demo store powered by the X-Cart...". Below is described how to modify the txt_welcome language variable:

1. Log into the admin area of your shopping cart.
2. Go to the 'Languages' section of the admin interface.
3. Select a language in the 'Edit language' selectbox.
4. Select a topic: Text. (Text for :txt_, Errors for err_)
5. Find the txt_welcome variable and edit its value.

Similarly you can edit other texts, labels or messages appearing on X-Cart pages.

6. Click on the 'Apply changes' button.

'Webmaster mode' enables you to edit language variables in a still easier way: all you will need to do is to click on the text and edit it. Please refer to our manual in order to learn more about the 'Webmaster mode' feature.

Template editing in Webmaster mode

Webmaster mode allows you to define the right template and modify it within the admin interface. You may edit language variables (denoted as $lng.XXX in templates) by changing those values in WYSIWYG mode.

1) Before entering the webmaster mode, close any template windows & label windows. Enter your admin zone, go to the 'Administration' menu, 'Webmaster mode' page. Click on 'Start webmaster mode' button.

2) The additional 'templates' window will appear. It displays the list of templates composing a current page. You can call the template editor from this window by clicking a template.

3) Go to the page you want to change. To define the right template, look at the browser status line (at the page bottom). When the mouse is pointing at some text, this status line indicates the corresponding template and label.

4) To change a label, click on it. If the label is under a hyperlink, move the mouse over it and press 'e' (Edit) on the keyboard. The label dialog will appear.

5) After you set a new label content you can
(a)preview the site with the changed label,
(b)save the text in the database, and
(c)copy the label name into the clipboard (IE only).

6) The webmaster mode is based on sessions: it applies only to the computer it has been set up on. I.e., when the 'Webmaster mode' is launched, it isn't displayed at the customer's end and doesn't affect the store performance. The changes will show up only after the admin clicks on 'Save' button.

7) To quit the webmaster mode, go to admin zone, to the 'Administration' menu, 'Webmaster mode' page. Click on 'Quit webmaster mode' button.

NOTE: Webmaster mode will not work with compiled templates.

Changing the interface language

X-Cart uses language variables to display text in its interface. The values assigned to these variables may be actually in any language. If you want the text of your X-Cart based shop to be displayed in another language, you will need to edit the values of the language variables X-Cart uses. This can be done via the Administration menu -> Languages in the Administration area. An easy way to add a new language into X-Cart is to export the necessary language to a CSV file, open this file for editing in Notepad or Excel, translate the English variable values to the language you want, save the file and re-import it into X-Cart.

Removing or changing "Powered by X-Cart" logo

To do so, you should modify skin1/main/prnotice.tpl. Comment out or change the string in the file.

Changing the picture shown by X-Cart in the place of a product thumbnail when no image is available for a product

If no thumbnail picture was selected for a product, your customers will be shown the default image saying 'No Image Available'. The default image is stored in the file default_image.gif in the root directory of X-Cart. It can be replaced with any picture you like (e.g. blank picture).

Modifying 'Terms & Conditions'

You can place your Terms & Conditions into templates. Use our built-in template editor to edit templates. Put Terms & Conditions destined for customers into help/conditions_customers.tpl, and Terms & Conditions for partners - into help/conditions_affiliates.tpl.

Adding JavaScript code in templates

JavaScript is used in millions of Web pages to improve the design, validate forms, detect browsers, create cookies, and much more. JavaScript is the most popular scripting language on the Internet, and works in all major browsers, such as Internet Explorer, Mozilla, Firefox, Netscape, Opera. This language gives HTML designers a programming tool (HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax). Anyone can put small "snippets" of code into their HTML pages.

JS code should be included between and tags. Like this:

<.script>
... your script
<./script>

Troubleshooting

While customizing X-Cart templates you might suddenly get an error saying something like this:

Parse error: parse error, expecting `'}'' > in domains/httpd/xcart/templates_c-12/-1215544790/0.php on line 211.

But you're sure you never edited the file 0.php. What's wrong?

That means that you altered the Smarty code while modifying the template, and Smarty encountered an error while trying to compile your template in PHP script. Usually that means that there are unclosed {section}{/section} or {if}{/if} tags or errors in expression. Please be careful while modifying templates, we also recommend you to learn Smarty basics to modify your templates more effectively.

Also you can face a problem when you can't edit templates using the built-in template editor because it says "permission denied".

To make the built-in editor save templates to the disk you need to set the appropriate permissions on the skin1 directory and all the files under it. Typically PHP runs from another user id (httpd) and does not have the rights to write templates. To overcome it you must run a shell command chmod -R 777 skin1. Note that this is a shell command, not FTP. FTP does not have the -R switch which means 'recursive'. To do the same thing over FTP you have to chmod 777 each file and directory.

Note: for security reasons after completing X-Cart customization you should set permissions to 0755.

Web design services

Designing the store yourself might be a rather complex task especially if you're not experienced in this area. For this case, our company offers the whole range of Web design services. If you're interested, please refer to our Web design services description.

If you are interested in this service please post your request to the Communication center. Our quote managers shall provide you with quotations.