User Tools

Site Tools


how_to_change_the_look_of_your_store

How To Change The Look of Your Store

LiteCart has support for templates, meaning a set of individual files that gives that cosmetic look to your website. Using templates you can easily change the look of your website with a simple click. You can swap back and forth between different templates.

Templates are platform specific. Meaning you cannot take a template from another platform e.g. Wordpress and just copy it over.

Create a Custom Template

To change the look of your LiteCart store, first create your own template by cloning the includes/templates/default.catalog/ folder.

Why? Because when you upgrade to another version the default template will be overwritten.

All HTML is stored in the folders layouts/, pages/, and views/. If a component is missing, LiteCart will load it from the default template. We recommend only storing the files here that are actually different from the default template.

Do I Use LESS or CSS?

As of LiteCart 2.0, you are not supposed to edit the files in the css/ folder. The .css files are just a rendered styles for your web browser to interpret. Instead you should edit the files inside the less/ folder. But browsers do not understand LESS code. So whatever changes you make in less files you need to generate new css files. See the add-on Developer Kit which can do that for you.

Why Are You Using LESS If Browsers Don't Understand It

LESS simply makes the work with stylesheets easier and way more effective in the long run. Wikipedia has an article about the benefits of LESS.

If you don't want to work with LESS, you can uncompress the CSS files, turning them into a human readable content using online tools e.g. Unminify. And don't forget to remove those .map files.

How Do I Know Which File To Edit?

Right click an element and select Inspect Element. The built-in developer tools if your browser will show you the current stylings of an element and in which .less file and row number it can be found. This is translated by the browser using the .map files found in the css/ folder. The map files are simply cross references and are important to be updated when generating new .css files. The Developer Kit add-on does that for you as well.

how_to_change_the_look_of_your_store.txt · Last modified: 2017/11/18 07:55 by 81.232.117.86