Customize theme

Colors
Primary
Success
Warning
Danger
Info
Direction
RTL

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

Installation

The Cartzilla template you are currently viewing is a Static HTML template built with Bootstrap 5, and it is NOT a WordPress theme.

Please do not attempt to install the Cartzilla files on WordPress, as this will not work.

Prerequisites

  • HTML / CSS / JS (required): These core web technologies are essential for using the template.
  • Bootstrap 5 (required): This framework is necessary for the template's design and functionality.
  • Sass / Scss (highly recommended): Utilizing SCSS variables for customizing the template is much easier than modifying plain CSS code directly. It allows for more streamlined style adjustments.
  • Npm (highly recommended): npm is a powerful package manager tailored for Node.js, enabling efficient management of project dependencies. This tool helps with installing, updating, and removing dependencies. Additionally, npm includes a feature called "npm scripts," which automates common tasks such as minification, compilation, unit testing, linting, etc.

Note: All necessary configuration files, such as package.json, are provided in the download package. For detailed information on each configuration file and its purpose, refer to the Configuration files section of our documentation.

Dev environment

Please note: The following steps are entirely optional. They are designed for advanced users who wish to leverage a professional-grade front-end toolset included with Cartzilla to accelerate the development process. If you are not familiar with these tools or do not have time to explore them, you can continue to customize Cartzilla using plain HTML, CSS, and JS. In this case, feel free to skip this and next sections. Happy coding! 😉

Cartzilla is built using modern web development toolset.

Bootstrap Official website
Bootstrap 5 is the latest iteration of the world's most popular HTML, CSS, and JS framework. Cartzilla extends Bootstrap with a variety of its own plugins and components, enriching the core framework to provide enhanced functionality and design options.
Sass (Syntactically Awesome Style Sheets) Official website
Sass is a scripting language that is either interpreted or compiled into Cascading Style Sheets (CSS). Recognized as the most mature, stable, and powerful CSS extension language globally, Sass enables the use of variables, mixins, functions, and more to streamline CSS development.
W3C Valid HTML Official website
The code follows W3C standards for HTML, ensuring that it meets the guidelines established by the World Wide Web Consortium for accessibility, functionality, and compatibility across different browsers and devices.
Future-proof JavaScript Official website
Cartzilla's core scripts and all dependencies are meticulously crafted using vanilla JavaScript (ES6 modules) to ensure optimal performance and broad compatibility across various platforms.
Npm (Node.js) Official website
Npm is the default package manager for the Node.js environment. It offers robust package management capabilities and includes a powerful feature known as "Npm scripts." These scripts facilitate repetitive tasks such as minification, compilation, unit testing, and linting. The Silicon build system uses a series of JavaScript files, each designated for specific tasks, and associated Npm scripts to execute these tasks.

Text editor or CLI

You can use any text editor and command line tool available to you, such as Command Prompt for Windows or Terminal for macOS. Our personal preference is Visual Studio Code. It is a free editor that includes a built-in terminal (console), an integrated Git client, debugging capabilities, a vast library of extensions, and it is available for macOS, Windows, and Linux.

We highly recommend installing the VS Code Prettier plugin and setting it as your default formatter for JavaScript. Enable the "format code on save" option to automatically beautify your code each time you save a file, enhancing readability and consistency.

Installing Node.js, npm and dependencies

To set up the Cartzilla development environment, you will need to install Node.js and its package manager, npm. Node.js is completely free and can be downloaded from its official website for macOS, Windows, and Linux systems. You can download Node.js and npm from this link.

For more information about the Node Package Manager and the packages available, please visit npm's official website.

Installing necessary packages for Cartzilla development

Once Node.js and npm are installed, you're ready to install all the dependencies required for developing with Cartzilla.

Open your command line tool and type the following command:

npm install

This command initiates the installation of all dependencies listed in the Cartzilla/package.json file. Please wait until the installation process is complete before proceeding to the next section, Npm commands (scripts).

Top Customize