Cartzilla component

Shop filters

Filter widgets for the sidebar, allowing users to refine product listings based on various attributes like price, brand, size, etc.

Several filter components utilize third-party plugins for enhanced functionality:

The range slider is powered by the noUISlider plugin.
The search bar integrates with the List.js plugin.
The custom scrollbar is implemented using the SimpleBar plugin.

Ensure that you include the necessary references to the plugin's CSS and JavaScript files.

CSS files are linked in the <head> section and above theme.min.css reference in your document:

<link rel="stylesheet" href="assets/vendor/nouislider/dist/nouislider.min.css">
<link rel="stylesheet" href="assets/vendor/simplebar/dist/simplebar.min.css">

JavaScript files are linked before the closing </body> tag and above theme.min.js reference in your document:

<script src="assets/vendor/nouislider/dist/nouislider.min.js"></script>
<script src="assets/vendor/list.js/dist/list.min.js"></script>
<script src="assets/vendor/simplebar/dist/simplebar.min.js"></script>

Checkboxes

<!-- Collapsible list of checkbox based filter items with quick search and custom scrollbar -->
<div class="accordion">
  <div class="accordion-item border-0">
    <h4 class="accordion-header" id="headingBrands">
      <button type="button" class="accordion-button p-0 pb-3" data-bs-toggle="collapse" data-bs-target="#brands" aria-expanded="true" aria-controls="brands">
        Brands
      </button>
    </h4>
    <div class="accordion-collapse collapse show" id="brands" aria-labelledby="headingBrands">
      <div class="accordion-body p-0 pb-4" data-filter-list='{"searchClass": "brands-search", "listClass": "brands-list", "valueNames": ["form-check-label"]}'>
        <div class="position-relative mb-3">
          <i class="ci-search position-absolute top-50 start-0 translate-middle-y ms-3"></i>
          <input type="search" class="brands-search form-control form-icon-start" placeholder="Search">
        </div>
        <div style="height: 210px" data-simplebar data-simplebar-auto-hide="false">
          <div class="brands-list d-flex flex-column gap-2">
            <div class="form-check mb-0">
              <input type="checkbox" class="form-check-input" id="adidas" checked>
              <label for="adidas" class="form-check-label text-body-emphasis">
                Adidas<span class="fs-xs text-body-secondary ms-1">(425)</span>
              </label>
            </div>
            <div class="form-check mb-0">
              <input type="checkbox" class="form-check-input" id="taylor">
              <label for="taylor" class="form-check-label text-body-emphasis">
                Ann Taylor<span class="fs-xs text-body-secondary ms-1">(15)</span>
              </label>
            </div>
            <div class="form-check mb-0">
              <input type="checkbox" class="form-check-input" id="armani">
              <label for="armani" class="form-check-label text-body-emphasis">
                Armani<span class="fs-xs text-body-secondary ms-1">(18)</span>
              </label>
            </div>
            <div class="form-check mb-0">
              <input type="checkbox" class="form-check-input" id="banana">
              <label for="banana" class="form-check-label text-body-emphasis">
                Banana Republic<span class="fs-xs text-body-secondary ms-1">(103)</span>
              </label>
            </div>
            <div class="form-check mb-0">
              <input type="checkbox" class="form-check-input" id="bilabong" checked>
              <label for="bilabong" class="form-check-label text-body-emphasis">
                Bilabong<span class="fs-xs text-body-secondary ms-1">(27)</span>
              </label>
            </div>
            <div class="form-check mb-0">
              <input type="checkbox" class="form-check-input" id="birkenstock">
              <label for="birkenstock" class="form-check-label text-body-emphasis">
                Birkenstock<span class="fs-xs text-body-secondary ms-1">(10)</span>
              </label>
            </div>
            <div class="form-check mb-0">
              <input type="checkbox" class="form-check-input" id="klein">
              <label for="klein" class="form-check-label text-body-emphasis">
                Calvin Klein<span class="fs-xs text-body-secondary ms-1">(365)</span>
              </label>
            </div>
            <div class="form-check mb-0">
              <input type="checkbox" class="form-check-input" id="columbia">
              <label for="columbia" class="form-check-label text-body-emphasis">
                Columbia<span class="fs-xs text-body-secondary ms-1">(508)</span>
              </label>
            </div>
            <div class="form-check mb-0">
              <input type="checkbox" class="form-check-input" id="converse">
              <label for="converse" class="form-check-label text-body-emphasis">
                Converse<span class="fs-xs text-body-secondary ms-1">(176)</span>
              </label>
            </div>
            <div class="form-check mb-0">
              <input type="checkbox" class="form-check-input" id="dockers">
              <label for="dockers" class="form-check-label text-body-emphasis">
                Dockers<span class="fs-xs text-body-secondary ms-1">(54)</span>
              </label>
            </div>
            <div class="form-check mb-0">
              <input type="checkbox" class="form-check-input" id="fruit">
              <label for="fruit" class="form-check-label text-body-emphasis">
                Fruit of the Loom<span class="fs-xs text-body-secondary ms-1">(739)</span>
              </label>
            </div>
            <div class="form-check mb-0">
              <input type="checkbox" class="form-check-input" id="hanes">
              <label for="hanes" class="form-check-label text-body-emphasis">
                Hanes<span class="fs-xs text-body-secondary ms-1">(92)</span>
              </label>
            </div>
            <div class="form-check mb-0">
              <input type="checkbox" class="form-check-input" id="choo">
              <label for="choo" class="form-check-label text-body-emphasis">
                Jimmy Choo<span class="fs-xs text-body-secondary ms-1">(17)</span>
              </label>
            </div>
            <div class="form-check mb-0">
              <input type="checkbox" class="form-check-input" id="levis">
              <label for="levis" class="form-check-label text-body-emphasis">
                Levi's<span class="fs-xs text-body-secondary ms-1">(361)</span>
              </label>
            </div>
            <div class="form-check mb-0">
              <input type="checkbox" class="form-check-input" id="wearhouse">
              <label for="wearhouse" class="form-check-label text-body-emphasis">
                Men's Wearhouse<span class="fs-xs text-body-secondary ms-1">(75)</span>
              </label>
            </div>
            <div class="form-check mb-0">
              <input type="checkbox" class="form-check-input" id="newbalance">
              <label for="newbalance" class="form-check-label text-body-emphasis">
                New Balance<span class="fs-xs text-body-secondary ms-1">(218)</span>
              </label>
            </div>
            <div class="form-check mb-0">
              <input type="checkbox" class="form-check-input" id="nike">
              <label for="nike" class="form-check-label text-body-emphasis">
                Nike<span class="fs-xs text-body-secondary ms-1">(810)</span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Button toggles

