Imagine if all the stores (including yours) looked similar to each other. As that wouldn't do you any good, it seems reasonable to change the storefront style/appearance. Professional brand and image are absolutely necessary to attract your future customers. One of the most important things to do if you already have a website is to fit both layouts of a corporate site and a storefront to each other (to make a seamless transition for your customers).

There are many ways to customize the look of your X-Cart store to make it distinctive and memorable. Some of them are described further.

Smarty templates

The store design technology of X-Cart is based on the template technology called Smarty (http://smarty.php.net) included in PHP. One of Smarty's primary design goals is to facilitate the separation of application code from presentation. Typically, the application code contains the business logic of your application, written and maintained in PHP code. This code is maintained by programmers. The presentation is the way your content is presented to the end user, which is written and maintained in template files. The templates are maintained by template designers.

At its most basic function, the application code collects content, assigns it to the template engine and displays it. The content might be something like the title, description, image and price of a product. The application code has no concern how this content will be presented in the template. The template designer is responsible for the presentation. They edit the template files, adding markup and bringing it to completion. This typically involves things like HTML tags, cascading style sheets and other tools provided by the template engine.

To find out more about Smarty, we recommend that you look through the following documents:

http://smarty.php.net/whyuse.php
http://smarty.php.net/rightforme.php

X-Cart shopping software has built-in development environment which allows you to easily access and modify the templates from which your store is built. X-Cart templates engine is very flexible and extremely configurable, so you can completely change the look and feel of your site according to your taste and actual needs. But be careful! The powerful flexibility requires basic HTML, CSS and Smarty PHP template engine knowledge and experience.

Template editing

When working with templates it is useful to enable X-Cart Debugging console: General settings -> General options. The Debugging console enables you to view the template structure of the page which is currently opened in your store. The template structure of a page is presented in the form of a tree to show the hierarchy of the templates from which it is assembled. admin/home.tpl, provider/home.tpl and customer/home.tpl are the main templates which include other templates (which in their turn can also include templates).

For example, if we use the Debugging console to explore the template structure of the customer zone front page, the result may be something like this:

Picture 1: Debugging console (Customer zone front page template structure).

If you look at the picture of the customer front end below you will notice that this page contains several distinctive areas the representation of which depends on certain templates.

Picture 2: Customer zone front page template structure.

Knowing what template is 'responsible' for the look of the area you would like to modify enables you to modify the necessary template and change the look of your store.

You can click on the name of a template in the X-Cart Debugging console window to get quick access to editing this template.

Revision date: 31 Jan 2006

1   2   3