Cartzilla Buy now

Widgets

Collection of tiny components to use inside sidebar area or footer.

Cartzilla component

Categories

<!-- Widget: Categories -->
<div class="widget widget-categories">
  <h3 class="widget-title">Shop categories</h3>
  <div id="shop-categories" class="accordion">

    <!-- Category with search bar and scrollbar (more items) -->
    <div class="accordion-item">
      <h3 class="accordion-header">
        <a href="#clothing" class="accordion-button" role="button" data-bs-toggle="collapse" aria-expanded="true" aria-controls="clothing">
          Clothing
        </a>
      </h3>
      <div id="clothing" class="accordion-collapse collapse show" data-bs-parent="#shop-categories">
        <div class="accordion-body">
          <div class="widget widget-links widget-filter">

            <!-- Search -->
            <div class="input-group input-group-sm mb-2">
              <input type="text" class="widget-filter-search form-control rounded-end" placeholder="Search">
              <i class="ci-search position-absolute top-50 end-0 translate-middle-y fs-sm me-3"></i>
            </div>

            <!-- Sub-categories -->
            <ul class="widget-list widget-filter-list pt-1" style="height: 12rem;" data-simplebar data-simplebar-auto-hide="false">
              <li class="widget-list-item widget-filter-item">
                <a href="#" class="widget-list-link d-flex justify-content-between align-items-center">
                  <span class="widget-filter-item-text">View all</span>
                  <span class="fs-xs text-muted ms-3">2,548</span>
                </a>
              </li>
              <li class="widget-list-item widget-filter-item">
                <a href="#" class="widget-list-link d-flex justify-content-between align-items-center">
                  <span class="widget-filter-item-text">Blazers &amp; Suits</span>
                  <span class="fs-xs text-muted ms-3">235</span>
                </a>
              </li>
              <li class="widget-list-item widget-filter-item">
                <a href="#" class="widget-list-link d-flex justify-content-between align-items-center">
                  <span class="widget-filter-item-text">Blouses</span>
                  <span class="fs-xs text-muted ms-3">410</span>
                </a>
              </li>
              ...
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- Category without search bar and scrollbar (less items) -->
    <div class="accordion-item">
      <h3 class="accordion-header">
        <a href="#sunglasses" class="accordion-button collapsed" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sunglasses">
          Sunglasses
        </a>
      </h3>
      <div id="sunglasses" class="accordion-collapse collapse" data-bs-parent="#shop-categories">
        <div class="accordion-body">

          <!-- Sub-categories -->
          <div class="widget widget-links">
            <ul class="widget-list">
              <li class="widget-list-item">
                <a href="#" class="widget-list-link d-flex justify-content-between align-items-center">
                  <span>View all</span>
                  <span class="fs-xs text-muted ms-3">1,842</span>
                </a>
              </li>
              <li class="widget-list-item">
                <a href="#" class="widget-list-link d-flex justify-content-between align-items-center">
                  <span>Fashion Sunglasses</span>
                  <span class="fs-xs text-muted ms-3">953</span>
                </a>
              </li>
              <li class="widget-list-item">
                <a href="#" class="widget-list-link d-flex justify-content-between align-items-center">
                  <span>Sport Sunglasses</span>
                  <span class="fs-xs text-muted ms-3">589</span>
                </a>
              </li>
              ...
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- Add as many categories and sub-categories as you need -->
  </div>
</div>

Price range

Price range

$
$ 
<!-- Widget: Range slider
        Data API:
        data-start-min - position of the slider's left handle
        data-start-max - position of the slider's right handle
        data-min - range minimum
        data-max - range maximum
        data-step - range step
-->
<div class="widget">
  <h3 class="widget-title">Price range</h3>
  <div class="range-slider" data-start-min="250" data-start-max="680" data-min="0" data-max="1000" data-step="1">
    <div class="range-slider-ui"></div>
    <div class="d-flex">
      <div class="w-50 pe-2 me-2">
        <div class="input-group input-group-sm">
          <span class="input-group-text">$</span>
          <input class="form-control range-slider-value-min" type="text">
        </div>
      </div>
      <div class="w-50 ps-2">
        <div class="input-group input-group-sm">
          <span class="input-group-text">$</span>
          <input class="form-control range-slider-value-max" type="text">
        </div>
      </div>
    </div>
  </div>
</div>

Featured products list

