LiteCommerce:Customizing storefront

Installing new skin

There are two ways to change the cart skin:

I. Type in your browser the following URL:

http:/www.your_domain.com/litecommerce_root_folder/install.php

There you'll see the option to re-install skin files. The reinstallation procedure will ask you for an auth_code. This code can be found in your 'config.php' file (litecommerce_root_folder/etc/config.php).

II. As an alternative, you can overwrite some templates in the "skins/" folder directly via ftp, ssh or site Cpanel.

In LC versions 2.1.0 and higher there are two skins stored in the following folders:

• New "2-columns" skin: litecommerce_root_dir/skins_original/default/en
• Classic "3-columns" skin: litecommerce_root_dir/schemas/templates/3-columns_classic/default/en

If you'd like to change one skin to another, you should copy and overwrite files in the cart "skins/" folder with the same files from the corresponding skin folder. In the following folder: litecommerce_root_dir/skins/default/en/ replace the following files:

litecommerce_root_dir/skins/default/en/buy_now.tpl
litecommerce_root_dir/skins/default/en/delete_profile.tpl
litecommerce_root_dir/skins/default/en/images.ini
litecommerce_root_dir/skins/default/en/main.tpl
litecommerce_root_dir/skins/default/en/register_form.tpl
litecommerce_root_dir/skins/default/en/search_products.tpl
litecommerce_root_dir/skins/default/en/style.css
litecommerce_root_dir/skins/default/en/checkout/checkout.tpl
litecommerce_root_dir/skins/default/en/checkout/details_dialog.tpl
litecommerce_root_dir/skins/default/en/common/button.tpl
litecommerce_root_dir/skins/default/en/common/dialog.tpl
litecommerce_root_dir/skins/default/en/common/sidebar_box.tpl
litecommerce_root_dir/skins/default/en/common/submit.tpl

with the same files from the "2-columns" or "3-columns" skin folder accordingly.

Note: If your store is alive it's highly recommended to create a backup copy of your shop (to have the possibility to restore it) and after that replace your cart skin.

Editing skin

Litecommerce allows admin to export set of skins as a set of HTML pages and edit them in some WYSIWYG editor such as FrontPage or DreamWeaver. As soon as modification process is over you can import html pages back into the LiteCommerce. As a result your store will get a unique custom design.

To export skins, follow the below instructions:

1. Enter your admin zone, go to the 'Import HTML design' section and click on the link called

'Prepare set of HTML pages for editing'.

1. After you do that, you'll get all Litecommerce skin templates exported as a set of html pages

to the following folder: litecommerce root dir/var/html/

1. Download the exported skins from the 'var/html/' folder to your local PC and modify it.

You can do the following modifications within your Litecommerce 'html pages':

• change any static graphic objects in the cart (for ex.: logo, sidebar icons );
• change any standard titles and notes;
• change the 'weight' and 'height' sizes;
• rename, modify and move sidebars;

Summarizing, you can modify all visual parameters of your cart. All modifications can be done only with help of the corresponding command of the wysiwyg editor.

NB: Each page in the HTML pages' set contains the following control tags:

Widget >-----------------

These lines show which templates are directly bound with the current one. Under these lines there is a short template content. It serves to simplify navigation through the 'html pages'. If you decide to modify some bound template page, you can use the "Click to edit..." link.

Edit area >-----------------

These lines contain the corresponding template visual part and you can see where on the page this content is exactly located. During the modifications please make sure you leave all 'control tags' unchanged. Otherwise you'll be unable to import your html set back to the cart.

To import the modified 'html pages' set back to the cart, follow the below instructions:

1. Upload the 'html pages' set to the 'var/html/' folder.
2. Enter your admin zone, go to the 'Import HTML design' section and click on the link called

'Import HTML design'.

1. After the import operation is completed we recommend you to clean up the cart cache using

the corresponding link in the admin area or by typing the following in your browser: http://www.your site name/litecommerce root folder/cleanup.php

FAQ

How to remove weight in the product options drop down list?

You should modify the '<litecommerce_root_dir>/skins/default/en/modules/ProductOptions/product_option_modifier.tpl' template.

In this template you should find and remove the following HTML tags:

<span IF="config.ProductOptions.absolute_weight_format">
Weight: {option.modifiedWeight(opt)} {config.General.weight_symbol}
</span>
<span IF="!config.ProductOptions.absolute_weight_format">
<span IF="opt.weight_percent">Weight: {opt.weight_modifier_sign}{opt.weight_modifier_abs}%
</span>
<span IF="opt.weight_absolute">Weight: {opt.weight_modifier_sign}{opt.weight_modifier_abs}
{config.General.weight_symbol}</span>
</span>