Table of Contents
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 full HTML/CSS/JS control. 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 expeciting it to be fully functional.
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 we introduced LESS on top of CSS to better organize and gain control over your CSS. The css/ folder is a rendered result from compiling the .less files. If you edit a .less file you will need a LESS compiler to render new CSS files as browsers do not understand LESS.
Wikipedia has an article about the benefits of LESS.
How do I Compile LESS?
Our Github repository have a preconfigured LESS compiler based on Grunt for Node.js (See Gruntfile.js). If you don't work with development tools like Node.js and Grunt you can install the standalone web based LESS compiler provided in our Developer Kit. You are not recommend to use the web based LESS compiler in a production environment due to performance drain.
Can I Skip LESS and Just Use CSS Like Old Days?
Yes you can. If you don't intend to use a LESS compiler you can delete those .less and .css.map files. For your convenience you can uncompress/beautify the CSS content, making it human readable to the eye again, using an online tools e.g. CSS-Beautify-Minify. Beautifying will cause a slight performance decrease.
How Do I Know Which CSS/LESS File To Edit?
Right click an element and select Inspect Element. The built-in developer tools in your browser will show you the current stylings of an element and in which .less file and line 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 web based Developer Kit add-on does that for you as well.
