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

Changelog

v3.0.0 - May 20, 2024

  • New
    Redesigned Cartzilla: Introduced a completely new design system, page templates, and components (UI Kit). Cartzilla has been rebuilt from scratch to enhance visual appeal and technical performance. Update highlights:
    • Electronics Store Demo
    • Fashion Store Demo
    • Furniture Store Demo
    • Grocery Store Demo
    • Multiple Shop Layout Options
    • Multiple Product Page Variations
    • 2 Variants of Order Workflow: Cart + Checkout
    • Shop Customer Account Pages
    • Help Center / Support Pages
    • Multiple Blog (News) Page Layouts
    • Secondary and Specialty Pages: About, Contacts, 404, etc.
    • 60+ Flexible Components (UI Kit)
    • Support for Light and Dark Modes
    • Progressive Web App (PWA) Ready: The template is now PWA-ready, allowing it to be installed on any device for a native app-like experience directly from the browser.
    • Caching and Offline Support
    • Right-to-Left (RTL) Support
  • New
    Build System: We've transitioned from Gulp to Npm scripts for a more streamlined and efficient build process. The new Cartzilla build system, located in the build folder, features a series of JavaScript files, each dedicated to specific tasks. These are executed through Npm scripts, integrating following development features:
    • SCSS to CSS Compilation: Converts SCSS files into optimized CSS, complete with automatic autoprefixing to ensure styles work across all modern browsers.
    • JavaScript Bundling and Minification: Reduces JS file size and combines files for optimal performance.
    • Icon Font Generation: The build system includes a process for converting SVG icon files into a custom icon font. This allows for easy integration of scalable icons throughout the application, ensuring consistency and reducing the load times associated with multiple image files.
    • Style Linting: Ensures CSS code adheres to Bootstrap's coding standards.
    • JavaScript Linting and Formatting: Keeps JavaScript code clean and consistent.
    • HTML Markup Validation: Checks HTML for errors and compliance to standards.
    • Local Server with Hot Reloads: Enables real-time preview and updates without manual refresh.
    • RTL Styles Generation: Automatically generates right-to-left (RTL) stylesheets.
    • Production and Deployment: A complex script that prepares and optimizes assets for deployment.
    • Main Config File: The build system is designed with a centralized configuration approach. All source and output paths, along with file names, can be easily managed through a single configuration file, simplifying adjustments and scalability.
  • New Well-structured and detailed documentation that guides the user through every aspect of the template.
  • New
    Demo Site Customizer: Introduced a Customizer tool on the demo site that allows template appearance adjustments in real-time. Features of the Customizer include:
    • Color Customization: Users can modify brand colors including Primary, Warning, Info, Success, and Danger.
    • Text Direction: Allows switching between left-to-right (LTR) and right-to-left (RTL) text directions.
    • Border Customization: Users can change border width and rounding to suit their design needs.
    • Style Export: The Customizer enables users to copy generated styles to the clipboard for easy application to websites built with the Cartzilla theme.
  • Removed Pug Templates: Transitioned from Pug templates to well-structured vanilla HTML templates.

v2.5.1 - January 9, 2023

  • Updated Upgraded all plugins and libraries to their latest versions, including updating Bootstrap to v5.2.3
  • Fixed Improved compatibility with the latest version of the LightGallery plugin in the product-gallery.js file to ensure correct functionality.
  • Fixed Corrected paths to the necessary LightGallery files in the following pages: home-electronics-store.html, shop-single-v1.html, and shop-single-v2.html.

v2.5.0 - October 28, 2022

  • Updated Integrated CSS variables to enable global customization of Primary and Accent colors. Adjust these colors site-wide simply by modifying the corresponding CSS variables.
  • Updated Upgraded all plugins and libraries to their latest versions, including updating Bootstrap to v5.2.2
  • Fixed Gallery component to function correctly with the latest version of the lightGallery plugin. A valid plugin license key has been included
  • Fixed Minor bug fixes and documentation typos

v2.4.0 - January 31, 2022

  • New
    NFT Marketplace demo:
    • Front Page (Homepage)
    • Catalog v.1
    • Catalog v.2
    • Single Item - Auction Live
    • Single Item - Auction Ended
    • Single Item - Buy Now
    • Vedor Page
    • Connect Wallet
    • Create New Item
    • Account - Profile Settings
    • Account - My Items
    • Account - My Collections
    • Account - Favorites
    • Account - Notifications
  • Updated Upgraded all plugins and libraries to their latest versions, including updating Bootstrap to v5.1.3
  • Updated Range Slider Component: Enhanced to accept a new data-currency attribute, allowing customization of the currency symbol inside tooltips, replacing the default '$'.

