X-Cart Customizing The Look and Feel

Table of Contents
1 X-Cart:Storefront Design and Layout..............................................................................................................................................................................1

1.1 Video tutorial #1...............................................................................................................................................................................................1
1.2 Video tutorial #2...............................................................................................................................................................................................1
2 X-Cart:Changing skin........................................................................................................................................................................................................2
2.1 Selecting skin to use........................................................................................................................................................................................2
2.2 Before re-installing skins.................................................................................................................................................................................2
2.3 To reinstall skins via the X-Cart Installation wizard.........................................................................................................................................2
2.4 To reinstall skins manually..............................................................................................................................................................................3
3 X-Cart:Editing Skin Files...................................................................................................................................................................................................4

3.1 Introduction......................................................................................................................................................................................................4
3.2 Managing Skin Files........................................................................................................................................................................................5
3.3 Overview of Templates....................................................................................................................................................................................7
3.4 Overview of CSS Files.....................................................................................................................................................................................8
3.5 Location of skin specific template and CSS files.............................................................................................................................................9
3.6 Using X-Cart's Debugging Console.................................................................................................................................................................9
3.7 Using Webmaster Mode................................................................................................................................................................................10
3.8 Using X-Cart's Template Editor.....................................................................................................................................................................11
3.9 Replacing X-Cart's Logo................................................................................................................................................................................12
3.10 Customizing the breadcrumb trail................................................................................................................................................................14
3.11 See also.......................................................................................................................................................................................................15
4 X-Cart:Customizing Text Labels....................................................................................................................................................................................16

4.1 Overview........................................................................................................................................................................................................16
4.2 Managing Language Variables......................................................................................................................................................................16
4.3 Using Webmaster Mode................................................................................................................................................................................17
5 X-Cart:Managing Languages..........................................................................................................................................................................................23
5.1 Overview........................................................................................................................................................................................................23
5.2 Adding languages..........................................................................................................................................................................................23
5.3 Setting default languages..............................................................................................................................................................................25
5.4 Exporting languages......................................................................................................................................................................................26
5.5 Disabling languages......................................................................................................................................................................................26
5.6 Deleting languages........................................................................................................................................................................................27
6 X-Cart:Static Pages.........................................................................................................................................................................................................29
6.1 Overview........................................................................................................................................................................................................29
6.2 Adding Static Pages......................................................................................................................................................................................29
6.3 Defining Static Page Details..........................................................................................................................................................................30
6.4 Managing Static Pages..................................................................................................................................................................................32
6.5 Creating Versions of a Static Page for Different Languages.........................................................................................................................34
6.6 See also.........................................................................................................................................................................................................34
7 X-Cart:Speed Bar.............................................................................................................................................................................................................35
7.1 Overview........................................................................................................................................................................................................35
7.2 Adding Links to the Speed Bar......................................................................................................................................................................35
7.3 Managing the Speed Bar Links.....................................................................................................................................................................36
8 X-Cart:404 Error Page.....................................................................................................................................................................................................37

8.1 Overview........................................................................................................................................................................................................37
8.2 Enabling 404 Error Page on Apache.............................................................................................................................................................37
8.3 Enabling 404 Error Page on IIS.....................................................................................................................................................................38
8.4 Customizing 404 Error Page.........................................................................................................................................................................38
8.5 Creating Versions of the 404 Error Page for Other Languages.....................................................................................................................38
9 X-Cart:Adding Facebook Like button to your X-Cart store..........................................................................................................................................40

9.1 Adding the FB "Like" button to product pages...............................................................................................................................................40
9.2 Adding multiple "Like" buttons to category pages..........................................................................................................................................41
9.3 Adding "Like" button to HTML catalog pages................................................................................................................................................42
9.4 See also.........................................................................................................................................................................................................42
10 X-Cart:Design specification guidelines.......................................................................................................................................................................43

10.1 Main requirements.......................................................................................................................................................................................43
10.2 Mockup quality.............................................................................................................................................................................................45
10.3 Typical items................................................................................................................................................................................................46
10.4 Useful usability links:...................................................................................................................................................................................46
i
1 X-Cart:Storefront Design and Layout
1.1 Video tutorial #1
1.2 Video tutorial #2
1
2 X-Cart:Changing skin
2.1 Selecting skin to use

X-Cart 4.4or above
Starting from X-Cart 4.4 selecting which skin to use has been simplified. You can select the necessary skin in Admin area. To do so perform the
following steps:
1. Sign in to X-Cart Admin area.

2. Click Settings > General Settings > Appearance options.
3. Use the selectbox to select the skin you want to be used in the Customer area. The picture of the Customer area to the right of the selectbox
changes as you move the mouse cursor along the skin list.
4. Click Save at the bottom of the page.
X-Cart 4.3or above

Skins for X-Cart 4.3.2 and earlier versions can be reinstalled either manually or via the X-Cart installation Wizard. The exact instructions on how to
reinstall the skins depend on which of the methods you use. For more details please see sections below.
2.2 Before re-installing skins

Make sure you know the Auth code for the installed copy of X-Cart .
2.3 To reinstall skins via the X-Cart Installation wizard

1. In the X-Cart root directory, locate the file 'install-file-xx-xx-xx-xxxxx.php' where the symbol 'x' stands for the numbers and letters (e.g.
'install-file-09-01-22-077ce.php') and rename it to 'install.php'.
2. Run the Installation Wizard by opening in a web browser the URL http://www.yourdomain.com/install.php where "www.yourdomain.com" stands for
the true name of the domain where X-Cart is installed.
3. Choose the Re-install skin files option, enter the Auth code and select the 'I accept the License Agreement' check box. Click the 'Next' button to
continue the installation.
4. In the 'Select shop layout' drop-down box, choose one of the available skins and click the 'Next' button.
The installation script starts copying the template structure of the chosen skin from the directory <xcart_root>/schemes/templates/<skin_name> to the
main X-Cart's skin directory <xcart_root>/skin1 and creates a new layout. The progress is displayed on the screen.
5. Wait till the installation script copies the templates and creates the layout. After the process is completed, the installation script displays a preview of
the Customer area with the chosen skin.
2
If you are satisfied with the preview and wish to accept the skin, click the 'Next' button to continue the installation.
If you want to choose a different skin, click the 'Back' button. This moves you to the previous step of the Installation Wizard where you will be able to
choose a different skin.
6. Wait till the system generates a new system fingerprint and click the 'Next' button to complete the installation.
2.4 To reinstall skins manually

1. Copy the contents of the directory '<xcart_root>/schemes/templates/<skin_name>' to to the main X-Cart's skin directory '<xcart_root>/skin1'. If
prompted, choose to overwrite the existing files.
Note: The '<skin_name>' part stands for the name of the folder with the skin that you want to use. It can have one of the following values:
artistictunes_business;
artistictunes_car_tires;
fashion_mosaic_green;
fashion_mosaic_pink;
vivid_dreams_aquamarine;
neon_lights_sport;
etc.
2. After you copy the skin files to the directory 'skin1/', set the permissions of every subdirectory and file inside the directory 'skin1/' to 777 (write, read
and execute for everybody).
3. To see the changes, clear the contents of the directory <xcart_root>/var/templates_c which contains previously compiled templates.
3
3 X-Cart:Editing Skin Files
3.1 Introduction
An X-Cart skin typically includes PHP Smarty templates, CSS files, JavaScript files and, in some cases, HTML files.
The PHP Smarty templates of your store's skin are files out of which your store's pages are built. Each template file defines how a specific element of
the site appears. Template files are made up of HTML/CSS and Smarty; all of them have the .tpl file extension.
The screenshot of the customer area below provides an example of how a page is created using templates:
The CSS files of your store's skin are style sheets that define the presentation of your store's pages. They use the extension .css.
The JavaScript files of your store's skin are files that contain JavaScript code which can be called on your store's pages. They use the extension .js.
If you wish to change the look of a specific element of your store site, you need to edit the skin files that control this element. Most typically, you will
need to edit X-Cart's template and CSS files. To be able to edit X-Cart's template and CSS files, you must possess substantial knowledge of HTML,
CSS and Smarty. Here is a list of online resources that might be helpful:
HTML:
W3C HTML start page: http://www.w3c.org/MarkUp/

HTML Validation Service: http://validator.w3.org/
CSS:
W3C Cascading Style Sheets homepage: http://www.w3.org/Style/CSS/

