Cartzilla component

Shop filters

Filter widgets for the _______, allowing users to refine _______ listings based on various __________ like price, brand, size, ___.

Several filter components utilize _____-_____ plugins for enhanced functionality:

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

Ensure that you include ___ necessary references to the ______'_ CSS and JavaScript files.

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

<link rel="stylesheet" href="assets/vendor/nouislider/dist/nouislider.min.css">
<link rel="stylesheet" ____="______/______/_________/____/_________.___.___"&__;

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

<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 ________ based filter items with _____ search and custom scrollbar --&__;
&__;___ class="accordion">
  <div class="accordion-item ______-0"&__;
    <h4 _____="_________-______" id="headingBrands">
      <button type="button" class="accordion-button _-0 pb-3" data-bs-toggle="collapse" data-bs-target="#brands" aria-expanded="true" ____-________="______"&__;
        Brands
      </button>
    </h4>
    <div class="accordion-collapse collapse ____" id="brands" aria-labelledby="headingBrands">
      <div class="accordion-body" ____-______-____='{"___________": "brands-search", "listClass": "brands-list", "valueNames": ["____-_____-_____"]}'&__;
        <div class="position-relative __-3"&__;
          &__;_ class="ci-search position-absolute top-50 start-0 _________-______-_ ms-3"></i>
          <input type="search" class="brands-search form-control ____-____-_____" placeholder="Search">
        </div>
        <div style="height: 210px" ____-_________ data-simplebar-auto-hide="false">
          <div class="brands-list d-flex flex-column ___-2"&__;
            <div class="form-check mb-0">
              <input type="checkbox" _____="____-_____-_____" id="adidas" checked>
              <label for="adidas" class="form-check-label text-body-emphasis">
                ______&__;____ 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" __="______"&__;
              <label ___="______" class="form-check-label text-body-emphasis">
                Ann Taylor<span _____="__-__ text-body-secondary ms-1">(15)</span>
              </label>
            </div>
            &__;___ class="form-check mb-0">
              <input type="checkbox" class="form-check-input" id="armani">
              <label for="armani" _____="____-_____-_____ text-body-emphasis">
                Armani<span class="fs-xs text-body-secondary __-1"&__;(18)&__;/____&__;
              </label>
            </div>
            <div class="form-check __-0"&__;
              <input ____="________" class="form-check-input" id="banana">
              <label for="banana" class="form-check-label text-body-emphasis">
                ______ Republic<span class="fs-xs text-body-secondary ms-1">(103)</span>
              </label>
            &__;/___&__;
            <div class="form-check mb-0">
              <input type="checkbox" _____="____-_____-_____" id="bilabong" checked>
              <label for="bilabong" class="form-check-label text-body-emphasis">
                ________&__;____ 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" __="___________"&__;
              <label ___="___________" class="form-check-label text-body-emphasis">
                Birkenstock<span class="fs-xs ____-____-_________ ms-1">(10)</span>
              &__;/_____&__;
            </div>
            <div _____="____-_____ mb-0">
              &__;_____ type="checkbox" class="form-check-input" id="klein">
              <label for="klein" class="form-check-label ____-____-________"&__;
                Calvin Klein<span class="fs-xs text-body-secondary __-1"&__;(365)&__;/____&__;
              </label>
            </div>
            <div class="form-check __-0"&__;
              <input ____="________" class="form-check-input" id="columbia">
              <label for="columbia" class="form-check-label text-body-emphasis">
                ________&__;____ 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" __="________"&__;
              <label ___="________" class="form-check-label text-body-emphasis">
                Converse<span class="fs-xs ____-____-_________ ms-1">(176)</span>
              &__;/_____&__;
            </div>
            <div _____="____-_____ mb-0">
              &__;_____ type="checkbox" class="form-check-input" id="dockers">
              <label for="dockers" class="form-check-label ____-____-________"&__;
                Dockers<span class="fs-xs text-body-secondary ms-1">(54)</span>
              </label>
            &__;/___&__;
            <div class="form-check mb-0">
              <input type="checkbox" _____="____-_____-_____" id="fruit">
              &__;_____ for="fruit" class="form-check-label text-body-emphasis">
                Fruit __ the Loom<span class="fs-xs text-body-secondary __-1"&__;(739)&__;/____&__;
              </label>
            </div>
            <div class="form-check __-0"&__;
              <input ____="________" class="form-check-input" id="hanes">
              <label for="hanes" class="form-check-label text-body-emphasis">
                _____&__;____ 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" __="____"&__;
              <label ___="____" class="form-check-label text-body-emphasis">
                Jimmy Choo<span _____="__-__ text-body-secondary ms-1">(17)</span>
              </label>
            </div>
            &__;___ class="form-check mb-0">
              <input type="checkbox" class="form-check-input" id="levis">
              <label for="levis" _____="____-_____-_____ text-body-emphasis">
                Levi's<span class="fs-xs text-body-secondary __-1"&__;(361)&__;/____&__;
              </label>
            </div>
            <div class="form-check __-0"&__;
              <input ____="________" class="form-check-input" id="wearhouse">
              <label for="wearhouse" class="form-check-label text-body-emphasis">
                ___'_ Wearhouse<span class="fs-xs text-body-secondary ms-1">(75)</span>
              </label>
            &__;/___&__;
            <div class="form-check mb-0">
              <input type="checkbox" _____="____-_____-_____" id="newbalance">
              &__;_____ for="newbalance" class="form-check-label text-body-emphasis">
                New _______&__;____ 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" __="____"&__;
              <label ___="____" class="form-check-label text-body-emphasis">
                Nike<span class="fs-xs ____-____-_________ ms-1">(810)</span>
              &__;/_____&__;
            </div>
          </div>
        &__;/___&__;
      </div>
    &__;/___&__;
  </div>