v2.3.0 - August 18, 2021

  • New Added a new documentation page detailing the Loading Placeholders component.
  • New Added a new Navbar Offcanvas example.
  • Updated Upgraded all plugins and libraries to their latest versions, including updating Bootstrap to v5.1.0
  • Updated Revised the mobile menu behavior for improved usability. All 2nd-level sub-menus are now hidden by default and will only expand upon parent item click. Added data-bs-autohide="outside" to 1st-level dropdowns to prevent them from auto-closing when child dropdowns expand. Removed CSS rules that previously displayed 2nd-level dropdowns by default on mobile. Changes affect _navbar.scss, menu-primary.pug, menu-primary-dark.pug, menu-departments-electronics.pug, and all compiled .html files.

v2.2.0 - July 28, 2021

  • New Added WhatsApp social button.
  • Updated Cartzilla icon font: Added 2 new icons: WhatsApp and Rupee.
  • Updated Upgraded Node.js to the latest version 16.x. Transitioned from the deprecated node-sass to dart-sass for better performance and future compatibility. Also, replaced all instances of division (/) with multiplication (*) in SCSS code to comply with new SCSS standards.
  • Updated Upgraded all plugins and libraries to their latest versions, including updating Bootstrap to v5.0.2
  • Updated Enhanced the README.md file to include basic installation instructions, providing a straightforward guide for new users to set up the project.

v2.1.0 - May 17, 2021

  • New Added a new Offcanvas Component page to the documentation
  • New Sticky Footer: Implemented a sticky footer feature to ensure the footer remains at the bottom of the page, even when there is minimal content.
  • Updated Bootstrap to the latest version 5.0.1
  • Updated All plugins and dependencies to the latest versions
  • Updated Cartzilla icon font: Added 2 new brand icons: Discord and TikTok.
  • Fixed Resolved a compatibility problem involving the new Bootstrap Offcanvas component. Please note the changes in class names: what was previously referred to as offcanvas-cap used for both header and footer is now designated as offcanvas-header and offcanvas-footer.
  • Fixed Resolved an issue with the hover state of gallery items on Safari for macOS.

v2.0.0 - February 10, 2021

  • New
    Rebuilt Cartzilla Core: Now fully supports Bootstrap v5.0.0-beta1
    • Removed dependencyon jQuery: Completely redesigned Cartzilla's JavaScript to be modular, utilizing ES6 modules, and made it library-agnostic.
    • Updated class names to align with Bootstrap 5 naming conventions.
    • Rewrote Cartzilla's utility classes to be compatible with the new Bootstrap 5 Utility API.
    • No longer supports IE <=11.
  • New Introduced a new offcanvas component that replaces the previous version, offering improved functionality.
  • New Product Bundle component
  • Updated Introduced support for new dark dropdowns, allowing for a fully dark navbar option.
  • Updated All plugins and dependencies to the latest versions
  • Updated Cartzilla icon font: Added new icons, including half-star, filled thumb up/down, and more, to expand the range of design icons available for use throughout the interface.
  • Updated Enhanced the Like/Dislike buttons to include an active (filled) state, improving visual feedback for user interactions.
  • Updated Added support for half-star ratings in the product rating Pug mixin. It's now possible to display fractional stars, such as 3.5 stars, using +star-rating(3.5).
  • Updated All plugins and dependencies to the latest versions
  • Updated Documentation
  • Removed Due to compatibility issues with Bootstrap 5, the navbar-floating (transparent navigation bar) has been removed from the project.
  • Fixed Minor bug fixes and improvements

v1.4.0 - July 13, 2020

  • New
    Food Delivery Service demo:
    • Front Page (Homepage)
    • Category Page
    • Single Item (Restaurant) Page
    • Cart (Your Order)
    • Checkout (Address & Payment)
  • New Single Post no Sidebar page template
  • Updated Bootstrap to the latest stable version 4.5.0
  • Updated All plugins, npm modules and dependencies to the latest versions
  • Updated Added new icons to Cartzilla icon font.
  • Updated Sketch file: Added new demo page design mockups.
  • Updated Node modules to the latest versions
  • Updated Changed the CSS class name of the transparent navigation bar from navbar-transparent to navbar-floating for clearer naming. Also updated the stickyNavbar() function in theme.js to reflect this change.
  • Updated Refactored ajaxifySubscribeForm() in theme.js: Rewrote the function from jQuery to vanilla JavaScript for improved performance and reduced dependencies.
  • Updated Redesigned Pug Template Structure: Moved navbar and footer partials from layout.pug to individual page templates, utilizing the block keyword for template inheritance. This adjustment speeds up the compilation process by 1.5 times when modifications are made to the navbar or footer partials. Additionally, this change offers increased flexibility for customizing navigation bars and footers on specific pages.
  • Updated package.json and gulpfile.js: Enhanced project setup by automating the installation of all 3rd party plugins and libraries. Now, when you run the npm install command, these dependencies are automatically installed and then moved from node_modules to the dist folder by Gulp during project initialization. This streamlines the setup process and ensures a cleaner project structure.
  • Updated Documentation for Getting Started and Components: Enhanced code examples for components and updated sections covering Navbar, Page Title, and Footer Variants (Pug format). Added a new section on Installing Vendor Plugins using npm and Gulp to streamline dependency management and project setup.
  • Updated Sketch file: Added new Food Delivery Service demo frontpage mockup.
  • Fixed Minor bug fixes and improvements