<!-- Collapsible list of color filters based on "btn-check" and "btn-color" -->
<div class="accordion">
  <div class="accordion-item border-0">
    <h4 class="accordion-header" id="headingColor">
      <button type="button" class="accordion-button p-0 pb-3" data-bs-toggle="collapse" data-bs-target="#color" aria-expanded="true" aria-controls="color">
        Color
      </button>
    </h4>
    <div class="accordion-collapse collapse show" id="color" aria-labelledby="headingColor">
      <div class="accordion-body p-0 pb-4">
        <div class="d-flex flex-column gap-2">
          <div class="d-flex align-items-center mb-1">
            <input type="checkbox" class="btn-check" id="green" checked>
            <label for="green" class="btn btn-color fs-xl" style="color: #8bc4ab"></label>
            <label for="green" class="fs-sm ms-2">Green</label>
          </div>
          <div class="d-flex align-items-center mb-1">
            <input type="checkbox" class="btn-check" id="red">
            <label for="red" class="btn btn-color fs-xl" style="color: #ee7976"></label>
            <label for="red" class="fs-sm ms-2">Coral red</label>
          </div>
          <div class="d-flex align-items-center mb-1">
            <input type="checkbox" class="btn-check" id="pink">
            <label for="pink" class="btn btn-color fs-xl" style="color: #df8fbf"></label>
            <label for="pink" class="fs-sm ms-2">Pink</label>
          </div>
          <div class="d-flex align-items-center mb-1">
            <input type="checkbox" class="btn-check" id="blue">
            <label for="blue" class="btn btn-color fs-xl" style="color: #9acbf1"></label>
            <label for="blue" class="fs-sm ms-2">Sky blue</label>
          </div>
          <div class="d-flex align-items-center mb-1">
            <input type="checkbox" class="btn-check" id="black">
            <label for="black" class="btn btn-color fs-xl" style="color: #364254"></label>
            <label for="black" class="fs-sm ms-2">Black</label>
          </div>
          <div class="d-flex align-items-center mb-1">
            <input type="checkbox" class="btn-check" id="white">
            <label for="white" class="btn btn-color fs-xl" style="color: #e0e5eb"></label>
            <label for="white" class="fs-sm ms-2">White</label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Collapsible list of size filters based on "btn-check" -->
