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

Performance: CLS & Preload

This article explores the implementation of several key techniques in Cartzilla that enhance website loading performance and reduce Cumulative Layout Shift (CLS). These methods include preloading essential assets and effectively wrapping images and videos in Bootstrap's .ratio element to preserve aspect ratios.

Preloading assets

Preloading assets is a critical technique used to instruct the browser to download and cache key resources early in the page load process. This ensures that fonts, icons, styles, and other content are available immediately when needed, reducing load times and preventing layout shifts. Below are examples of how Cartzilla preloads web fonts and icon fonts:

<!-- Preloaded local web font (Inter) -->
<link rel="preload" href="assets/fonts/inter-variable-latin.woff2" as="font" type="font/woff2" crossorigin>

<!-- Font icons -->
<link rel="preload" href="assets/icons/cartzilla-icons.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="assets/icons/cartzilla-icons.min.css">

<!-- Theme styles -->
<link rel="preload" href="assets/css/theme.min.css" as="style">
<link rel="stylesheet" href="assets/css/theme.min.css">

By preloading these assets, Cartzilla ensures that text and icons render instantly when the rest of the content loads, enhancing the perceived speed of the site and improving the user experience.

Using the .ratio element

To further improve CLS, Cartzilla utilizes Bootstrap's .ratio utility class, which helps maintain the aspect ratio of images and videos. This technique prevents layout shifts that occur when media loads and expands into its designated space. Here are examples of how the .ratio element is used for predefined and custom aspect ratios:

<!-- Predefined ratio -->
<div class="ratio ratio-4x3">
  <img src="..." alt="...">

<!-- Custom ratio -->
<!-- Aspect ratio formula: imageHeight / imageWidth * 100% -->
<div class="ratio" style="--cz-aspect-ratio: calc(306 / 416 * 100%)">
  <img src="..." alt="...">

These examples show how the .ratio element can be used to ensure that the space for an image or video is reserved, regardless of whether the media has finished loading. This method significantly reduces CLS by stabilizing the layout as the rest of the page continues to load.

Top Customize