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 your website. Using templates you can easily and change the look of your website with a simple click, and 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 default.catalog/ folder.
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 that are actually different from the default template.
Do I Use LESS or CSS?
When installing LiteCart you can choose between “.css” or “.less + .min.css”. This is simply just what you prefer.
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. LESS requires a compiler to generate .min.css files, because browsers do not understand the LESS format. A web compiler for LESS to CSS is available in the add-ons store, called Developer Kit.
If you don't want to work with LESS, you can simply select CSS when installing LiteCart.
How Do I Know Which LESS or CSS File To Edit?
- Press F12 to open the developer console window in your browser.
- Reload the page
- Right click an element and select Inspect Element.
The developer tools will show you the current stylings of an element and in which .css file (or .less) and line number it can be found.
Please note: If you are a “.less + .min.css” user. Browsers need a .map file for cross referencing a compiled .min.css back to the source .less file. For your best convenience, make sure your LESS to CSS compiler generates .map files.