<div class="accordion">
  <div class="accordion-item border-0">
    <h4 class="accordion-header" id="headingSize">
      <button type="button" class="accordion-button p-0 pb-3" data-bs-toggle="collapse" data-bs-target="#size" aria-expanded="true" aria-controls="size">
        Size
      </button>
    </h4>
    <div class="accordion-collapse collapse show" id="size" aria-labelledby="headingSize">
      <div class="accordion-body p-0 pb-4">
        <div class="d-flex flex-wrap gap-2">
          <input type="checkbox" class="btn-check" id="size-xxs" checked>
          <label for="size-xxs" class="btn btn-sm btn-outline-secondary">XXS</label>
          <input type="checkbox" class="btn-check" id="size-xs">
          <label for="size-xs" class="btn btn-sm btn-outline-secondary">XS</label>
          <input type="checkbox" class="btn-check" id="size-s">
          <label for="size-s" class="btn btn-sm btn-outline-secondary">S</label>
          <input type="checkbox" class="btn-check" id="size-m">
          <label for="size-m" class="btn btn-sm btn-outline-secondary">M</label>
          <input type="checkbox" class="btn-check" id="size-l">
          <label for="size-l" class="btn btn-sm btn-outline-secondary">L</label>
          <input type="checkbox" class="btn-check" id="size-xl">
          <label for="size-xl" class="btn btn-sm btn-outline-secondary"><span class="mx-n1">XL</span></label>
          <input type="checkbox" class="btn-check" id="size-2xl">
          <label for="size-2xl" class="btn btn-sm btn-outline-secondary">2XL</label>
          <input type="checkbox" class="btn-check" id="size-40">
          <label for="size-40" class="btn btn-sm btn-outline-secondary">40</label>
          <input type="checkbox" class="btn-check" id="size-42">
          <label for="size-42" class="btn btn-sm btn-outline-secondary">42</label>
          <input type="checkbox" class="btn-check" id="size-44">
          <label for="size-44" class="btn btn-sm btn-outline-secondary">44</label>
          <input type="checkbox" class="btn-check" id="size-45">
          <label for="size-45" class="btn btn-sm btn-outline-secondary">45</label>
          <input type="checkbox" class="btn-check" id="size-46">
          <label for="size-46" class="btn btn-sm btn-outline-secondary">46</label>
          <input type="checkbox" class="btn-check" id="size-48">
          <label for="size-48" class="btn btn-sm btn-outline-secondary">48</label>
          <input type="checkbox" class="btn-check" id="size-50">
          <label for="size-50" class="btn btn-sm btn-outline-secondary">50</label>
          <input type="checkbox" class="btn-check" id="size-52">
          <label for="size-52" class="btn btn-sm btn-outline-secondary">52</label>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Collapsible list of links with custom scrollbar -->
<div class="accordion">
  <div class="accordion-item border-0">
    <h4 class="accordion-header" id="headingCategories">
      <button type="button" class="accordion-button p-0 pb-3" data-bs-toggle="collapse" data-bs-target="#categories" aria-expanded="true" aria-controls="categories">
        Categories
      </button>
    </h4>
    <div class="accordion-collapse collapse show" id="categories" aria-labelledby="headingCategories">
      <div class="accordion-body p-0 pb-4">
        <div style="height: 190px" data-simplebar data-simplebar-auto-hide="false">
          <ul class="list-unstyled d-block m-0 mt-n2">
            <li class="nav d-block pt-2 mt-1">
              <a class="nav-link animate-underline fw-normal p-0 pe-4" href="#!">
                <span class="animate-target text-truncate me-3">Smartphones</span>
                <span class="text-body-secondary fs-xs ms-auto">218</span>
              </a>
            </li>
            <li class="nav d-block pt-2 mt-1">
              <a class="nav-link animate-underline fw-normal p-0 pe-4" href="#!">
                <span class="animate-target text-truncate me-3">Accessories</span>
                <span class="text-body-secondary fs-xs ms-auto">372</span>
              </a>
            </li>
            <li class="nav d-block pt-2 mt-1">
              <a class="nav-link animate-underline fw-normal p-0 pe-4" href="#!">
                <span class="animate-target text-truncate me-3">Tablets</span>
                <span class="text-body-secondary fs-xs ms-auto">110</span>
              </a>
            </li>
            <li class="nav d-block pt-2 mt-1">
              <a class="nav-link animate-underline fw-normal p-0 pe-4" href="#!">
                <span class="animate-target text-truncate me-3">Wearable Electronics</span>
                <span class="text-body-secondary fs-xs ms-auto">142</span>
              </a>
            </li>
            <li class="nav d-block pt-2 mt-1">
              <a class="nav-link animate-underline fw-normal p-0 pe-4" href="#!">
                <span class="animate-target text-truncate me-3">Computers & Laptops</span>
                <span class="text-body-secondary fs-xs ms-auto">205</span>
              </a>
            </li>
            <li class="nav d-block pt-2 mt-1">
              <a class="nav-link animate-underline fw-normal p-0 pe-4" href="#!">
                <span class="animate-target text-truncate me-3">Cameras, Photo & Video</span>
                <span class="text-body-secondary fs-xs ms-auto">78</span>
              </a>
            </li>
            <li class="nav d-block pt-2 mt-1">
              <a class="nav-link animate-underline fw-normal p-0 pe-4" href="#!">
                <span class="animate-target text-truncate me-3">TV, Video & Audio</span>
                <span class="text-body-secondary fs-xs ms-auto">97</span>
              </a>
            </li>
            <li class="nav d-block pt-2 mt-1">
              <a class="nav-link animate-underline fw-normal p-0 pe-4" href="#!">
                <span class="animate-target text-truncate me-3">Headphones</span>
                <span class="text-body-secondary fs-xs ms-auto">121</span>
              </a>
            </li>
            <li class="nav d-block pt-2 mt-1">
              <a class="nav-link animate-underline fw-normal p-0 pe-4" href="#!">
                <span class="animate-target text-truncate me-3">Video Games</span>
                <span class="text-body-secondary fs-xs ms-auto">89</span>
              </a>
            </li>
            <li class="nav d-block pt-2 mt-1">
              <a class="nav-link animate-underline fw-normal p-0 pe-4" href="#!">
                <span class="animate-target text-truncate me-3">Printers & Ink</span>
                <span class="text-body-secondary fs-xs ms-auto">116</span>
              </a>
            </li>
            <li class="nav d-block pt-2 mt-1">
              <a class="nav-link animate-underline fw-normal p-0 pe-4" href="#!">
                <span class="animate-target text-truncate me-3">Home music</span>
                <span class="text-body-secondary fs-xs ms-auto">154</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Range slider

