Sidebar
eCommerce sidebar
Set of design blocks dedicated to building eCommerce sidebars.
See also a page fully composed of the following elements.
Shop DemoSearch box
<!-- Section: Search Box -->
<section class="mb-4">
<div class="md-form md-outline mt-0 d-flex justify-content-between align-items-center">
<input type="text" id="search12" class="form-control mb-0" placeholder="Search...">
<a href="#!" class="btn btn-flat btn-md px-3 waves-effect"><i class="fas fa-search fa-lg"></i></a>
</div>
</section>
<!-- Section: Search Box -->
Product categories
Subcategories
<!-- Section: Categories -->
<section>
<h5>Subcategories</h5>
<div class="text-muted small text-uppercase mb-5">
<p class="mb-4">return to <a href="#!" class="card-link-secondary"><strong>Clothing, Shoes, Accessories</strong></a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Dresses</a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Tops, Tees & Blouses</a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Sweaters</a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Fashion Hoodies & Sweatshirts</a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Jeans</a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Pants</a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Skirts</a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Shorts</a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Leggings</a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Active</a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Swimsuits & Cover Ups</a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Lingerie, Sleep & Lounge</a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Jumpsuits, Rompers & Overalls</a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Coats, Jackets & Vests</a></p>
<p class="mb-3"><a href="#!" class="card-link-secondary">Suiting & Blazers</a></p>
<p class="mb-0"><a href="#!" class="card-link-secondary">Socks & Hosiery</a></p>
</div>
</section>
<!-- Section: Categories -->
Checkbox filter
Condition
<!-- Section: Condition -->
<section class="mb-4">
<h6 class="font-weight-bold mb-3">Condition</h6>
<div class="form-check pl-0 mb-3">
<input type="checkbox" class="form-check-input filled-in" id="new">
<label class="form-check-label small text-uppercase card-link-secondary" for="new">New</label>
</div>
<div class="form-check pl-0 mb-3">
<input type="checkbox" class="form-check-input filled-in" id="used">
<label class="form-check-label small text-uppercase card-link-secondary" for="used">Used</label>
</div>
<div class="form-check pl-0 mb-3">
<input type="checkbox" class="form-check-input filled-in" id="collectible">
<label class="form-check-label small text-uppercase card-link-secondary" for="collectible">Collectible</label>
</div>
<div class="form-check pl-0 mb-3 pb-1">
<input type="checkbox" class="form-check-input filled-in" id="renewed">
<label class="form-check-label small text-uppercase card-link-secondary" for="renewed">Renewed</label>
</div>
</section>
<!-- Section: Condition -->
Rating filter
Avg. Customer Review
<!-- Section: Average -->
<section class="mb-4">
<h6 class="font-weight-bold mb-3">Avg. Customer Review</h6>
<a href="#!">
<ul class="rating">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">& Up</p>
</li>
</ul>
</a>
<a href="#!">
<ul class="rating">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">& Up</p>
</li>
</ul>
</a>
<a href="#!">
<ul class="rating">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">& Up</p>
</li>
</ul>
</a>
<a href="#!">
<ul class="rating">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
<li>
<p class="small text-uppercase card-link-secondary px-2">& Up</p>
</li>
</ul>
</a>
</section>
<!-- Section: Average -->
Input fields filter
Price
<!-- Section: Price -->
<section class="mb-4">
<h6 class="font-weight-bold mb-3">Price</h6>
<form>
<div class="d-flex align-items-center mt-4 pb-1">
<div class="md-form md-outline my-0">
<input id="from" type="text" class="form-control mb-0">
<label for="form">$ Min</label>
</div>
<p class="px-2 mb-0 text-muted"> - </p>
<div class="md-form md-outline my-0">
<input id="to" type="text" class="form-control mb-0">
<label for="to">$ Max</label>
</div>
</div>
</form>
</section>
<!-- Section: Price -->
Slider filter
Price
<!-- Section: Price version 2 -->
<section class="mb-4">
<h6 class="font-weight-bold mb-3">Price</h6>
<div class="slider-price d-flex align-items-center my-4">
<span class="font-weight-normal small text-muted mr-2">$0</span>
<form class="multi-range-field w-100 mb-1">
<input id="multi1" class="multi-range" type="range" />
</form>
<span class="font-weight-normal small text-muted ml-2">$100</span>
</div>
</section>
<!-- Section: Price version 2 -->
$('#multi1').mdbRange({
single: {
active: true,
multi: {
active: true,
rangeLength: 1
},
}
});
Questions or feedback?
Let us know