Wishlist
eCommerce wishlist
Set of design blocks dedicated to building eCommerce wishlist.
See also pages fully composed of the following elements.
Wishlist page demoWishlist basic example
Blue denim shirt
Shirts
17.99 $
Red hoodie
Hoodies
35.99 $
Grey sweater
Sweaters
$21.99
$36.99
<!--Section: Block Content-->
<section>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-4 mb-5">
<!-- Card -->
<div class="">
<div class="view zoom overlay z-depth-2 rounded">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.jpg" alt="Sample">
<a href="#!">
<div class="mask">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg">
<div class="mask rgba-black-slight"></div>
</div>
</a>
</div>
<div class="text-center pt-4">
<h5>Blue denim shirt</h5>
<p class="mb-2 text-muted text-uppercase small">Shirts</p>
<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="fas fa-star fa-sm text-primary"></i>
</li>
</ul>
<hr>
<h6 class="mb-3">17.99 $</h6>
<button type="button" class="btn btn-primary btn-sm mr-1 mb-2"><i
class="fas fa-shopping-cart pr-2"></i>Add to cart</button>
<button type="button" class="btn btn-light btn-sm mr-1 mb-2"><i
class="fas fa-info-circle pr-2"></i>Details</button>
<button type="button" class="btn btn-elegant btn-sm px-3 mb-2 material-tooltip-main"
data-toggle="tooltip" data-placement="top" title="Remove from wishlist"><i
class="fas fa-times"></i></button>
</div>
</div>
<!-- Card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4 mb-5">
<!-- Card -->
<div class="">
<div class="view zoom overlay z-depth-2 rounded">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13a.jpg" alt="Sample">
<a href="#!">
<div class="mask">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg">
<div class="mask rgba-black-slight"></div>
</div>
</a>
</div>
<div class="text-center pt-4">
<h5>Red hoodie</h5>
<p class="mb-2 text-muted text-uppercase small">Hoodies</p>
<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>
</ul>
<hr>
<h6 class="mb-3">35.99 $</h6>
<button type="button" class="btn btn-primary btn-sm mr-1 mb-2"><i
class="fas fa-shopping-cart pr-2"></i>Add to cart</button>
<button type="button" class="btn btn-light btn-sm mr-1 mb-2"><i
class="fas fa-info-circle pr-2"></i>Details</button>
<button type="button" class="btn btn-elegant btn-sm px-3 mb-2 material-tooltip-main"
data-toggle="tooltip" data-placement="top" title="Remove from wishlist"><i
class="fas fa-times"></i></button>
</div>
</div>
<!-- Card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4 mb-5">
<!-- Card -->
<div class="">
<div class="view zoom overlay z-depth-2 rounded">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14a.jpg" alt="Sample">
<h4 class="mb-0"><span class="badge badge-primary badge-pill badge-news">Sale</span></h4>
<a href="#!">
<div class="mask">
<img class="img-fluid w-100"
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg">
<div class="mask rgba-black-slight"></div>
</div>
</a>
</div>
<div class="text-center pt-4">
<h5>Grey sweater</h5>
<p class="mb-2 text-muted text-uppercase small">Sweaters</p>
<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="fas fa-star fa-sm text-primary"></i>
</li>
</ul>
<hr>
<h6 class="mb-3">
<span class="text-danger mr-1">$21.99</span>
<span class="text-grey"><s>$36.99</s></span>
</h6>
<button type="button" class="btn btn-primary btn-sm mr-1 mb-2"><i
class="fas fa-shopping-cart pr-2"></i>Add to cart</button>
<button type="button" class="btn btn-light btn-sm mr-1 mb-2"><i
class="fas fa-info-circle pr-2"></i>Details</button>
<button type="button" class="btn btn-elegant btn-sm px-3 mb-2 material-tooltip-main"
data-toggle="tooltip" data-placement="top" title="Remove from wishlist"><i
class="fas fa-times"></i></button>
</div>
</div>
<!-- Card -->
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</section>
<!--Section: Block Content-->
Questions or feedback?
Let us know