v1.3.0 - February 29, 2020

  • New
    Grocery Store demo:
    • Front Page (Homepage)
    • Product Catalog Page
    • Single Product Page
    • Checkout Page Template
  • New Single Product / Brand Store demo
  • New Navbar with Side Menu: Introduced a new navigation bar that includes a side menu for enhanced user navigation. Check out the live example on the Grocery Store Demo page.
  • New Transparent Navbar Version: Introduced a new version of the navigation bar with a transparent design. View the live example on the Single Product/Brand Store Demo page.
  • New Navigation Bars (Headers): Enhanced the action buttons with tooltips to provide additional information on hover. Also introduced a separate wishlist button to accommodate scenarios where the wishlist feature is accessible to both registered and unregistered users.
  • New JavaScript Code: Radio buttons now function like tabs, allowing for content switching. See this behavior in action in the 'Choose Your Style' section on the Single Product/Brand Demo page.
  • New Added an empty state for the Cart dropdown to improve user experience when the cart is empty. See the live example on the Single Product/Brand Demo page.
  • Updated Masonry Grid Layouts: Replaced Salvattore.js with Shuffle.js and imagesLoaded.js for enhanced performance and reliability in masonry grid layouts, particularly in the Blog Grid sections.
  • Updated Color Presets radio buttons now dynamically change labels using JavaScript. See this feature in action on the Shop Single Product pages versions 1 and 2.
  • Updated Added new icons to Cartzilla icon font.
  • Updated Sketch file: Added new demo page design mockups.
  • Updated Node modules to the latest versions
  • Fixed Security patch: Added rel="noopener" to all links with target="_blank" attribute.
  • Fixed Handheld Toolbar Styles: Removed the default bottom padding equal to the toolbar's height from the body. You can now add bottom padding by applying the toolbar-enabled CSS class to the body. In Pug, this is applied automatically if var isToolbar = true is added to a specific page template or globally enabled via templates/helpers/config.pug. This change allows you to remove the bottom padding from the body without modifying core theme styles if the Handheld Toolbar is not needed.
  • Fixed SCSS maps in the theme's _variables.scss file. Special thanks to Kevin Ramharak for suggesting this fix.

v1.2.0 - December 20, 2019

  • New Added a new Toolbar for handheld devices that is fixed to the bottom of the screen, similar to iOS. It includes all important buttons like Menu, Cart, Wishlist, and Sidebar toggles to improve the user experience on mobile devices.
  • New Added a .gitignore file to the download package to specify which files or patterns should be ignored by git. Ensure that visibility for hidden files is enabled on your system to view and modify this file.
  • Updated Navigation Bars (Headers): Enhanced the action buttons with tooltips to provide additional information on hover. Also introduced a separate wishlist button to accommodate scenarios where the wishlist feature is accessible to both registered and unregistered users.
  • Updated 404 Error page templates
  • Updated JavaScript plugins to the latest versions
  • Updated Node modules to the latest versions
  • Fixed Documentation typos and wrong content
  • Fixed Minor bug fixes and improvements

v1.1.0 - November 30, 2019

  • New Digital Products Marketplace demo
  • New Marketplace Vendor / User Dashboard
  • New Electronics Store Homepage
  • New Single Product Page v2
  • New Product Comparison Page (Table)
  • New Navbar Versions for: Marketplace and Electronics Store
  • New Footer Version for: Marketplace
  • New Qucik View Popup v2 (for Electronics Store)
  • New 404 Error Page Template (Text variant)
  • New Charts component
  • New Countdown Timer component
  • New Product Card for Digital (Downloadable) Products
  • New Drag & Drop File Uploader. See updated Forms component page for more details.
  • Updated Bootstrap to the latest version 4.4.1
  • Updated Homepage Hero Slider: Added animations to slider text layers.
  • Updated Icon Font: Added new icons to the collection.
  • Updated _variables.scss: Added $path-to-fonts variable to streamline font management. Modify this variable in _user-variables.scss to easily customize the theme's font.
  • Updated Sketch file: Added new page mockups.
  • Updated Documentation and Components
  • Fixed Minor bug fixes and improvements

v1.0.0 - October 21, 2019

Initial release

Top Customize