Home :: Design and Layout :: Design changes


	Home \| Docs

Categories

Home - Design and Layout - Design changes
Design changes

Visual representation is generated by template files. All operational SP-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 SP-Cart installation. The directories of the installed color schemes, i.e. "basic", "default_blue", "aquarelle_red", etc. are placed in this directory.

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 CUSTOMER_SKIN_NAME is the name of the currently active template.

Storefront skin directory: SPCART_DIRECTORY/skins/SKIN_NAME/customer/

Storefront CSS files: SPCART_DIRECTORY/skins/SKIN_NAME/customer/styles.css
SPCART_DIRECTORY/skins/SKIN_NAME/customer/styles.base.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.

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.

Storefront basic template file: SPCART_DIRECTORY/skins/SKIN_NAME/customer/main.tpl

E-mail template directory: SPCART_DIRECTORY/skins/SKIN_NAME/mail/

E-mail invoice template: SPCART_DIRECTORY/skins/SKIN_NAME/mail/orders/invoice.tpl

Two ways to make changes

There are two ways to carry out design modifications in SP-Cart. The first way is to add the necessary modifications to a new file and 'hook' them into SP-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:

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 after the hook
product_info.post.tpl - if the changes must be added before 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 SP-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.

1.
2.
3.
4.
5.

{hook name="order_management:product_info"}
{if $cp.product_code}
<p>{$lang.sku}: {$cp.product_code}</p>
{/if}
{/hook}

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 SP-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 desing 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>>