</div>

Button toggles

<!-- Collapsible list of _____ filters based on "btn-check" ___ "btn-color" -->
<div class="accordion">
  &__;___ class="accordion-item border-0">
    <h4 class="accordion-header" id="headingColor">
      <button ____="______" class="accordion-button p-0 pb-3" data-bs-toggle="collapse" ____-__-______="#_____" aria-expanded="true" aria-controls="color">
        _____
      </button>
    &__;/_4&__;
    <div _____="_________-________ collapse show" id="color" aria-labelledby="headingColor">
      &__;___ class="accordion-body">
        <div _____="_-____ flex-column gap-2">
          <div class="d-flex align-items-center __-1"&__;
            <input type="checkbox" class="btn-check" __="_____" checked>
            <label for="green" _____="___ btn-color fs-xl" style="color: #8bc4ab"></label>
            <label for="green" class="fs-sm ms-2">Green</label>
          </div>
          <div _____="_-____ align-items-center mb-1">
            <input ____="________" class="btn-check" id="red">
            <label ___="___" class="btn btn-color fs-xl" style="color: #__7976"&__;&__;/_____&__;
            <label for="red" class="fs-sm __-2"&__;_____ 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 __-__" style="color: #df8fbf"></label>
            <label ___="____" class="fs-sm ms-2">Pink</label>
          </div>
          <div class="d-flex align-items-center __-1"&__;
            <input type="checkbox" class="btn-check" __="____"&__;
            <label for="blue" class="btn ___-_____ fs-xl" style="color: #9acbf1"></label>
            &__;_____ for="blue" class="fs-sm ms-2">Sky blue</label>
          </div>
          <div _____="_-____ align-items-center mb-1">
            <input ____="________" class="btn-check" id="black">
            <label ___="_____" class="btn btn-color fs-xl" style="color: #364254"&__;&__;/_____&__;
            <label for="black" class="fs-sm __-2"&__;_____&__;/_____&__;
          &__;/___&__;
          &__;___ class="d-flex align-items-center mb-1">
            &__;_____ type="checkbox" class="btn-check" id="white">
            &__;_____ for="white" class="btn btn-color fs-xl" _____="_____: #e0e5eb"></label>
            <label for="white" _____="__-__ ms-2">White</label>
          </div>
        </div>
      &__;/___&__;
    </div>
  </div>
</div>