Validation service: http://jigsaw.w3.org/css-validator/
Smarty:
4
Smarty resources: http://www.smarty.net/
Smarty online documentation: http://www.smarty.net/docs.php
All the files of your X-Cart skin are stored in the directory skin within the X-Cart installation directory. Your store's Admin area provides a section that
allows you to view and manage the contents of this directory (see the section Managing Skin Files).
Note: In the older versions of X-Cart, the templates are stored in the directory skin1.
The number of skin files in X-Cart is really large, so finding out which file controls what elements may require a great deal of effort. We recommend you
begin by studying the chapters Overview of Templates and Overview of CSS Files. When you begin working on the skin files more closely, we also
recommend you use the Debugging Console, a tool that will help you to find out the skin files for each page of the your X-Cart based store (See the
section Using X-Cart's Debugging Console).
X-Cart's skin files can be edited in X-Cart's built-in template editor (see the section Using X-Cart's Template Editor), or in any decent external text editor.
3.2 Managing Skin Files

You can manage the contents of X-Cart's skin directory using the 'Browse templates' section of your store's Admin area (Administration menu->Edit
templates). This section works similarly to the 'Browse files' section (Management menu->Files): it provides a file browser that you can use to view the
contents of the directory skin, to upload your own files, to copy and delete existing files, to create and delete sub-directories.
5
The Quick access menu above the 'Browse templates' dialog box allows you to quickly access specific files/groups of files in skin:
6
3.3 Overview of Templates
Templates files which are common for all X-Cart skins are stored in the directory skin/common_files.
However, each specific skin, for example Ideal Comfort, can have its own template files which are stored in the skin specific directory, for example
skin/ideal_comfort. The skin specific template files override the corresponding common template files stored in the directory skin/common_files.
Note: To find out template files location for a particular skin, you need to refer to the skin specific directory instead of skin/common_files, for example to
skin/ideal_comfort. See also: Location of skin specific template and CSS files.
Note: In the older versions of X-Cart, all the templates are stored in the directory skin1.
3.3.1 Templates stored in the directory skin/common_files
X-Cart 4.4or above

The templates, stored in the directory skin/common_files, except for product_thumbnail.tpl and currency.tpl, are used only for the store's admin area.
Here is a list of the major templates stored in this directory:
rectangle_top.tpl - controls the overall width and height of the store's layout (affects only the store's back end).
dialog.tpl - provides the main 'wrapper' of all content in the main window of X-Cart (affects only the store's back end).
menu.tpl - provides the 'wrapper' for the side menu boxes.
head_admin.tpl - controls the 'header' row for the Admin and Provider areas. It contains the logo and the language selector.
bottom.tpl - controls the 'footer' of the Admin and Provider areas.
rectangle_bottom.tpl - counterpart to rectangle_top.tpl (affects only the store's back end).
dialog_message.tpl - controls the top message box that pops up at the top of the main window in the store's back end.
auth.tpl - controls the side menu login box (affects only the store's back end).
authbox.tpl - controls the side menu login box for logged in users (affects only the store's back end).
help.tpl - controls the side menu help box containing links to the help pages. This template also contains the code that automatically adds a
link when you add a new embedded static page.
location.tpl - contains the code for the breadcrumb navigation (at the top of the main content area).
news.tpl - controls the side menu newsletter sign-up box.
today_news.tpl - controls the side menu that shows the current news.
The templates product_thumbnail.tpl and currency.tpl are used for both the admin area and the customer area:
product_thumbnail.tpl - controls the thumbnail of a product.

currency.tpl - controls the format of the currency.
3.3.2 Templates stored in the sub-directories of skin/common_files
X-Cart 4.4or above

The template files contained in the sub-directories of skin/common_files are the following:
skin/common_files/admin and skin/common_files/provider - templates for the store's admin area.

skin/common_files/single - templates for the store's admin area, X-Cart GOLD or GOLD PLUS.
skin/common_files/customer - templates for the store's Customer area.
skin/common_files/partner - templates for the store's Partner area (X-Affiliate add-on module).
skin/common_files/fulfilment - templates for the pages intended for fulfillment staff users.
skin/common_files/main - miscellaneous templates for the main content area.
skin/common_files/mail - mail templates.
skin/common_files/buttons - mutton templates for all areas.
skin/common_files/help - templates for help pages (like FAQ, Contact us, Terms and conditions, etc).
skin/common_files/pages - templates for embedded static pages.
7
skin/common_files/payments - templates for payment processors' pages.
skin/common_files/images - images.
skin/common_files/modules - templates for X-Cart's modules and add-ons.
Some of the template files contained in the sub-directory skin/common_files/customer are the following:
customer/home.tpl - master template for the customer area of the store.

customer/head.tpl - controls the 'header' row for the customer area. By default, it contains the logo, the speed bar tabs, the search box
(customer/search.tpl) and the language selector.
customer/bottom.tpl - controls the 'footer' of the site. It contains the 'Powered by' (skin/common_files/main/prnotice.tpl) and 'Copyright' text
(skin/common_files/copyright.tpl).
customer/auth.tpl - controls the side menu login box for the Customer area.
customer/authbox.tpl - controls the side menu login box for logged in customers.
customer/categories.tpl - side menu category template.
customer/dialog.tpl - provides the main 'wrapper' of all content in the main window of X-Cart in the Customer area.
customer/home_main.tpl - controls what is displayed in the main content area.
customer/menu_cart.tpl - controls the side menu cart.
customer/search.tpl - search box template.
customer/special.tpl - side menu Special template.
Some of the template files contained in the sub-directory skin/common_files/customer/main are the following:
customer/main/cart.tpl - controls the main shopping cart structure page.

customer/main/checkout.tpl - controls the checkout process structure.
customer/main/subcategories.tpl - controls the sub-category display, and also is the 'wrapper' for the products display.
customer/main/products.tpl - includes either products_list.tpl or products_t.tpl depending on how the setting 'Display products list in multiple
columns (1-3) (leave empty to use standard format)' is adjusted in the section General Settings/Appearance options.
customer/main/products_list.tpl - controls the products display under a category for a single column layout.
customer/main/products_t.tpl - controls the products display under a category for a multi-column layout.
customer/main/product.tpl - controls the product details page.
customer/main/order_message.tpl - controls the order confirmation screen for checkout (where you would place tracking conversion codes
like Google AdWords, Yahoo, etc.)
Some of the template files contained in the sub-directory skin/common_files/mail are the following:
mail/html/order_invoice.tpl - controls the invoice on the order confirmation screen and order emails.
mail/html/order_data.tpl - controls product data on the invoice.
mail/html/html_message_template.tpl - controls CSS styles applied to HTML-based emails.
The template files contained in the sub-directory skin/common_files/modules/Fast_Lane_Checkout are used to control the look of cart and checkout
pages if the Fast Lane Checkout module is enabled. Some of the templates are the following:
Fast_Lane_Checkout/home.tpl - controls the structure of cart and checkout pages.

Fast_Lane_Checkout/home_main.tpl - controls what is displayed in the main content area - the cart itself and checkout steps
(authorization/registration, shipping method selection, payment method selection, preview).
Fast_Lane_Checkout/head.tpl - controls the 'header' row for cart and checkout pages.
The template files contained in the sub-directory skin/common_files/modules/One_Page_Checkout are used to control the look of cart and checkout
pages if the One Page Checkout module is enabled.
3.4 Overview of CSS Files

X-Cart 4.4or above
All common CSS files are stored in the directory skin/common_files/css.
Note: Skin specific CSS files are stored in the directory skin/<skin_dir>/css, where <skin_dir> stands for the corresponding skin directory, for example
skin/ideal_comfort/css. See also: Location of skin specific template and CSS files.
Note: In the older versions of X-Cart, the CSS files are stored in the directory skin1.
CSS files for the Customer area are the following:
main.css - Main CSS file for the Customer area.

main.FF.css - Browser-specific CSS for Mozilla FireFox, Customer area.
main.IE6.css - Browser-specific CSS for Microsoft Internet Explorer 6, Customer area.
main.IE7.css - Browser-specific CSS for Microsoft Internet Explorer 7, Customer area.
main.popup.css - CSS for layer-based popups, Customer area.
main.popup.IE6.css - Browser-specific CSS for layer-based popups in Microsoft Internet Explorer 6, Customer area.
CSS files for the store's back end (Admin and Provider areas) are the following:
skin1_admin.css - Main CSS file for the Admin area.
8
skin1_printable.css - CSS file for the printable version of the Admin area.
CSS files for modules are the following:
skin/common_files/modules/One_Page_Checkout/main.css - Main CSS file for the Customer area, One Page Checkout module.
skin/common_files/modules/Fast_Lane_Checkout/main.css - Main CSS file for the Customer area, Fast Lane Checkout module.
skin/common_files/modules/Gift_Certificates/template_sample_1.css - CSS file for template_sample_1.tpl, Gift certificates module.
skin/common_files/modules/Gift_Certificates/template_sample_2.css - CSS file for template_sample_2.tpl, Gift certificates module.
skin/common_files/modules/HTML_Editor/scripts/style/editor.css - CSS file for the WYSIWYG editor, Admin area, HTML Editor module
(editing not recommended).
skin/common_files/modules/Subscriptions/calendar.css - CSS file for the calendar in the Admin area, Subscriptions module.
skin/common_files/modules/XAffiliate/main.css - Main CSS file for the Customer area, X-Affiliate add-on.
skin/common_files/modules/Product_Configurator/main.css - Main CSS file for the Customer area, X-Configurator add-on.
skin/common_files/modules/Fancy_Categories/main.css - Main CSS file for the Customer area, X-FancyCategories add-on.
skin/common_files/modules/Feature_Comparison/main.css - Main CSS file for the Customer area, X-FeatureComparison add-on.
skin/common_files/modules/Feature_Comparison/main.IE6.css - Browser-specific CSS for Microsoft Internet Explorer 6, Customer area,
X-FeatureComparison add-on.
skin/common_files/modules/Gift_Registry/main.css - Main CSS file for the Customer area, X-GiftRegistry add-on.
skin/common_files/modules/Magnifier/main.css - Main CSS file for the Customer area, X-Magnifier add-on.
skin/common_files/modules/RMA/main.css - Main CSS file for the Customer area, X-RMA add-on.
skin/common_files/modules/Special_Offers/main.css - Main CSS file for the Customer area, X-SpecialOffers add-on.
skin/common_files/modules/Survey/main.css - Main CSS file for the Customer area, X-Survey add-on.
3.5 Location of skin specific template and CSS files

X-Cart 4.4or above
There are directories which are used to store specific template and CSS files for the built-in X-Cart's skins:
skin/2-columns
skin/3-columns
skin/artistictunes_business/
skin/artistictunes_car_tires/
skin/artistictunes_fragrances_and_makeup/
skin/artistictunes_water_colour/
skin/books_and_magazines/
skin/fashion_mosaic_blue/
skin/fashion_mosaic_green/
skin/fashion_mosaic_grey/
skin/fashion_mosaic_pink/
skin/ideal_comfort/
skin/vivid_dreams_aquamarine/
skin/vivid_dreams_chromo/
skin/vivid_dreams_lotus/
skin/vivid_dreams_violet/
Note: The skin specific template files override the corresponding common template files stored in the directory skin/common_files.
3.6 Using X-Cart's Debugging Console

When working on X-Cart's templates, you may want to use X-Cart's Debugging console. It is a tool that enables you to view the template structure of the
page you are currently viewing.
X-Cart's Debugging console can be launched by enabling the option 'Enable debugging console' in General settings->General options. It is also enabled
automatically when you start Webmaster mode.
When enabled, the Debugging console is displayed in a separate browser window. This window contains a list of templates and config files used for the
current page. Note that this list is organized hierarchically, so you can see which template includes what. For example, if you use the Debugging console
to explore the template structure of the Customer area front page, the result may be something like this:
9
As you move about the store, the contents of the Debugging console window gets updated for each page.
In Webmaster mode, X-Cart's Debugging console allows you not only to view the template structure of a page, but also to quickly access any of the
templates involved in this structure: clicking on the name of a template opens the respective file in X-Cart's template editor (See Using X-Cart's
Template Editor).
Besides, if you move your mouse over any template name in the Debugging console window - it will outline the area of the page which the selected
template is used for.
3.7 Using Webmaster Mode

Webmaster mode allows you to edit templates 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
10
(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: Note:Webmaster mode will not work with compiled templates.

For additional information about Webmaster mode please refer to this article.
3.8 Using X-Cart's Template Editor

X-Cart provides a built-in template editor. This editor allows you to view and edit your store's skin files.
To open a skin file in X-Cart's template editor, use one of the following methods:
With X-Cart's Debugging console enabled, locate the file you wish to edit and click on its name in the Debugging console window.
or
Go to the section 'Browse templates' (Administration menu->Edit templates), use the file browser to locate the file you wish to edit and click on
its name.
As a result, the contents of the selected file opens in X-Cart's template editor as follows:
11
Now you can edit this file as necessary.
To save the changes after the editing has been completed, click the Save button. To quit editing without saving your changes, click on Cancel. To
restore the original file, click on Restore.
If the file opened in the template editor is a template, you can preview the element whose appearance is defined by this template the way it will appear
in your store. To do so, use the Preview button. If you click on Preview with the check box 'Use default stylesheet for template preview' selected, the
presentation of the element corresponding to the template will be defined by the main CSS file for the respective X-Cart area.
Typically, any changes you make to X-Cart's templates become visible in your store immediately after you click on Save. However, in some cases,
some of the changes may not appear in the store because an older version of the template was cached. If you know you edited a specific template, but
the changes do not appear in your store after the file has been saved, you must clear your store's templates cache (the contents of the directory
/templates_c). You can either remove the entire contents of the directory /templates_c manually, or use X-Cart's 'Clear templates cache' tool (See
X-Cart:Advanced Tools).
3.9 Replacing X-Cart's Logo

One of the most popular and necessary tasks about skins is replacing the default company logo on the Customer page with a real logo of your
company/store. Before you start replacing the logo, ensure that the required skin is properly installed, and you have the required image file for your
12
company logo. The recommendations for the image files are listed in the table below.
The name of the image file with your company logo can either coincide with the filename of the default logo or have a different name. If both the default
logo and your company logo have the same filename, you only need to replace the default image file with your image file. If these files have different
names, you need to edit the template which controls the storefront header. The exact filename of the default company logo depends on the skin that you
use.
X-Cart4.0-4.3
The default company logo files for X-Cart 4.0.x-4.3.x skins are as follows:
Skin Name Default Logo Path and Filename* File Format Logo Size
Light & Lucid /xlogo.gif GIF 244 x 67 px
Artistic Tunes /custom/company_logo.gif GIF 190 x 27 px
Fashion Mosaic /fashion_mosaic/company_logo.gif GIF 228 x 50 px
Neon Lights /neon_lights/xlogo.gif GIF 205 x 26 px
Vivid Dreams /vivid_dreams/logo.gif GIF 275 ? 61 px
* - path from X-Cart's skin directory <xcart_dir>/skin1/images.
To replace the logo:
If the filename of your company logo is the same as the filename of the default logo.
1. Log in to the Admin area and go to the Edit templates section (Administration menu -> Edit templates).
2. Use the Browse templates form to locate the folder with the default logo file (see the table).
For example, if you are replacing the logo of the Artistic Tunes skin, in the Browse templates form first move to the folder images/ and then
move to the folder custom/. In the same manner, for the Fashion Mosaic skin first move to folder images/ and then move to folder
fashion_mosaic/, etc.
3. Find section Upload file to the current directory at the bottom of the form and click the Browse button to open a file upload dialog window.
4. Locate the image file with your company logo and choose it for the upload.
5. Make sure the Replace file if exists check box is selected.
6. Click the Upload button to upload the file to the current directory.
Now the logo on the Customer area is replaced with your company logo.
IMPORTANT! To see the changes you may need to clear your browser's cache.
If the filename of your company logo is different to the filename of the default logo.
1. Log in to the Admin area and go to the Edit templates section (Administration menu -> Edit templates).
2. Use the Browse templates form to locate the folder where you want to keep the file with logo. It can be either the directory with the default logo
file (see the table) or any other location inside the images/ directory.
3. After you choose where to keep your company logo, find section Upload file to the current directory at the bottom of the form and click the
Browse button to open a file upload dialog window.
4. Locate the image file with your company logo and choose it for the upload.
5. Click the Upload button to upload the file to the current directory.
6. Click on the Edit templates breadcrumbs link at the top of the page to go back to the root skin directory skin/.
7. In the Browse templates form go to the folder customer and click on the head.tpl link to open the respective file for editing.
8. In the Edit file form, find the following code:
<div class="logo">
<a href="{$catalogs.customer}/home.php">
<img src="{$ImagesDir}LOGO_PATH_AND_FILENAME" alt="" />
</a>
</div>
and replace the LOGO_PATH_AND_FILENAME part with the the relative path to the directory where your company logo is located and the
logo filename. For example, if the image file with the logo is located in the directory <xcart_dir>/skin/images/custom and its name is
custom_logo.gif, the LOGO_PATH_AND_FILENAME part must be replaced with /custom/custom_logo.gif.
Click the Save button for the changes to take effect.
Now the logo on the Customer area is replaced with your company logo.
IMPORTANT! To see the changes you may need to clear your browser's cache.
X-Cart 4.5or above
The default company logo files for X-Cart 4.5.x-4.6.x skins are as follows:
Skin Name Default Logo Path and Filename* File Format Logo Size
Books & Magazines /books_and_magazines/images/custom/logo.gif GIF 455 x 125 px
Ideal Comfort /ideal_comfort/images/custom/logo.png PNG 297 ? 42 px
Fashion Mosaic (Blue) /fashion_mosaic_blue/images/fashion_mosaic/company_logo.gif GIF 228 x 50 px
13
Fashion Mosaic (Green) /fashion_mosaic_green/images/fashion_mosaic/company_logo.gif GIF 228 x 50 px
Fashion Mosaic (Grey) /fashion_mosaic_grey/images/fashion_mosaic/company_logo.gif GIF 228 x 50 px
Fashion Mosaic (Pink) /fashion_mosaic_pink/images/fashion_mosaic/company_logo.gif GIF 228 x 50 px
Vivid Dreams (Aquamarine) vivid_dreams_aquamarine/images/vivid_dreams/logo.gif GIF 345 ? 54 px
Vivid Dreams (Chromo) vivid_dreams_chromo/images/vivid_dreams/logo.png PNG 288 ? 59 px
Vivid Dreams (Lotus) vivid_dreams_lotus/images/vivid_dreams/logo.gif GIF 275 ? 61 px
Vivid Dreams (Violet) vivid_dreams_violet/images/vivid_dreams/logo.gif GIF 230 ? 133 px
* - path from the directory <xcart_dir>/skin
In Books & Magazines, Ideal Comfort and Vivid Dreams skins, the company logo image is implemented on the site via
<xcart_dir>/skin/<skin_name>/customer/head.tpl. For example, in head.tpl for Ideal Comfort skin it looks as follows:
<div class="line1">
<div class="logo">
<a href="{$catalogs.customer}/home.php"><img src="{$AltImagesDir}/custom/logo.png" alt="" /></a>
</div>
In Fashion Mosaic skins, the company logo is defined in the corresponding skin's CSS file. For example, for Fashion Mosaic (Grey) skin it is the file
skin/fashion_mosaic_grey/css/altskin.css. The company logo is implemented as follows:
#header .line1 .logo a:active

{
display: block;
width: 228px;
height: 50px;
background: transparent url(../images/fashion_mosaic/company_logo.gif) no-repeat left top;
}
To replace the default company logo image on your site, prepare an image with your own company logo, save it with the same name as the default
company logo image (see the 'Logo Size' column in the table above) and upload it to the location of the default company logo (see the 'Default Logo
Path and Filename' column in the table above). You can use a different filename, but in this case you will need to adjust the image filename in the code
that defines what file must be used as the company logo.
For instructions on changing the logo in Ideal Responsive skin see Replacing X-Cart's Logo in the Ideal Responsive Skin.
3.10 Customizing the breadcrumb trail

X-Cart 4.0or above
X-Cart generates a breadcrumb navigation trail automatically, using category titles for the crumbs. Until version 4.4.2, the first item of a breadcrumb trail
used to be Home. Now you can customize it too.
Customizing the first breadcrumb item
X-Cart 4.4or above

The first breadcrumb item is defined by the lbl_site_path variable. If the lbl_site_path variable is set ? for instance, to 'Home page' the breadcrumb
appears something like this:
Home page :: Books :: Internet :: Designing Web Usability
If the lbl_site_path variable is not set, the same trail now looks a bit different:
Books :: Internet :: Designing Web Usability
Customizing the breadcrumb separator
To customize the breadcrumb separator, select General settings -> Appearance on the administrator menu and then edit the "Separator string for
breadcrumbs" option in the "Miscellaneous" section.
X-Cart 4.3or above

In the earlier version of the software, the first breadcrumb item is defined by the lbl_site_path variable. If the lbl_site_path variable is set ? for instance,
to 'Home page' the breadcrumb appears something like this:
Home page :: Books :: Internet :: Designing Web Usability
If the lbl_site_path variable is not set, the same trail now looks different:
My Company Name :: Books :: Internet :: Designing Web Usability
14
To customize the 'My Company Name' value, select General settings -> Company options on the administrator menu and then edit the "Company
name" option in the "Company details" section.
X-Cart 4.0or above

In the older versions, the first breadcrumb item is always defined by the "Company name" option.
3.11 See also

X-Cart:Customizing_storefront
http://www.w3schools.com/css/css_intro.asp - profound information to learn about CSS
15
4 X-Cart:Customizing Text Labels
4.1 Overview
The text in the interface of your X-Cart based store (all kinds of text notes, labels and error messages), as well as the text sent in the e-mail notifications
to your users, is easily editable. Perhaps, the best thing about it is that user does not need to possess any programming skills to be able to edit the text:
the wording of any text piece of the store can be easily changed from the Admin area.
What makes text editing easy is the use of language variables. A language variable is a named storage location that can contain textual data. X-Cart's
template code and program code operate with language variable names instead of using text pieces directly. Thus, the text pieces contained in the
variables can be edited without changing the template or program code.
In fact, editing texts in X-Cart boils down to editing language variable values. X-Cart allows you to edit language variable values using the 'Languages'
section of the store's admin area (see #Managing Language Variables) or using the Webmaster mode (see #Using Webmaster Mode).
X-Cart's 'Languages' section allows you to edit the values of the existing language variables, add new language variables and delete the language
variables that you do not need in your store.
4.2 Managing Language Variables
4.2.1 Selecting a language for editing
Before you can edit, add or delete language variables, you need to select the language you are going to alter.
To select the language to be edited:
1. On the 'Content' menu, select 'Languages' in your store's admin area.
2. In the 'Edit language' section, pull the drop-down menu and then select the language to be edited.
This refreshes the page and displays all the tools necessary for editing the variables of the selected language.
4.2.2 Finding and viewing language variables
Please remember that every language is associated with a certain charset. To ensure that the variables of the language you have opened for editing are
displayed properly, make sure to view them in the language they were created. In other words, if the language selected for editing is French, the current
language of the Admin area needs to be switched to French, too:
The number of language variables in X-Cart is extremely great, so, in order to view specific language variables, you will first need to find them. X-Cart's
language variable filter facilitates finding language variables:
Here's how you can use the filter:
For your convenience, all the language variables in X-Cart are divided into several groups:
Countries - country names in the language you are currently editing

E-mail - text pieces used in email notification messages
Errors - error messages
Labels - relatively small text pieces (section titles, field names, etc)
Languages - language names in the language you are currently editing
Modules - module names and descriptions for the 'Modules' section of the store's admin area
Options - subsection titles for the 'General settings' section of the store's back end, names of specific options and settings, help notes for
specific options and settings
16
Text - longer text pieces (notes, comments, instructions, etc.)
The filter allows you to narrow down your search by specifying a group of variables to be searched and entering a sequence of characters to be looked
for.
To find one or more language variables:
1. On the 'Select topic' drop-down box of the language variable filter, select the variable group to be searched (or select All to search all the groups).
This refreshes the page and displays all the variables of the selected group in the 'Edit language entries' area below the filter.
2. In the 'Apply filter' field, enter a phrase, word or partial word to be looked for (Please note that X-Cart searches both variable names and variable
values).
3. Click the Go button.
This refreshes the page again displaying only those variables that belong to the specified variable group and match the search string.
4.2.3 Editing language variables
To edit the value of a language variable:
1. Select the language to be edited.

2. Make sure the options of the language being edited are adjusted properly:
If you have not yet done so, set the charset to be used for displaying the language by entering the respective charset code in the
'Charset' field of the 'Language options' section of the 'Edit language' page. By default, the value of the 'Charset' field is iso-8859-1,
which is appropriate for English and some other European languages. If you need a different charset, replace the content of the
'Charset' field with the required code. The following resources provide information on charsets:
http://en.wikipedia.org/wiki/Charset
http://en.wikipedia.org/wiki/ISO_8859
http://en.wikipedia.org/wiki/ISO_8859-1
Click the Apply button
3. Make sure the current interface language matches the language being edited (This is critical because when editing variable values in a certain
language, you want to enter the characters in the charset of that language).
4. Find the language variable to be edited.
5. Edit the value of the language variable.
6. Click the Update all button.
4.2.4 Adding language variables
To add a new variable:
1. Select the language to be edited.

2. Make sure the options of the language being edited are properly set.
3. Make sure the current interface language matches the language being edited (This is critical because when editing variable values in a certain
language, you want to enter the characters in the charset of that language).
4. Scroll down to the 'Add new entry' section of the 'Edit language entries' area.
5. Enter details for the new variable:
'Select topic' - Name of the variable group the new variable belongs to.
'Variable' - Name of the new variable (in English).
'Value' - Text piece to be stored in the variable (in the language being edited).
6. Click the Add button.
4.2.5 Deleting language variables
To delete one or more language variables:
1. Select the language to be edited and find the language variables to be removed.
2. Select the check boxes next to their names in the 'Edit language entries' area.
3. Click the Delete selected button.
4.3 Using Webmaster Mode

The Webmaster mode is an operating mode that facilitates the WYSIWYG editing of language variable values directly on the pages where they are
displayed. In this mode, clicking on any text element in your store opens an editor, where you can edit the text of the selected element. Once the
changes made to the element are saved, the result of the editing becomes available to all users viewing the respective page of your store.
The following browsers support the Webmaster mode:
IE 6.0.3790
17
IE 7.0.6000.16386
Firefox 2.0.0.5
Note: If you are using Firefox, and the browser status line (at the bottom) with the Webmaster mode enabled does not change when you move the
mouse over the site, make sure the option "Change status bar text" (Browser settings -> Content -> Advanced (Advanced JavaScript Settings) is
enabled in your browser.
Opera 9.22
Mozilla 1.7.13
Safari 2.0.4
Safari 3.0.4
Netscape Navigator 9.0.05 (Limited support: hyperlinks cannot be edited by pressing the "e" button)
Konquerror 3.5.7
Ephiphany 2.18.3
Other browsers may support the Webmaster mode, but we cannot guarantee it, as no thorough testing has been carried out.
Important: The Webmaster mode cannot be used in stores where a compilation of templates was done (For details on template compilation, see the
chapter Compiling templates).
4.3.1 Starting Webmaster mode
To start the Webmaster mode:
1. Go to the 'Webmaster mode' section of your store's Admin area by selecting the 'Webmaster mode' item on the 'Tools' menu. This opens a page with
instructions on using the Webmaster mode. At the bottom of that page, there is a button labeled Start Webmaster mode.
2. Click the Start Webmaster mode button to enable the Webmaster mode. You will know it is enabled when all the textual elements of the user
interface in your current user session become green:
18
It's OK! The green color of the text indicates that the Webmaster mode is on.
Webmaster mode also opens a pop-up window with the tree of templates used on the current page.
19
The window is X-Cart's Debugging console, which you can use to quickly edit any templates used on the current page. (For detailed information on
using the Debugging console, read X-Cart:Editing Skin Files#Using Debugging Console).
Note: Webmaster mode affects only one user session, the one where it is enabled. While you are working in Webmaster mode, other users working with
the store see the store's pages as perfectly normal (no green text or Debugging console).
4.3.2 Editing text in Webmaster mode
To edit text in the Webmaster mode:
1. Once the Webmaster mode is enabled, go to the page with the text to be edited.
If the desired page is in the Admin area, simply browse to that page (the way you would do that in the normal mode).
If the desired page is in the Customer area, click on the 'Open customer area in a new window' link at the top of the page with the
instructions on using the Webmaster mode (this opens the Customer area in a new browser window or tab in the same session),
then browse to the desired page. Please note that you will need to log in using your customer account to edit the pages that are
accessible to authorized customers only (like wish list, order history, etc).
(In X-Cart PLATINUM or PRO): If the desired page is in the Provider area, open the Admin area in a new browser window or tab in
the same session, then switch to that new window or tab, edit the URL in the browser address bar so that it points to the Provider
area and press the Enter key. When the Provider area authentication page appears, log in as provider and browse to the desired
page.
2. Make sure that the page to be edited is displayed in the language you are going to edit. For example, if the page is currently displayed in
English, and you wish to leave all the English text on the page "as is" and just edit the Russian version of the page, switch the Language
selector at the bottom right-hand corner of the page to Russian before you proceed.
3. Place the mouse pointer over the text element to be edited.
Tip: Notice that as you place the mouse pointer over a non-clickable text element, the browser status bar (in browsers that have it) displays
the name of the language variable that stores the respective text piece and the name of the template file that references this language
20
variable; similarly, when you place the mouse pointer over a hyperlink, the browser status bar displays the destination of the hyperlink.
4. Do one of the following:
(If the text element is a non-clickable piece of text) Click the text element.
(If the text element is a hyperlink): Press the "e" key on your keyboard.
Important: Make sure the keyboard layout on your computer is set to English when you are pressing the e key; otherwise it will
simply not work.
This opens a small pop-up window titled 'Edit label', where you can edit the value of the language variable:
Edit the value of the language variable displayed in the 'Edit label' pop-up window and save the changes. For information on the 'Edit label' pop-up
window, see the following chapter.
The 'Edit label' pop-up
The 'Edit label' pop-up window appears after you select a text element to be edited in the Webmaster mode. It displays the name of the language
variable that stores the selected text element and provides a text area, where you can edit the value of that variable.
Note that with the HTML Editor module enabled in your store you can use a WYSIWYG editor for editing language variable values that are longer than
40 characters or contain an EOL (end of line) symbol. The two links: 'Default editor' and 'WYSIWYG editor' above the text area with the variable value
indicate that the WYSIWYG editor is available:
21
By clicking on the 'WYSIWYG editor' link, you can switch to editing the variable value in the WYSIWYG editor. If you do not like the WYSIWYG editor,
you can switch back to the Default editor at any moment by clicking on the 'Default editor' link.
For short and simple language variable values (shorter than 40 characters or not containing EOL symbols) only the Default editor is provided (In this
case, you do not see any links above the text area).
Below the text area with the language variable value, there are three buttons: Preview, Save and Cancel.
The Preview button allows you to preview the page after making changes to the language variable value before you actually save the changes.
The Save button saves the changes you make to the language variable value.
The Cancel button allows you to discard any changes made to the language variable value before they are saved.
4.3.3 Exiting Webmaster mode
To quit the Webmaster mode:
1. Go to the 'Webmaster mode' section of your store's Admin area by selecting the 'Webmaster mode' item on the 'Tools' menu.
2. Click the Close Webmaster mode button. The Webmaster mode will be disabled. All the textual elements in the store should return to their
normal colors.
Note: Quitting the Webmaster mode does not automatically close the pop-up windows that were opened while you were using the Webmaster mode
(the windows that might be open are the Edit label window and the Debugging console window). You need to close any such windows manually. Before
re-enabling the Webmaster mode, after it was closed, make sure you have closed any pop-up windows that were left open by the previous Webmaster
mode session.
22
5 X-Cart:Managing Languages
5.1 Overview
If your customers come from different countries, or you do business in a multilingual country, having your online store available in several languages will
be rather advantageous to your business. X-Cart enables you to build a true multilingual store and translate the store to as many languages as you
wish. You can apply several languages to all store interfaces (Customer, Admin, Provider and Partner areas) and different kind of store data, including
product and category descriptions, manufacturer pages, static content, etc.
Note: X-Cart v4.4.5 and older versions out of the box does not support UTF-8 character encoding. See the Server Requirements section for more
information on using UTF-8, as well as FAQs: How do I set up my X-Cart to support UTF-8?
When a store has more than one language, store users can switch between languages using a language selector. For the Customer area the selector
can be either a drop-down box, a single-line box with text or a single-line box with language icons (defined by the store administrator in the General
settings/Appearance options section); for the Admin, Provider and Partner areas the selector is available as a simple drop-down box only. A selector
contains a list of all the languages that are currently installed and activated in the store.
After a user has switched a language, the text of the current interface will automatically change to the selected language until the current user session
expires. When the user starts a new session, the language will be switched back to the store's default language, which is set up by the store
administrator.
X-Cart is delivered with the English language pack only. To add a new language you need to either import a tailored language pack or translate all the
language variables on your own. The translation does not cause any technical difficulties usually, but it may take time and effort. To translate X-Cart into
a different language, first you need to create a copy of an existing language and then either translate its variables directly in the Admin area or export
the variables in a CSV file and edit the file with any suitable facility, including a spreadsheet editor like Microsoft Office Excel or OpenOffice.org Calc.
A tailored language pack is a CSV file with translated language variables. Language packs can be obtained from independent third-party developers and
dedicated X-Cart community members who have already translated their stores to other languages and who are ready to share or trade the language
packs they have. Some good language packs are available at
http://marketplace.x-cart.com/addons-modules/Languages-translations/google-translations/ and http://forum.x-cart.com/.
This video showcases X-Cart multilingual capabilities:
5.2 Adding languages

Technically, adding a language to a store means that you create a new language either by cloning an installed language or by importing a tailored
language pack, a CSV file with translated language variables.
When you create a new language without importing a tailored pack, the variables for the new language are taken from the default language for the
Customer area. If some of the variables are broken or missing, X-Cart takes their values from the default language for the Admin area. If unsuccessful,
the variables get the values of the English language pack. When you create a new language by importing a tailored language pack, the variables for the
new language consecutively take their values from the default languages for the Customer and Admin areas, and from the English language pack.
Finally, the existing variables get replaced with the values from the language pack that you import. This way of importing languages ensures that the
new language will not have empty or broken variables if there were any in the language pack that you imported. For example, this may become an issue
if you import a language pack for an earlier X-Cart version.
To add a language:
23
1. In the Admin area, go to the Edit languages section (In X-Cart versions 4.4.0 and later, this section can be found at Content menu ->
Languages; in earlier X-Cart versions, this section can be found at Administration menu -> Languages).
2. Scroll down to the Add/Update language box.
3. In the drop-down box Choose a language, select the name of the language that you want to add.
4. If you are importing a tailored language pack:
Make sure the charset of the language pack CSV file matches your system locale.
From the CSV delimiter drop-down box, select the type of delimiter that is used in the CSV file that is going to be imported;
Specify the filename and the location of the CSV file.
If the file is located somewhere on the server, select Server as the source of the import file and enter in the CSV file is
located on the server field an absolute path to the file;
If the file is located on your local computer, select Home computer as the source of the import file and use the Browse
button to locate the file.
5. Click the Add/Update language button.
After you have clicked on Add/Update language, the new language will be added to the store. X-Cart will display the Edit language box, which you can
use to disable/enable the language, change the language charset and the language icon. If you edit any of the language options, remember to click the
Apply button for changes to take effect.
Below the Edit language box X-Cart will display another box Edit language entries, which you can use to edit some of the variables of the selected
language.
24
5.3 Setting default languages
When a store uses several languages, you should specify which languages should be used as default languages for the customer and administrator
interfaces. A default language means a language in which a user interface must appear when a user first opens a particular interface (Customer, Admin,
Provider or Partner area). Customer interfaces include the Customer area and the Partner area; administrator interfaces include the Admin area and the
Provider area.
For registered users, X-Cart can remember what language they selected, and when a registered user logs in to the personal account, X-Cart
automatically switches to the user's language, not to the default language. For anonymous users, X-Cart does not keep information about a preferred
user language, and anonymous users need to switch to their language each time they visit your store.
To set a default language for the customer and administrator interfaces:
2. Select the language you want to use as default from the Default customer language and Default admin language drop-down selectors in
the Edit language box.
A default customer language means a default language for the Customer and Partner areas.
A default admin language means a default language for the Admin and Provider areas.
3. Click the Update button to apply the changes.
25
Note: When you change the default admin language, it does not affect the titles, product and category descriptions in the admin area. To copy these
descriptions from international descriptions:
1. Open the International descriptions page

2. Select default language
3. Click Save. The international descriptions values will be copied to the main fields of products/categories.
5.4 Exporting languages

To export a language:
2. Select the language you want to export from the Language drop-down selector in the Edit language box.
After you have selected the language, the page will automatically refresh expanding the Edit language box, which now contains several
options and controls.
3. Select a type of a delimiter for the export file from the CSV delimiter drop-down box selector.
4. Click the Export' button.
After you have clicked on Export, a dialog window appears. In the dialog window select to save the CSV file. If prompted, choose a location where the
CSV file should be saved to.
5.5 Disabling languages

If you do not use some of the store languages any longer, you can disable them so that your store users could not select and use these languages. The
option is a recommended one as opposed to deleting languages, because you will be able to easily re-enable the disabled languages if needed.
Important: X-Cart requires that at least one language must be enabled. Also you will not be allowed to disable a language if there is only one language
available in the store.
To disable a language:
2. Select the language you want to disable from the Language drop-down selector in the Edit language box.
26
3. Click the Disable' button.
After you have clicked on Disable, X-Cart will reload the page, and the Disable button will turn to the button Enable, which you should use to enable the
disabled language if needed.
5.6 Deleting languages

For some reason you may need to delete one of the store languages. It is recommended that you never delete the English language pack that is
delivered with X-Cart. And if you do not need to use the English language in your store, simply disable it according to the instructions in the #Disabling
languages section of this manual. Whichever language you delete, it is recommended that you first export the language pack for this language so that
you could restore the language if needed. For instructions on how to export a language, refer to the #Exporting languages section of this manual.
27
Important: X-Cart requires that at least one language must be installed. Also you will not be able to delete the language you are currently using for the
Admin area; if you need to delete this language, first switch to a different one.
To delete a language:
1. In the Admin area, go to the Edit languages section (Administration menu -> Languages).
2. Select the language you want to delete from the Language drop-down selector in the Edit language box.
3. Click the Delete button and confirm your action when prompted.
After you have clicked on Delete, X-Cart will display a confirmation message saying that the language has been deleted successfully.
28
6 X-Cart:Static Pages
6.1 Overview
The customer-facing area of your store's website will consist primarily of product, category and manufacturer pages. However, you may feel the need to
add some more information that does not fit into pages of the said types; for example, you may want to add your store's Terms and Conditions, Privacy
Policy and the like. X-Cart allows you to add pages to your website where you can place any content that you feel is needed. Such pages in X-Cart are
called static pages. X-Cart supports two types of static pages:
Embedded
Root level
Root level pages are fully independent HTML files. They exist in X-Cart root (the directory where your X-Cart store is installed), hence the name. Root
pages do not depend on the rest of X-Cart pages, so they must be full HTML-files (must include tags like <HTML>...</HTML>).
Embedded pages are pages that are placed inside standard X-Cart pages. Their appearance depends on the design of your store in general, as you
create only the page content. The content of embedded pages is displayed in your store's Information column (the widest column in any X-Cart's
standard template scheme). Embedded pages do not use tags like <HTML>, <HEAD>, <BODY>.
Root level pages are stored in the X-Cart root directory, embedded pages - in the subdirectories of the directory skin/common_files/pages named after
the respective languages (for example, pages for the English language are stored in the directory skin/common_files/pages/en, pages for the German
language - in the directory skin/common_files/pages/de, etc.)
X-Cart 4.0or above

Note: In versions prior to 4.4.x, embedded pages are stored in the corresponding subdirectories of the directory skin1/pages named after the respective
languages (for example, pages for the English language are stored in the directory skin1/pages/US, pages for the German language - in the directory
skin1/pages/DE, etc.)
X-Cart comes with the following root level static pages out of the box:
message (<xcart_dir>/message.html)
permission_denied (<xcart_dir>/permission_denied.html)
shop_closed (<xcart_dir>/shop_closed.html)
It also has a few pre-created embedded pages:
About our site (<xcart_dir>/skin/common_files/pages/en/about_our_site.html)

FAQ (<xcart_dir>/skin/common_files/pages/en/faq.html)
Terms & Conditions (<xcart_dir>/skin/common_files/pages/en/terms.html)
Privacy statement (<xcart_dir>/skin/common_files/pages/en/privacy_statement.html)
Publicity (<xcart_dir>/skin/common_files/pages/en/publicity.html)
(By default, links to the above named embedded pages are included into the 'Help' menu box in your store's Customer area.)
On a fresh X-Cart install, the above pages contain dummy text. Before going live with your store, you should edit the contents of the said pages so they
provide meaningful content for your customers. If you do not want to use these pages, remove or disable them (See Managing Static Pages for more
info).
The file include/func/func.pages.php defines aliases for your store's default embedded pages:
$page_aliases = array(
'faq' => 'faq',
'about' => 'about_our_site',
'business' => 'privacy_statement',
'conditions' => 'terms',
'publicity' => 'publicity',
);
As a result, the pages can be accessed at the following aliases:
About our site: htt?://<YOUR_XCART_STORE>/pages.php?alias=about

FAQ: htt?://<YOUR_XCART_STORE>/pages.php?alias=faq
Terms & Conditions: htt?://<YOUR_XCART_STORE>/pages.php?alias=conditions
Privacy statement: htt?://<YOUR_XCART_STORE>/pages.php?alias=business
Publicity: htt?://<YOUR_XCART_STORE>/pages.php?alias=publicity
6.2 Adding Static Pages

Both embedded and root-level static pages can be created using the 'Static pages' section of your store's Admin area.
To add a new static page:
29
1. Go to the 'Static pages' section of your store's Admin area (Content -> Static pages). This opens the 'Static pages' form.
2. (If your store supports multiple languages) From the Language selector at the top of the 'Static pages' form, select the language in which you
are going to add a static page. This switches the active language of the Admin area so you can provide content for the new page in the
chosen language.
3. Depending on the type of static page you are adding (embedded or root-level), choose either the 'Embedded level' or the 'Root level'
subsection of the 'Static pages' form. In the respective subsection, click the Add new... button. This opens the 'Static page details' form.
4. Use the 'Static page details' form to provide the details of the new static page (See #Defining Static Page Details).
5. Click the Save button at the bottom of the 'Static page details' form to save the changes.
Clicking Save creates the static page. You should see a confirmation message.
The Pages list button at the top of the 'Static page details' form allows you to return to the 'Static pages' form where you will be able to see the new
page added to the static pages list.
Note: At any moment in time, the static pages list displays only the static pages that were created in the language currently used for viewing the Admin
area.
6.3 Defining Static Page Details

When you create or edit a static page, you define its details using the 'Static page details' form.
For embedded static pages, the 'Static page details' form looks as follows:
30
It contains the following fields:
Page file: File name of the static page.

Page name: Name by which you and your customers will be able to identify this static page.
Clean URL: Clean URL value for this static page. Instructions on editing this field are available in X-Cart:Clean URLs#Defining Clean URL
Values.
Note: The 'Clean URL' field needs to be adjusted only if the Clean URLs functionality is enabled in your X-Cart store. If the Clean URLs functionality is
disabled, the 'Clean URL' field appears inactive.
31
Page content: Content/HTML source code of the page.
Note: You can edit the content of the page in WYSIWYG mode if your store has the HTML Editor module enabled. For details, see the X-Cart:HTML
Editor section in this manual.
Title tag: Title to be used in the title tag of the static page.
META keywords: Keywords to be listed in the keywords meta tag of the static page.
META description: Description to be placed in the description meta tag of the static page.
Note: For more information on using the description and keywords meta tags, see the X-Cart:Configuring Page Titles and Meta Tags section of this
manual.
Status: This option allows you to specify whether the page should be available for viewing to the visitors of your store's Customer area.
Position: Position of the static page title in the list of static pages within the 'Static pages' form and (if the 'Show a link to the page in Help
menu?' option is enabled) on the Help menu box of your store's Customer area.
Show a link to the page in Help menu?: This option allows you to specify whether the link to this page should be included in the Help menu
box of your store's Customer area.
For a root level static page, the 'Static page details' form contains only the following fields:
Page file: Filename for this static page.

Page name: Name by which you will be able to identify this static page.
Page content: Content/HTML source code of this page.
To define the details of a static page, you need to provide all the necessary information in the respective fields of the 'Static page details' form and click
the Save button at the bottom. After the static page details have been saved, you should see a confirmation message.
6.4 Managing Static Pages

Your store's embedded and root level static pages can be managed using the controls of the 'Static pages' form.
Finding all static pages in a specific language
The 'Static pages' form can be used to output a list of static pages for a specific language. This function is especially important if you created or edited
your store's static pages using an external HTML editor: to manage externally created pages from within your store's Admin area, you need to get them
listed in the 'Static pages' form. The same holds true for the pre-configured root-level pages that come with X-Cart (message.html,
permission_denied.html and shop_closed.html): the said pages do not appear on the static pages list until you get X-Cart to find all the existing static
pages for the English language.
32
To get the 'Static pages' form to display all your store's static pages in a specific language:
1. If your store is based on X-Cart 4.5.0 or later: Make sure that any custom HTML pages in your store use the UTF-8 charset. Failure to use
UTF-8 may later cause problems displaying such pages: in your store's front end some characters in such pages may appear as diamonds
with question marks (the Unicode replacement character), whereas in your store's Admin area such pages will not be displayed at all (so you
will not be able to view or edit them, which rather defeats the purpose of displaying the list of static pages in Admin).
2. In Admin area, open the 'Static pages' form and select the desired language as current.
3. Click the Find pages button. The 'Static pages' form opens up a list of all the root-level static pages it finds in the directory /xcart and all the
embedded pages it finds in the directory /xcart/skin/common_files/pages/<current_language> (where <current_language> is a two-letter code
of the language currently selected in the language selector).
Warning: In fact, the resulting list will include any HTML pages that X-Cart finds in the directories /xcart and
/xcart/skin/common_files/pages/<current_language>. This means, for example, that if you have an HTML catalog in your store's root, clicking the Find
pages button will result in that the pages of the HTML catalog will be included into the static pages list.
You can quickly preview the content of any static page in the static pages list by clicking the Preview link opposite its title.
Editing the details of an existing static page
You can edit the details (name, content, etc) of any static page in your store.
To edit the details of a static page:
1. Select the language of the page as current.

2. Find the page in the list on the 'Static pages' form and then click on its title.
3. On the 'Static page details' form, edit the necessary details (See #Defining Static Page Details).
4. Click the Save button. The static page details are updated. You should see a confirmation message.
Changing the availability status of an embedded static page
It is possible to restrict access of users to specific embedded static pages. For example, when you are editing the content of a static page, it is a good
idea to make the page temporarily unavailable for viewing, i.e. to disable it.
To temporarily disable an embedded page:

2. Find the page in the list on the 'Static pages' form and deselect the Status check box opposite its title.
3. Click the Update button. This makes the page unavailable: anyone who requests this page (excluding your store's administrator users) will get
the '403 access denied' error. Disabling a static page also disables the link to this page from the Help menu box of your store's Customer
area, if such a link is provided.
To re-enable a previously disabled static page, select the respective Status check box and click Update.
Note: For earlier versions, the status of a static page can be changed by selecting either Enabled or Disabled from the STATUS drop-down box
opposite the page title and clicking Update.
Deleting a static page
If you decide you no longer need one or more static pages, you can permanently remove them:

2. Find the page in the list on the 'Static pages' form and select the check box next to its title.
3. Click the Delete selected button. This removes the selected static pages. You should see a confirmation message.
Providing links to embedded static pages in the Help menu box
You can specify which embedded static pages need to be linked to from the 'Help' menu box in your store's Customer area. The set of static page links
included into the 'Help' menu box is adjusted separately for each of the supported languages.
To include a link to a specific embedded static page into the 'Help' menu box:
1. Select the desired language as current.

2. Select the 'Show Link' check box opposite the title of the embedded static page which needs to be made accessible via a link in the 'Help'
menu box.
3. Click the Update button. This updates the static page details and creates a link to the page in the 'Help' menu box. You should see a
confirmation message.
Reordering the items in the Static pages list / Help menu box
The value of the Pos. field opposite each static page title in the 'Static pages' form defines the position of the page's title in the list on the 'Static pages'
form and - for embedded pages - in the 'Help' menu box in your store's Customer area. In general, items with a smaller Pos. field value appear earlier in
the list. The order of static page titles is adjusted separately for each of the supported languages.
To reorder static page titles for a specific language:
1. Select the desired language as current.

2. Readjust the page position numbers in the Pos. column of the 'Static pages' form.
33
3. Click the Update button. The page titles are reordered. You should see a confirmation message.
Using Smarty with embedded static pages
You can allow or disallow the use of Smarty tags and syntax in your store's embedded static pages. This is done by adjusting the check box option
'Parse Smarty tags in the content of embedded pages' displayed below the list of embedded static pages in the 'Static pages' form. All you need to do is
select or deselect the check box and click the Update button.
Alternatively, you can adjust the option 'Parse Smarty tags in the content of embedded static pages' on the 'General settings/General options' page
('Miscellaneous' section). That is exactly the same option which appears in two places.
For more information on Smarty, see http://www.smarty.net/docsv2/en/.
6.5 Creating Versions of a Static Page for Different Languages

If your store uses multiple languages, each static page used in your store will need to have a version for each of the supported languages.
To create a version of an existing static page in another language:
1. Go to the 'Static pages' section of your store's Admin area.

2. Use the language selector to switch the interface of your store's Admin area to the language, in which the static page already exists.
3. Find the name of the static page in the list on the 'Static pages' form and click on it. This opens the 'Static page details' form with the details of
the page you have selected.
4. Switch the language selector to the language you want to translate the page to.
5. Edit the fields of the 'Static page details' form:
Provide the language-specific page name, content, status and position.
For an embedded static page, provide the language-specific meta keywords and meta description and specify whether the link to
the page in this language is to be included in the Help menu box of your store's Customer area.
Note: The value of the 'Clean URL' field is the same for all the versions of an embedded static page regardless of the language.
Althought the 'Clean URL' field remains editable while a static page is being translated into another language, editing the contents of
this field does not create a separate clean URL for the page version being created.
6. Click the Save button.
Clicking Save creates the static page in the selected language. You should see a confirmation message.
6.6 See also

Where do I edit my "About our site", "Terms & Conditions", "Privacy statement" pages?
Setting up proper permissions for embedded static pages' directories and files.
34
7 X-Cart:Speed Bar
7.1 Overview
You can provide your customers with the ability to quickly access certain pages of your store using the speed bar. The speed bar is a configurable set of
shortcuts facilitating site navigation. It can be seen at the top right-hand corner of any page in the Customer area. It appears as a set of tabs with links to
the most important pages of your store.
7.2 Adding Links to the Speed Bar

You can define what links should be in the speed bar of your store.
To add a link to the speed bar:
1. Go to the 'Speed Bar Management' section (Administration menu->Speed bar). A dialog box titled 'Speed Bar Management' opens.
2. (If your store supports more than one language) From the Language selector at the top right-hand corner of the 'Speed Bar Management'
dialog box, select the language in which you are going to create the link.
3. In the 'Add Link' subsection of the 'Speed Bar Management' dialog box, enter information about the shortcut that needs to be created:
POS.: Position of the speed bar tab that will contain the link.
LINK TITLE: Name of the shortcut (Text of the link that will be displayed on the speed bar tab).
URL: URL of the page that will be the destination of the link.
ACTIVE: Availability status of the link (When the check box in the ACTIVE column is selected, a tab with the link is displayed in the
speed bar; when unselected, the tab is disabled).
4. Click the Add button.
If your store supports more than one language, you will probably need to create a name for the created shortcut in each of the supported languages. For
each of the languages, do the following:
35
1. From the Language selector at the top right-hand corner of the 'Speed Bar Management' dialog box, select the language in which you wish to
create a name for the shortcut.
2. In the list of shortcuts, find the shortcut whose name you wish to translate and replace its name in the LINK TITLE field by the desired name in
the selected language.
3. Click the Update button.
To make sure that the shortcut name has been created correctly for each of the supported languages, switch the interface successively into each of the
languages - the contents of the LINK TITLE field should be different.
7.3 Managing the Speed Bar Links

To rename a speed bar link:
1. In the 'Speed Bar Management' dialog box, find the link that needs to be renamed.
2. Use the Language selector to select the language in which the name needs to be edited.
3. Replace the contents of the LINK TITLE field with the new name in the selected language.
To edit the destination of a speed bar link:
1. In the 'Speed Bar Management' dialog box, find the link the destination of which needs to be edited.
2. Change the destination page URL for this link in the URL column.
To change the order of links in the speed bar:
1. In the POS. column of the 'Speed Bar Management' dialog box, edit the position numbers of the links that need to be rearranged.
To disable a speed bar link:
1. In the 'Speed Bar Management' dialog box, find the link that needs to be disabled.
2. Unselect the check box in the ACTIVE column opposite this link.
To delete one or more links from the speed bar:
1. In the 'Speed Bar Management' dialog box, find the links that need to be removed from the speed bar and mark them for deletion by selecting
the check boxes next to them.
2. Click the Delete selected button.
36
8 X-Cart:404 Error Page
8.1 Overview
X-Cart provides a 404 error page. The 404 error page is a page used to display the 'Page not found' error message when a visitor attempts to access
the store site using a URL for which no page exists. Typically, this happens if the URL being used is spelled wrong, or if the page being requested has
been removed.
The 404 error page in X-Cart serves to provide a more user-friendly experience for your store's users: unlike the default 404 error message returned by
the web server, it looks nice, follows the design of the other pages in your store, explains the problem in plain words and provides navigation links
allowing the user to try other pages on your store site:
At any moment, you can view your store's 404 error page by pointing your browser to the location of your store with the addition of /404.php. For
example, if your store's URL is http://example.com, you can view its 404 error page by pointing your browser to http://example.com/404.php.
Please note that X-Cart's 404 error page does not work out of the box. To use it in your store, you need to enable it. The procedure is different
depending on the web server you are using. Instructions for enabling the 404 page in X-Cart on the most popular web servers are available in the
following sections:
Enabling X-Cart's 404 Error Page on Apache

Enabling X-Cart's 404 Error Page on IIS
X-Cart's 404 error page is easily customizable. To find out how you can change the content of your store's 404 error page, see the section Customizing
X-Cart's 404 Error Page.
The 404 error page included with the X-Cart distribution package is intended for the English language. If you wish to enable the users of your store
speaking in languages other than English to read the contents of the 404 error page in their own languages, you must create a version of the
provide 404 error pages for languages other than English, you must create them. For instructions, see the section Creating Versions of the 404 Error
Page for Other Languages.
8.2 Enabling 404 Error Page on Apache

If you are using Apache web server, to enable use of X-Cart's 404 error page in your store, you must edit the .htaccess file located in your X-Cart
installation directory as follows:
Uncomment the following line:
37
# ErrorDocument 404 /404.php
by removing the leading "#".
If your X-Cart is installed in a subdirectory (not in the root of the website), edit the uncommented line above to include the full relative path to
the 404.php script.
For example, if your X-Cart is installed in the folder /store, so the store is available at the address http://example.com/store/home.php, the said line in
your .htaccess file must read as follows:
ErrorDocument 404 /store/404.php
(Note the absence of "#" at the beginning of the line).
8.3 Enabling 404 Error Page on IIS

If you are using IIS web server and wish to use X-Cart's 404 error page in your store, you must configure IIS to use the file <xcart_dir>/404.php for the
custom 404 error message.
In order to configure IIS, you must be an administrator of the web server (or a member of the Web Site Operators group) and have access to an IIS
admin interface. If you do not have administrator privileges and/or physical access to the computer on which the server is run, you will have to ask your
administrator to take these steps on your behalf.
To enable use of X-Cart's 404 error page on IIS, do the following:
1. In the Internet Information Services snap-in, select your website, right-click, and choose 'Properties'.
2. Select the 'Custom Errors' tab.
3. Select the HTTP error that you would like to change, in this case 404.
4. Click the Edit Properties button.
5. From the 'Message Type' drop-down box, select File.
6. Enter the full path that points to the file <xcart_dir>/404.php, or use Browse... to locate this file.
7. Click the OK button.
8.4 Customizing 404 Error Page

The content of X-Cart's 404 error page for the English language is defined by the file 404_en.html located in the directory
<xcart_dir>/skin/common_files/404. You can easily change the look and feel, as well as the textual content of your store's 404 error page by editing this
file. The editing can be done in X-Cart's built-in template editor (see the section Using Template Editor), or in any decent external text editor.
8.5 Creating Versions of the 404 Error Page for Other Languages
If your store supports languages other than English, it is recommended you create a version of the 404 error page for each of the languages in your
store. This way your store's non-English speaking users will be able to read the contents of the 404 error page in the language they use to view the rest
of your store.
Note: Unless you provide a version of the 404 error page for each of the languages supported by your store, in case of 404 error users that view your
store in a language for which no 404 error page exists will be served the first available language version of the 404 error page that X-Cart will be able to
find.
To create a version of the 404 error page for a language other than English, do the following:
1. Save the file 404_en.html from the directory <xcart_dir>/skin/common_files/404 as 404_xx.html, where xx is an ISO 639-1 alpha-2 code of the
desired language. You can accomplish this using the 'Browse templates' section of your store's Admin area (Administration menu->Edit
templates):
Browse to the directory <xcart_dir>/skin/common_files/404.
Select the radio button next to the filename 404_en.html.
In the section 'Copy selected file to...', enter the filename for the new language version of the 404 error page. For example, if you
wish to create a version of the 404 error page in German, you must use the filename 404_de.html.
Click the Copy button.
2. Open the file 404_xx.html that has been created in a text editor. For example, you can use X-Cart's built-in template editor (See Using
Template Editor).
3. Edit the textual content of the 404_xx.html file translating it from English into the desired language.
4. Make sure the page for the language version you are creating uses the correct charset. The charset of X-Cart's 404 error page for the English
language is specified in the 404_en.html file as iso-8859-1. If the language into which you are translating this page uses a different charset, be
sure to correct the encoding and charset values in your 404_xx.html file.
5. Save the file.
Now any users browsing your store in the language of 404_xx.html who get a 404 error will be served the content of 404_xx.html.
To make sure the 404 error page works properly for a specific language, do the following:
1. On any page within your store, switch the Language selector at the top of the page to the desired language.
38
2. Edit the URL in the address bar of your web browser so it points to any location that you know does not exist in your store.
3. Press Enter.
As a result, you should see your store's 404 error page in the selected language.
39
9 X-Cart:Adding Facebook Like button to your X-Cart store
Adding a Facebook "Like" button can be done either with an iframe or using the Facebook JavaScript SDK and XFBML. Facebook provides Detailed
Instructions on how to integrate the like button on your site.
9.1 Adding the FB "Like" button to product pages

X-Cart 4.4or above
You can easily embed the button and automate it in a product template. Here are the steps:
1. Use the FB iframe configuration tool to generate the code you want to display on any one page.
Here is an example of that iframe code:
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.your_domain.com&layout=standard&
show_faces=true&width=400&action=like&font=segoe+ui&colorscheme=light" scrolling="no" frameborder="0"
allowTransparency="true" style="border:none; overflow:hidden;width:400px; height:80px"></iframe>
2. Paste this code into the skin/common_files/customer/main/product_details.tpl template located in your X-Cart skin folder.
Note: In the earlier versions of X-Cart, the template is located at skin1/customer/main/product_details.tpl

Note: There are several product_details.tpl files in the distribution kit, where the default one is skin/common_files/customer/main/product_details.tpl.
Certain skins use their skin-specific template files; those that do not have their skin-specific file use the default one.
3. To automate the page URL for the button on each page, replace the page filename in the FB code with the Smarty tag
{$php_url.url|escape:"url"}?{$php_url.query_string|escape:"url"}
Example:
<iframe src="http://www.facebook.com/plugins/like.php?href={$php_url.url|escape:"url"}?{$php_url.query_string|escape:"url"}&layout=standar
show_faces=true&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true"
style="border:none; overflow:hidden; width:450px; height:80px"></iframe>
4. If you want to control the title of the page, the name of your website, and an image that is used, add the ?meta? elements to the <head> region of
your template. i.e.:
<meta property="og:title" content="{$product.producttitle|default:$product.product|escape}"/>

<meta property="og:site_name" content="Your Site Name"/>
<meta property="og:image" content="{$product.image_url|default:$product.tmbn_url}"/>
That?s it. The new Facebook Like button will now appear on all of your store's catalog pages.
40
9.2 Adding multiple "Like" buttons to category pages
X-Cart 4.4or above
This is pretty much the same as adding the "Like" button to a single page, except here we edit a different template file and use a different product URL.
To add multiple "Like" buttons to a category page:
1. Use the FB iframe configuration tool to generate the code you want to display by each product.
2. Paste this code into the skin/common_files/customer/main/products_list.tpl template.
Note: In the earlier versions of X-Cart, the template is located at skin1/customer/main/products_list.tpl

Note: There are several products_list.tpl files in the distribution kit, where the default one is skin/common_files/customer/main/products_list.tpl. Certain
skins use their skin-specific template files; those that do not have their skin-specific file use the default one.
3. To automate the product URL for the button on each page, replace the page filename in the FB code with the Smarty tag
{$current_location|escape:"url"}/{$product.page_url|escape:"url"}.
Example:
<iframe src="http://www.facebook.com/plugins/like.php?href={$current_location|escape:"url"}/{$product.page_url|escape:"url"}&layout=standa
show_faces=true&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true"
style="border:none; overflow:hidden; width:450px; height:50px"></iframe>
That?s it. The new Facebook Like button will now appear on all of your store's catalog pages.
41
9.3 Adding "Like" button to HTML catalog pages
If you have added the "Like" button to the dynamic product pages, X-Cart generates the corresponding HTML catalog pages with the "Like" button
already embedded, so adding the "Like" button to HTML catalog pages requires no additional action on your side.
9.4 See also

http://developers.facebook.com/plugins
42
10 X-Cart:Design specification guidelines
This article is aimed at helping you create your own unique design, clear and convenient for customers and including all the necessary X-Cart elements
you want to use.
Design integration is the process of changing the appearance of X-Cart customer area so that it looks almost exactly as your mockups. That is why
mockups are essential for design integration.
10.1 Main requirements

For successful integration of your design it is enough for us to get mockups of one or two store pages:
Home page with products list layout

Product or Category page
However, if you can provide more mockups, we will be able to do the integration more accurately.
Generally an X-Cart page consists of the following sections presented on the screenshot:
43
10.1.1 Home page
View screenshot or online demo.
A standard home page includes the following units:
1. Header. It usually consists of:

logo
speed bar links
search field
phone numbers
language switcher (X-Cart allows to change language using icons or a select-box)
2. Main part. It usually consists of a left/right column (or columns), which holds X-Cart menu and a central part. A standard X-Cart includes the
following menus:
category menu (can be one-level, multi-level with flyout sub-menus and multi-level with tree-like expanding submenus)
bestsellers menu (this menu can be replaced by a list of products in the central part, just as a featured products list)
44
manufacturers list menu (optional)
help menu (includes useful links, such as Contact us, About us, etc.)
cart menu. This menu is very important, it contains important shopping links (a link to cart page, a link to checkout, etc.). It also
displays the customer?s cart status: Cart is empty , Items: N Total: $XXX.XX. Besides, X-Cart v.4.3 and above has an AJAX
minicart feature. If you plan to use this functionality, you should think about the look of the expanding menu and icons for the
minicart. To see this menu please open our demo site and add a product to cart. You will see that the cart menu has changed. Click
on the cart icon to see the details in a pop-up window. We recommend to consider this functionality in your design.
your account menu. It contains a sign-in form and a link to the registration page. Please take into account that this menu looks
different when a client has signed in
news menu. It contains the last news and its date, as well as a link to the full news list and the subscription form. Please take into
account that in X-Cart v.4.3 subscription is located on the news page.
Central part of the home page of a standard X-Cart contains:

Greeting text
List of Featured products
3. Bottom part. Usually contains:
Number of users online (if the Users Online is enabled).
Copyright 2002-2010 Your Company Name
10.1.2 Category page
A standard category page includes the following units:
1. Header. The same as on other pages.

2. Main part. Usually contains the same menu columns as the other site pages and a central part. The central part of the category page of a
standard X-Cart contains:
a list of subcategories of the current category. It can look as a table of category icons or a list of subcategories (if any)
a list of Featured products of this category (if any)
a list of products of the current category (if any)
3. Bottom part. The same as on other pages..
10.1.3 Product page
A standard product page includes the following units:
1. Header. The same as on other pages.

2. Main part. Usually contains the same menu columns as the other site pages and a central part. The central part of the product page of a
standard X-Cart contains:
product name
product image
product details (description, options, additional fields)
product amount field (input box or select box)
buttons: add to cart and add to wish list (if the WishList module is enabled)
?Send to friend?, ?Related products?, ?Customers who bought this product also bought?, ?Customer feedback? sections,
according to the settings (for details see Modules and Add-ons section).
3. Bottom part. The same as on other pages.
10.2 Mockup quality

For design integration it is enough for us to get high quality graphic images in the following formats:
.psd (Photoshop) or
.png (Macromedia Fireworks)
They should display elements in separate layers.
Color mode: RGB;
Resolution: 72 dpi;
Image size of page samples: (960-1260) x (800-2000) px.
Mockups should display the desired store width. The height can be varied and should depend on the page content.
Design samples in PSD format are preferable. Vector format (.cdr, .ai) is also possible, but we definitely need the example of the design in raster format
to compare the zoom of integrated elements.
45
10.3 Typical items
X-Cart has some typical items:
10.3.1 Dialogs
Dialogs are blocks containing elements of the main content. A dialog usually consists of a heading and content. Here is an example of a dialog:
Please note that in X-Cart v.4.3 a ?Sort by? unit for the products list is placed to the right of the dialog title. If you plan to use different kinds of dialogs for
different types of content (for example, for product list and for product details), you should specify exact design styles. You should also define the default
style for dialogs which will be used on different site pages. We ask you to pay attention to this when discussing the design integration project.
10.3.2 Menus
Menus are units on the sides of the general content. For example:
Menus also have headings and content. If you plan to use different kinds of menus for different content, please pay attention to this when discussing the
design integration project and define the default menu style.
10.3.3 Buttons
X-Cart has several button types: menu buttons (for example, Your account menu), general buttons (such as Add to wish list), main buttons (usually
used for Add to cart and Checkout buttons and are more prominent than the general buttons) and light buttons (used for service purposes, for
example, for Clear cart and Update buttons on the cart page). Your design must specify the look of the buttons. The buttons shown on key
mockups will be sufficient to reflect the specified style in all the other X-Cart buttons.
10.3.4 Text labels
X-Cart supports multiple languages. All the text in the interface is specified either with the help of text labels (which can be modified by the store admin)
or database content which is entered using special forms of X-Cart admin area. That is why it is not recommended to use images for titles. Besides,
displaying text as an image is not SEO-friendly.
10.3.5 Fonts
It is recommended to use standard fonts which are supported by all operating systems: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
Actually it's possible to integrate a non-standard font with a web-site, but all the ways to do so have certain limitations. That is why we recommend to
refrain from using non-standard fonts in dynamic sections of your site.
10.3.6 Layout
In addition please note that X-Cart has dynamic content, which means that the design must be flexible enough to allow to increase content without
breaking the layout. Please specify which layout type you want to integrate: stretching or fixed.
10.3.7 Usability
Modern design tends to be light and simple. First, integrating a simple design will cost you less (this is also important for possible upgrades), and
second, a site which is not overloaded with graphics, loads quicker. It is also recommended to follow the basic usability rules. The main goal of usability
expertise is to make your Web site easier to use. This will enhance the credibility of your brand and attract more users. The text of main links and
content must be easily read, the contrast between text and background must be 75-80%, headings must differ from the main text, etc.
10.4 Useful usability links:

1. Jakob Nielsen's Website
2. http://www.webmascon.com
3. Apple Human Interface Guidelines
4. Official Guidelines for User Interface Developers and Designers
We hope that this article has been helpful. If you have any questions please feel free to contact us. We look forward to hearing from you.
46

X-Cart Customizing The Look and Feel

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

X-Cart Customizing The Look and Feel

Hochgeladen von

Copyright:

Verfügbare Formate

Table of Contents

1 X-Cart:Storefront Design and Layout..............................................................................................................................................................................1

3 X-Cart:Editing Skin Files...................................................................................................................................................................................................4

4 X-Cart:Customizing Text Labels....................................................................................................................................................................................16

8 X-Cart:404 Error Page.....................................................................................................................................................................................................37

9 X-Cart:Adding Facebook Like button to your X-Cart store..........................................................................................................................................40

10 X-Cart:Design specification guidelines.......................................................................................................................................................................43

1.1 Video tutorial #1

1.2 Video tutorial #2

2.1 Selecting skin to use

1. Sign in to X-Cart Admin area.

4. Click Save at the bottom of the page.

X-Cart 4.3or above

2.2 Before re-installing skins

2.3 To reinstall skins via the X-Cart Installation wizard

2.4 To reinstall skins manually

W3C HTML start page: http://www.w3c.org/MarkUp/

W3C Cascading Style Sheets homepage: http://www.w3.org/Style/CSS/

3.2 Managing Skin Files

3.3.1 Templates stored in the directory skin/common_files

X-Cart 4.4or above

product_thumbnail.tpl - controls the thumbnail of a product.

3.3.2 Templates stored in the sub-directories of skin/common_files

X-Cart 4.4or above

skin/common_files/admin and skin/common_files/provider - templates for the store's admin area.

customer/home.tpl - master template for the customer area of the store.

customer/main/cart.tpl - controls the main shopping cart structure page.

Fast_Lane_Checkout/home.tpl - controls the structure of cart and checkout pages.

3.4 Overview of CSS Files

main.css - Main CSS file for the Customer area.

skin1_admin.css - Main CSS file for the Admin area.

CSS files for modules are the following:

3.5 Location of skin specific template and CSS files

3.6 Using X-Cart's Debugging Console

3.7 Using Webmaster Mode

5) After you set a new label content you can

Note: Note:Webmaster mode will not work with compiled templates.

3.8 Using X-Cart's Template Editor

3.9 Replacing X-Cart's Logo

To replace the logo:

Click the Save button for the changes to take effect.

#header .line1 .logo a:active

3.10 Customizing the breadcrumb trail

Customizing the first breadcrumb item

X-Cart 4.4or above

Home page :: Books :: Internet :: Designing Web Usability

Books :: Internet :: Designing Web Usability

Customizing the breadcrumb separator

X-Cart 4.3or above

Home page :: Books :: Internet :: Designing Web Usability

My Company Name :: Books :: Internet :: Designing Web Usability

X-Cart 4.0or above

3.11 See also

4.2 Managing Language Variables

4.2.1 Selecting a language for editing

To select the language to be edited:

1. On the 'Content' menu, select 'Languages' in your store's admin area.

4.2.2 Finding and viewing language variables

Here's how you can use the filter:

Countries - country names in the language you are currently editing

To find one or more language variables:

3. Click the Go button.

4.2.3 Editing language variables