<!-- Collapsible price range slider example -->
<div class="accordion">
  <div class="accordion-item border-0">
    <h4 class="accordion-header" id="headingPrice">
      <button type="button" class="accordion-button p-0 pb-3" data-bs-toggle="collapse" data-bs-target="#price" aria-expanded="true" aria-controls="price">
        Price
      </button>
    </h4>
    <div class="accordion-collapse collapse show" id="price" aria-labelledby="headingPrice">
      <div class="accordion-body p-0 pb-4">
        <div class="range-slider" data-range-slider='{"startMin": 40, "startMax": 150, "min": 0, "max": 200, "step": 1, "tooltipPrefix": "$"}' aria-labelledby="headingPrice">
          <div class="range-slider-ui"></div>
          <div class="d-flex align-items-center">
            <div class="position-relative w-50">
              <i class="ci-dollar-sign position-absolute top-50 start-0 translate-middle-y ms-3"></i>
              <input type="number" class="form-control form-icon-start" min="0" data-range-slider-min>
            </div>
            <i class="ci-minus text-body-emphasis mx-2"></i>
            <div class="position-relative w-50">
              <i class="ci-dollar-sign position-absolute top-50 start-0 translate-middle-y ms-3"></i>
              <input type="number" class="form-control form-icon-start" min="0"  data-range-slider-max>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Selected filters

Filter

<!-- Selected filters made of buttons  -->
<div class="d-flex align-items-center justify-content-between mb-3">
  <h4 class="h6 mb-0">Filter</h4>
  <button type="button" class="btn btn-sm btn-secondary bg-transparent border-0 text-decoration-underline p-0 ms-2">
    Clear all
  </button>
</div>
<div class="d-flex flex-wrap gap-2">
  <button type="button" class="btn btn-sm btn-secondary">
    <i class="ci-close fs-sm ms-n1 me-1"></i>
    Sale
  </button>
  <button type="button" class="btn btn-sm btn-secondary">
    <i class="ci-close fs-sm ms-n1 me-1"></i>
    Adidas
  </button>
  <button type="button" class="btn btn-sm btn-secondary">
    <i class="ci-close fs-sm ms-n1 me-1"></i>
    Bilabong
  </button>
  <button type="button" class="btn btn-sm btn-secondary">
    <i class="ci-close fs-sm ms-n1 me-1"></i>
    Size: XXS
  </button>
  <button type="button" class="btn btn-sm btn-secondary">
    <i class="ci-close fs-sm ms-n1 me-1"></i>
    $40 - $150
  </button>
</div>

Customize theme

Colors

Primary

Success

Warning

Danger

Info

Direction

RTL

Border width, px

Rounding, rem

Cartzilla