<!-- Widget: Featured products list -->
<div class="widget">
  <h3 class="widget-title">Featured products</h3>

  <!-- Item -->
  <div class="d-flex align-items-center pb-2 border-bottom">
    <a class="flex-shrink-0" href="#">
      <img src="path-to-image" width="64" alt="Product"/>
    </a>
    <div class="ps-2">
      <h6 class="widget-product-title"><a href="#">Women Colorblock Sneakers</a></h6>
      <div class="widget-product-meta">
        <span class="text-accent me-2">$150.<small>00</small></span>
      </div>
    </div>
  </div>

  <!-- Item -->
  <div class="d-flex align-items-center py-2 border-bottom">
    <a class="flex-shrink-0" href="#">
      <img src="path-to-image" width="64" alt="Product"/>
    </a>
    <div class="ps-2">
      <6 class="widget-product-title"><a href="#">TH Jeans City Backpack</a></h6>
      <div class="widget-product-meta">
        <span class="text-accent me-2">$79.<small>00</small></span>
      </div>
    </div>
  </div>

  <!-- Item -->
  <div class="d-flex align-items-center py-2 border-bottom">
    <a class="flex-shrink-0" href="#">
      <img src="path-to-image" width="64" alt="Product"/>
    </a>
    <div class="ps-2y">
      <h6 class="widget-product-title"><a href="#">3-Color Sun Stash Hat</a></h6>
      <div class="widget-product-meta">
        <span class="text-accent me-2">$22.<small>00</small></span>
      </div>
    </div>
  </div>

  <!-- Item -->
  <div class="d-flex align-items-center py-2">
    <a class="flex-shrink-0" href="#">
      <img src="path-to-image" width="64" alt="Product"/>
    </a>
    <div class="ps-2">
      <h6 class="widget-product-title"><a href="#">Cotton Polo Regular Fit</a></h6>
      <div class="widget-product-meta">
        <span class="text-accent me-2">$9.<small>00</small></span>
      </div>
    </div>
  </div>
</div>

Shopping cart

Your cart

Subtotal:$265.00
Expand cart
Checkout 
<!-- Widget: Shopping cart -->
<div class="widget widget-cart">
  <h3 class="widget-title">Your cart</h3>

  <!-- Scrollable area -->
  <div style="max-height: 15rem;" data-simplebar data-simplebar-auto-hide="false">

    <!-- Item -->
    <div class="widget-cart-item pb-2 border-bottom">
      <button class="btn-close text-danger" type="button" aria-label="Remove">
        <span aria-hidden="true">&times;</span>
      </button>
      <div class="d-flex align-items-center">
        <a class="flex-shrink-0" href="#">
          <img src="path-to-image" width="64" alt="Product"/>
        </a>
        <div class="ps-2">
          <h6 class="widget-product-title"><a href="#">Women Colorblock Sneakers</a></h6>
          <div class="widget-product-meta">
            <span class="text-accent me-2">$150.<small>00</small></span>
            <span class="text-muted">x 1</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Item -->
    <div class="widget-cart-item py-2 border-bottom">
      <button class="btn-close text-danger" type="button" aria-label="Remove">
        <span aria-hidden="true">&times;</span>
      </button>
      <div class="d-flex align-items-center">
        <a class="flex-shrink-0" href="#">
          <img src="path-to-image" width="64" alt="Product"/>
        </a>
        <div class="ps-2">
          <6 class="widget-product-title"><a href="#">TH Jeans City Backpack</a></h6>
          <div class="widget-product-meta">
            <span class="text-accent me-2">$79.<small>00</small></span>
            <span class="text-muted">x 1</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Item -->
    <div class="widget-cart-item py-2 border-bottom">
      <button class="btn-close text-danger" type="button" aria-label="Remove">
        <span aria-hidden="true">&times;</span>
      </button>
      <div class="d-flex align-items-center">
        <a class="flex-shrink-0" href="#">
          <img src="path-to-image" width="64" alt="Product"/>
        </a>
        <div class="ps-2">
          <h6 class="widget-product-title"><a href="#">3-Color Sun Stash Hat</a></h6>
          <div class="widget-product-meta">
            <span class="text-accent me-2">$22.<small>00</small></span>
            <span class="text-muted">x 1</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Item -->
    <div class="widget-cart-item py-2 border-bottom">
      <button class="btn-close text-danger" type="button" aria-label="Remove">
        <span aria-hidden="true">&times;</span>
      </button>
      <div class="d-flex align-items-center">
        <a class="flex-shrink-0" href="#">
          <img src="path-to-image" width="64" alt="Product"/>
        </a>
        <div class="ps-2">
          <h6 class="widget-product-title"><a href="#">Cotton Polo Regular Fit</a></h6>
          <div class="widget-product-meta">
            <span class="text-accent me-2">$9.<small>00</small></span>
            <span class="text-muted">x 1</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <div class="d-flex flex-wrap justify-content-between align-items-center py-3">
    <div class="fs-sm me-2 py-2">
      <span class="text-muted">Subtotal:</span>
      <span class="text-accent fs-base ms-1">$265.<small>00</small></span>
    </div>
    <a class="btn btn-outline-secondary btn-sm" href="#">
      Expand cart
      <i class="ci-arrow-right ms-1 me-n1"></i>
    </a>
  </div>
  <a class="btn btn-primary btn-sm d-block w-100" href="#">
    <i class="ci-card me-2 fs-base align-middle"></i>
    Checkout
  </a>
