Customize theme


Change text direction

To switch the text direction of your webpage from LTR to RTL, please consult the detailed instructions provided in the relevant section of our documentation.
Border width, px
Rounding, rem

To apply the provided styles to your webpage, enclose them within a <style> tag and insert this tag into the <head> section of your HTML document after the following link to the main stylesheet:
<link href="assets/css/theme.min.css">

Getting started

File structure


This is the root template folder that contains all project files.

Cartzilla / assets

This folder contains the compiled assets for the template, generated from the source files.

Cartzilla / assets / app-icons

This folder contains favicon images optimized for different browsers and platforms. These icons should be included in the <head> section of an HTML document.

Cartzilla / assets / css

This folder contains compiled CSS files. These include theme.css, theme.min.css, theme.rtl.css and theme.rtl.min.css, along with their corresponding map files.

Cartzilla / assets / fonts

This folder includes the Cartzilla local web font files in .woff2 format (Inter font).

Cartzilla / assets / icons

This folder contains the Cartzilla icons font file in .woff2 format and the corresponding .css file, which are generated from the SVG icon collection found in the src/icons directory.

Cartzilla / assets / img

This folder contains all the template's graphic assets, including images, illustrations, vector icons, etc. These assets are neatly organized within subfolders.

Cartzilla / assets / js

This folder contains compiled versions of theme.js and its minified counterpart, theme.min.js, along with their respective map files. Additionally, it includes the theme-switcher.js file, which handles switching between light and dark modes.

Cartzilla / assets / vendor

This folder includes the .js and .css files for all vendor plugins.

Cartzilla / src

This folder contains the source files, organized into subfolders.

Cartzilla / src / icons

This folder contains a collection of SVG icons, which are compiled into a font .woff2 and an associated .css file.

Cartzilla / src / js

This folder includes the primary theme.js file and a 'components' subfolder containing various modules. The theme.js file serves as the main JavaScript source, which is compiled (bundled) and optionally minified. This process generates two distinct files: assets/js/theme.js and assets/js/theme.min.js, along with their associated map files. The minified file, theme.min.js, is then linked to all .html documents within the project.

Cartzilla / src / scss

This folder contains all project .scss files, which are compiled and optionally minified into .css files within the assets/css folder. The resulting minified theme.min.css is then linked to all .html documents within the project.

Cartzilla / docs

This folder contains the documentation .html files that you are currently reading. Additionally, it includes a collection of component preview pages, each accompanied by corresponding code snippets.

Cartzilla / build

This folder contains JavaScript files that are executed by Node.js scripts within the build system. The config.js file allows you to configure your project paths (directory structure), as well as source and output file names.

Cartzilla / package.json

This file contains essential metadata about your app or module, including a list of dependencies that will be installed from the npm repository when you run the npm install command.

Cartzilla / manifest.json

This is a crucial configuration file for the Progressive Web App (PWA) features of your application. It specifies app metadata, settings, and behaviors recognized by browsers, such as the app name, icons, start URL, display settings, and permissions.

Cartzilla / service-worker.js

This file is integral to the Progressive Web App (PWA) capabilities of your application. It acts as a service worker, a type of web worker that intercepts and handles network requests, including dynamically managing caching of app resources. This script runs in the background, enabling offline support, faster resource loading, and other advanced functionality that enhances user experience.

Top Customize