Design Changes

We no longer maintain the Knowledge Base since version 4.3.x. All the latest user and developer documentation for 4.3.x and newer versions is now available at docs.cs-cart.com.

  • This article applies to CS-Cart versions:
  • 3.0.x

Visual representation is generated by template files. All operational CS-Cart Smarty templates are located in the skins directory (NOT in the var/skins_repository directory, where backup copies of templates are stored) of the CS-Cart installation. The directories of the installed color schemes, i.e. "basic", "default_blue", "aquarelle_red", etc. are placed in this directory.

A separate directory is created under the skins one for each installed skin, so design changes in one skin do not affect the look and feel of other skins.

All color schemes contain the directories customer and mail. The files of the customer directory are responsible for the storefront display, whereas the email directory has e-mail templates in it. In addition to these two directories, the basic skin has one more directory (the admin directory), which is responsible for the administration panel.

Templates related to the storefront are located in the skins/SKIN_NAME/customer directory, where SKIN_NAME is the name of the currently active template.

Storefront skin directory: CSCART_DIRECTORY/skins/SKIN_NAME/customer/
Storefront CSS files: CSCART_DIRECTORY/skins/SKIN_NAME/customer/styles.css
The file styles.base.css describes the styles of input and text areas, buttons, side boxes, tabs, etc. Thus, it is responsible for structural elemens of the storefront.
Storefront basic template file: CSCART_DIRECTORY/skins/SKIN_NAME/customer/index.tpl
E-mail template directory: CSCART_DIRECTORY/skins/SKIN_NAME/mail/
E-mail invoice template: CSCART_DIRECTORY/skins/SKIN_NAME/mail/orders/invoice.tpl

Two ways to make changes

There are two ways to carry out design modifications in CS-Cart. The first way is to add the necessary modifications to a new file and 'hook' them into CS-Cart, while the second one is to edit directly *.tpl and *.css files.

If possible, it is recommended that any modification is performed through hooks, as it will allow to avoid unnecessary conflicts when upgrading the store to a new version.
When you can make the changes using the hook functionality, namely if there is a hook in the template to modify, first you need to create the directory skins/SKIN_NAME/customer/addons/my_changes/hooks.

Let's assume you need to use the following hook:

{hook name="order_management:product_info"}
{if $cp.product_code}

Its name is order_management:product_info. So you will need to create the folder order_management in the skins/SKIN_NAME/customer/addons/my_changes/hooks directory and add a template with all the necessary changes to this newly created folder. The template will have the name:
product_info.pre.tpl — if the changes must be added before the hook
product_info.post.tpl — if the changes must be added after the hook
product_info.override.tpl — if the changes must override the hook block
After that it is necessary to make sure that the My changes addon is enabled in the CS-Cart admin panel, because only in this case the changes will be applied.
Check for the occurrence of the hook in other templates, as one and the same hook can be used in several templates.
Note that a template modified through a hook will not be replaced with the standard template when upgrading to the next version.

However, when it is required to edit *.tpl files, you can find out exactly what templates you need to modify by using the customization mode (enable the mode in Design->Design mode). Point the mouse at the  icon of the necessary area and all the templates responsible for this area will appear in a pop-up box. If you click on a template, it will be opened in a CS-Cart built-in template editor. Also in the editor you will see the template tree (if any) for the selected area.


Storefront design template scheme - gives the general idea of the storefront template scheme

Smarty debug console - explains what Smarty debug console is and what data it provides

Examples of design changes - most frequently asked design changes

HTML basics - gives general knowledge of main HTML tags

CSS basics - shows how you can improve content accessibility by using Cascading Style Sheets (CSS)

Smarty basics - provides basic information about Smarty, web template system written in PHP


<< Read previous Read next >>
Home / Docs / Design and Layout / Design Changes