</div>

Tag cloud

<!-- Widget: Tag cloud -->
<div class="widget">
  <h3 class="widget-title">Popular tags</h3>
  <a href="#" class="btn-tag me-2 mb-2">#cartzilla news</a>
  <a href="#" class="btn-tag active me-2 mb-2">#active tag</a>
  ...
</div>

Filter (checkboxes)

Filter by brand

  • 425
  • 15
  • 18
  • 103
  • 27
  • 10
  • 365
  • 508
  • 176
  • 54
  • 739
  • 92
  • 17
  • 361
  • 264
  • 75
  • 218
  • 810
  • 147
  • 64
  • 370
  • 506
  • 209
  • 487
  • 90
  • 152
  • 238
  • 29
  • 115 
<!-- Widget: Filter (checkboxes) -->
<div class="widget widget-filter">
  <h3 class="widget-title">Filter by brand</h3>
  <div class="input-group input-group-sm mb-2">
    <input type="text" class="widget-filter-search form-control rounded-end pe-5" placeholder="Search">
    <i class="ci-search position-absolute top-50 end-0 translate-middle-y fs-sm me-3"></i>
  </div>
  <ul class="widget-list widget-filter-list list-unstyled pt-1" style="max-height: 13rem;" data-simplebar data-simplebar-auto-hide="false">
    <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
      <div class="form-check">
        <input type="checkbox" id="adidas" class="form-check-input">
        <label class="form-check-label widget-filter-item-text" for="adidas">Adidas</label>
      </div>
      <span class="fs-xs text-muted">425</span>
    </li>
    <li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
      <div class="form-check">
        <input type="checkbox" id="ataylor" class="form-check-input">
        <label class="form-check-label widget-filter-item-text" for="ataylor">Ann Taylor</label>
      </div>
      <span class="fs-xs text-muted">15</span>
    </li>
    <!-- Add as many items as you need -->
  </ul>
</div>

Subscription (MailChimp Ajax)

Subscribe

*Subscribe to our newsletter to receive early discount offers, updates and new products info.
<!-- Widget: Subscription (MailChimp Ajax)
        Instructions how to get MailChimp action link:
        1. Log in to your MailChimp Dashboard / Audience / Manage Audience / Signup forms / Embedded forms
        2. In the provided code find form action link and copy it
        3. Paste it to the form action attribute below
        4. Also in the form code provided by MailChimp find antispam input and copy it name attribute contents
        5. Paste what you have copied from name attribute to the name attribute of input with class "subscription-form-antispam"
-->
<div class="widget">
  <h3 class="widget-title">Subscribe</h3>
  <form class="subscription-form validate" action="mailchimp-embedded-form-atcion-link" method="post" name="mc-embedded-subscribe-form" target="_blank" novalidate>
    <div class="input-group flex-nowrap">
      <i class="ci-mail position-absolute top-50 translate-middle-y text-muted fs-base ms-3"></i>
      <input class="form-control rounded-start" type="email" name="EMAIL" placeholder="Your email" required>
      <button class="btn btn-primary" type="submit" name="subscribe">Subscribe*</button>
    </div>
    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true">
      <input type="text" class="subscription-form-antispam" name="mailchimp-embedded-form-antispam-name-attribute" tabindex="-1">
    </div>
    <div class="form-text">*Subscribe to our newsletter to receive early discount offers, updates and new products info.</div>
    <div class="subscription-status"></div>
  </form>
</div>

Contact details

<!-- Widget: Contact details -->
<div class="widget">
  <ul class="widget-list">
    <li class="d-flex pb-3 border-bottom">
      <i class="ci-location fs-lg mt-2 text-primary"></i>
      <div class="ps-3">
        <span class="fs-ms text-muted">Find us</span>
        <a class="d-block text-heading fs-sm" href="#">769, Industrial Dr, West Chicago, IL 60185, USA</a>
      </div>
    </li>
    <li class="d-flex pt-2 pb-3 border-bottom">
      <i class="ci-phone fs-lg mt-2 text-primary"></i>
      <div class="ps-3">
        <span class="fs-ms text-muted">Call us</span>
        <a class="d-block text-heading fs-sm" href="tel:+184725276533">+1 (847) 252 765 33</a>
      </div>
    </li>
    <li class="d-flex pt-2">
      <i class="ci-mail fs-lg mt-2 text-primary"></i>
      <div class="ps-3">
        <span class="fs-ms text-muted">Write us</span>
        <a class="d-block text-heading fs-sm" href="mailto:email@example.com">email@example.com</a>
      </div>
    </li>
  </ul>
</div>
Top