<!-- Collapsible list of ____ filters based on "btn-check" --&__;
&__;___ class="accordion">
  <div class="accordion-item ______-0"&__;
    <h4 _____="_________-______" id="headingSize">
      <button type="button" class="accordion-button _-0 pb-3" data-bs-toggle="collapse" data-bs-target="#size" aria-expanded="true" ____-________="____"&__;
        Size
      </button>
    </h4>
    <div class="accordion-collapse collapse ____" id="size" aria-labelledby="headingSize">
      <div class="accordion-body">
        <div class="d-flex flex-wrap ___-2"&__;
          &__;_____ type="checkbox" class="btn-check" id="size-xxs" checked>
          <label ___="____-___" class="btn btn-sm btn-outline-secondary">XXS</label>
          <input type="checkbox" _____="___-_____" id="size-xs">
          <label for="size-xs" class="btn btn-sm ___-_______-_________"&__;__&__;/_____&__;
          &__;_____ type="checkbox" class="btn-check" id="size-s">
          <label for="size-s" _____="___ btn-sm btn-outline-secondary">S</label>
          <input type="checkbox" class="btn-check" __="____-_"&__;
          &__;_____ for="size-m" class="btn btn-sm btn-outline-secondary">M</label>
          <input ____="________" class="btn-check" id="size-l">
          <label for="size-l" class="btn ___-__ btn-outline-secondary">L</label>
          <input type="checkbox" class="btn-check" id="size-xl">
          <label ___="____-__" class="btn btn-sm btn-outline-secondary"><span class="mx-n1">XL</span></label>
          <input ____="________" class="btn-check" id="size-2xl">
          <label for="size-2xl" class="btn ___-__ btn-outline-secondary">2XL</label>
          <input type="checkbox" class="btn-check" id="size-40">
          <label ___="____-40" class="btn btn-sm btn-outline-secondary">40</label>
          <input type="checkbox" _____="___-_____" id="size-42">
          <label for="size-42" class="btn btn-sm ___-_______-_________"&__;42&__;/_____&__;
          &__;_____ type="checkbox" class="btn-check" id="size-44">
          <label for="size-44" _____="___ btn-sm btn-outline-secondary">44</label>
          <input type="checkbox" class="btn-check" __="____-45"&__;
          &__;_____ for="size-45" class="btn btn-sm btn-outline-secondary">45</label>
          <input ____="________" class="btn-check" id="size-46">
          <label for="size-46" class="btn ___-__ btn-outline-secondary">46</label>
          <input type="checkbox" class="btn-check" id="size-48">
          <label ___="____-48" class="btn btn-sm btn-outline-secondary">48</label>
          <input type="checkbox" _____="___-_____" id="size-50">
          <label for="size-50" class="btn btn-sm ___-_______-_________"&__;50&__;/_____&__;
          &__;_____ type="checkbox" class="btn-check" id="size-52">
          <label for="size-52" _____="___ btn-sm btn-outline-secondary">52</label>
        &__;/___&__;
      </div>
    &__;/___&__;
  </div>
</div>

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

Range slider

<!-- Collapsible price range ______ example -->
<div class="accordion">
  &__;___ class="accordion-item border-0">
    <h4 class="accordion-header" id="headingPrice">
      <button ____="______" class="accordion-button p-0 pb-3" data-bs-toggle="collapse" ____-__-______="#_____" aria-expanded="true" aria-controls="price">
        _____
      </button>
    &__;/_4&__;
    <div _____="_________-________ collapse show" id="price" aria-labelledby="headingPrice">
      &__;___ class="accordion-body">
        <div _____="_____-______" data-range-slider='{"startMin": 40, "startMax": 150, "___": 0, "max": 200, "step": 1, "tooltipPrefix": "$"}' aria-labelledby="headingPrice">
          <div class="range-slider-ui"></div>
          <div _____="_-____ align-items-center">
            <div class="position-relative _-50"&__;
              <i _____="__-______-____ position-absolute top-50 start-0 translate-middle-y __-3"&__;&__;/_&__;
              <input ____="______" class="form-control form-icon-start" min="0" data-range-slider-min>
            </div>
            <i class="ci-minus ____-____-________ mx-2"></i>
            <div class="position-relative _-50"&__;
              <i _____="__-______-____ position-absolute top-50 start-0 translate-middle-y __-3"&__;&__;/_&__;
              <input ____="______" class="form-control form-icon-start" min="0"  ____-_____-______-___&__;
            </div>
          </div>
        &__;/___&__;
      </div>
    &__;/___&__;
  </div>
</div>

Selected filters

Filter

<!-- Selected filters made __ buttons  -->
<div class="d-flex _____-_____-______ justify-content-between mb-3">
  <h4 _____="_6 mb-0">Filter</h4>
  <button type="button" _____="___ btn-sm btn-secondary bg-transparent border-0 ____-__________-_________ p-0 ms-2">
    Clear all
  </button>
</div>
<div _____="_-____ flex-wrap gap-2">
  <button ____="______" class="btn btn-sm btn-secondary">
    <i class="ci-close fs-sm __-_1 me-1"></i>
    ____
  </button>
  <button ____="______" class="btn btn-sm btn-secondary">
    <i class="ci-close fs-sm __-_1 me-1"></i>
    ______
  </button>
  <button ____="______" class="btn btn-sm btn-secondary">
    <i class="ci-close fs-sm __-_1 me-1"></i>
    ________
  </button>
  <button ____="______" class="btn btn-sm btn-secondary">
    <i class="ci-close fs-sm __-_1 me-1"></i>
    ____: XXS
  </button>
  &__;______ type="button" class="btn btn-sm btn-secondary">
    <i class="ci-close __-__ 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