LiteCommerce:Customizing storefront

This article refers to LiteCommerce 2.x only. For user manual to LiteCommerce 3.x, please visit this website.

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>

How can I have all thumbnail images in my cart display in the needed size?

1) To resize thumbnails images on the category page you should modify the 'litecommerce_root_dir>/skins/default/en/category_products.tpl'

In this template you should find and edit the 'width' section value in the following part of code:

a href="cart.php?target=product&product_id={product.product_id}&category_id={category_id}" IF="product.hasThumbnail()">img src="{product.thumbnailURL:h}" border=0 width=70

NB: If there is the 'Showcase Organizer' module enabled in the admin area, Modules' section, you should modify the same part of code in other files.

• for the 'List' products list look: 'litecommerce_root_folder>/skins/default/en/modules/ShowcaseOrganizer/list.tpl'.

• for the 'Icons' products list look: 'litecommerce_root_folder/skins/default/en/modules/ShowcaseOrganizer/icons.tpl'.

2) To resize the thumbnail images in the 'Feature Products' section you should modify one the following templates:

• for the 'List' feature products look: 'litecommerce_root_folder>/skins/default/en/modules/FeaturedProducts/featuredProducts.tpl'

• for the 'Icons' feature products look: 'litecommerce_root_folder>/skins/default/en/modules/FeaturedProducts/featuredProducts_icons.tpl'

In these templates you should find and modify the 'width' section in the following part of code:

span IF="featuredProduct.product.hasThumbnail()">img src="{featuredProduct.product.thumbnailURL:h}" border="0" width="100">

Also you can add the 'height' section to this part of code if it's necessary.

3) To resize the thumbnail images on the 'Search result' page you should modify the: 'litecommerce_root_folder>/skins/default/en/search_result.tpl'

In this template you should find and edit the 'width' section value in the following part of code:

a href="cart.php?target=product&product_id={product.product_id}&substring={substring:u}"
IF="product.hasThumbnail()">img src="{product.thumbnailURL:h}" border=0 width=70

4) For modifying all those templates, you may use either ftp or the 'Template Editor' feature in the admin area (admin area -> Template Editor).

If I want to customise my store, how do I know which file to modify?

LiteCommerce has some kind of a "debug mode" feature, it's called the 'verbose mode'. If this mode is active, during LC work you can look through the "source code" of any LC page and see which templates uses on this page. If you'd like to use this feature, you should edit string in the 'your_LC_root_folder/etc/congig.php' file:

verbose = On

To turn this mode off, you should revert that string back to:

verbose = Off

Note: Before modifying the 'config.php' file you should first change its access permissions via site Cpanel or using the 'chmod' command in ftp or ssh terminal. After you have completed the file modifications, make sure you change the permissions back to the original ones.