Product Carousel Blocks
Start building your website with ready-to-use product blocks.
Single Product Carousel #v1
save
$49Best Seller
save
$49Best Seller
save
$49Best Seller
<div class="bg-gray-200 space-top-2">
<div class="container">
<div class="js-slick-carousel u-slick"
data-pagi-classes="d-xl-none text-center u-slick__pagination my-4 position-absolute right-0 left-0"
data-arrows-classes="d-none d-xl-block u-slick__arrow u-slick__arrow--v1 u-slick__arrow-centered--y rounded-circle box-shadow-1"
data-arrow-left-classes="flaticon-back u-slick__arrow-inner u-slick__arrow-inner--left ml-lg-n10"
data-arrow-right-classes="flaticon-next u-slick__arrow-inner u-slick__arrow-inner--right mr-lg-n10">
<div class="product position-relative">
<div class="d-md-flex justify-content-center space-top-lg-2 space-bottom-lg-4 z-index-2 position-relative">
<div class="woocommerce-loop-product__thumbnail mb-6 mb-md-10 mb-lg-0">
<div class="position-relative">
<a href="#" class="d-block"><img src="https://placehold.it/300x452" class="img-fluid"></a>
<div class="d-none badge badge-lg badge-primary-home-v3 position-absolute badge-pos--top-left text-gray-200 rounded-circle d-lg-flex flex-column align-items-center justify-content-center">
<h6 class="font-weight-medium mb-n2">save</h6>
<span class="font-size-5 font-weight-medium">$49</span>
</div>
</div>
</div>
<div class="woocommerce-loop-product__body ml-md-5 ml-lg-10 max-width-410 pt-lg-10 mb-6 mb-md-0">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#" tabindex="0">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title font-weight-bold mb-2 h-dark font-size-10"><a href="#" tabindex="0">Where the Crawdads Sing</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700" tabindex="0">Kelly Harms</a>
</div>
<div class="price d-flex align-items-center font-weight-medium font-size-26 mb-4">
<ins class="text-decoration-none mr-2"><span class="woocommerce-Price-amount amount text-dark"><span class="woocommerce-Price-currencySymbol">$</span>37</span></ins>
<del class="font-size-1 font-weight-regular text-gray-700"><span class="woocommerce-Price-amount amount font-size-1"><span class="woocommerce-Price-currencySymbol">$</span>78,96</span></del>
</div>
<div class="product__rating d-none align-items-center font-size-2 mb-3">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
<div class="d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-2">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
<h1 class="text-stroke-1 font-size-xl-160 mb-0 position-absolute bottom-0 text-center right-0 left-0">Best Seller</h1>
</div>
<div class="product position-relative">
<div class="d-md-flex justify-content-center space-top-lg-2 space-bottom-lg-4 z-index-2 position-relative">
<div class="woocommerce-loop-product__thumbnail mb-6 mb-md-10 mb-lg-0">
<div class="position-relative">
<a href="#" class="d-block"><img src="https://placehold.it/300x452" class="img-fluid"></a>
<div class="d-none badge badge-lg badge-primary-home-v3 position-absolute badge-pos--top-left text-gray-200 rounded-circle d-lg-flex flex-column align-items-center justify-content-center">
<h6 class="font-weight-medium mb-n2">save</h6>
<span class="font-size-5 font-weight-medium">$49</span>
</div>
</div>
</div>
<div class="woocommerce-loop-product__body ml-md-5 ml-lg-10 max-width-410 pt-lg-10 mb-6 mb-md-0">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#" tabindex="0">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title font-weight-bold mb-2 h-dark font-size-10"><a href="#" tabindex="0">Where the Crawdads Sing</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700" tabindex="0">Kelly Harms</a>
</div>
<div class="price d-flex align-items-center font-weight-medium font-size-26 mb-4">
<ins class="text-decoration-none mr-2"><span class="woocommerce-Price-amount amount text-dark"><span class="woocommerce-Price-currencySymbol">$</span>37</span></ins>
<del class="font-size-1 font-weight-regular text-gray-700"><span class="woocommerce-Price-amount amount font-size-1"><span class="woocommerce-Price-currencySymbol">$</span>78,96</span></del>
</div>
<div class="product__rating d-none align-items-center font-size-2 mb-3">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
<div class="d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-2">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
<h1 class="text-stroke-1 font-size-xl-160 mb-0 position-absolute bottom-0 text-center right-0 left-0">Best Seller</h1>
</div>
<div class="product position-relative">
<div class="d-md-flex justify-content-center space-top-lg-2 space-bottom-lg-4 z-index-2 position-relative">
<div class="woocommerce-loop-product__thumbnail mb-6 mb-md-10 mb-lg-0">
<div class="position-relative">
<a href="#" class="d-block"><img src="https://placehold.it/300x452" class="img-fluid"></a>
<div class="d-none badge badge-lg badge-primary-home-v3 position-absolute badge-pos--top-left text-gray-200 rounded-circle d-lg-flex flex-column align-items-center justify-content-center">
<h6 class="font-weight-medium mb-n2">save</h6>
<span class="font-size-5 font-weight-medium">$49</span>
</div>
</div>
</div>
<div class="woocommerce-loop-product__body ml-md-5 ml-lg-10 max-width-410 pt-lg-10 mb-6 mb-md-0">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#" tabindex="0">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title font-weight-bold mb-2 h-dark font-size-10"><a href="#" tabindex="0">Where the Crawdads Sing</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700" tabindex="0">Kelly Harms</a>
</div>
<div class="price d-flex align-items-center font-weight-medium font-size-26 mb-4">
<ins class="text-decoration-none mr-2"><span class="woocommerce-Price-amount amount text-dark"><span class="woocommerce-Price-currencySymbol">$</span>37</span></ins>
<del class="font-size-1 font-weight-regular text-gray-700"><span class="woocommerce-Price-amount amount font-size-1"><span class="woocommerce-Price-currencySymbol">$</span>78,96</span></del>
</div>
<div class="product__rating d-none align-items-center font-size-2 mb-3">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
<div class="d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-2">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
<h1 class="text-stroke-1 font-size-xl-160 mb-0 position-absolute bottom-0 text-center right-0 left-0">Best Seller</h1>
</div>
</div>
</div>
</div>
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Bookworm -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Single Product Static #v1
MONTHLY SELECTED BOOK BY OUR STAFF
Selected Books
Selected Books
<div class="bg-punch-light product-editors-choice">
<div class="container position-relative space-3">
<div class="row align-items-center position-relative z-index-2">
<div class="col-lg-4 mb-6 mb-lg-0">
<h6 class="text-gray-400 font-weight-bold">MONTHLY SELECTED BOOK BY OUR STAFF</h6>
<h2 class="mb-6 text-dark font-size-7">Selected Books</h2>
<button type="submit" class="btn btn-primary rounded-md btn-wide py-2d75 font-weight-medium">View All</button>
</div>
<div class="col-lg-8">
<ul class="row row-cols-2 row-cols-md-4 row-cols-lg-3 row-cols-wd-4 list-unstyled mb-0 products">
<li class="col">
<div class="mb-4 mb-md-0">
<div class="product product__space product__space-primary rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-lg-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>37</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="mb-4 mb-md-0">
<div class="product product__space product__space-primary rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-lg-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>37</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col">
<div class="mb-4 mb-md-0">
<div class="product product__space product__space-primary rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-lg-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">kindle edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Open Book</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>37</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col d-lg-none d-wd-block">
<div class="mb-4 mb-md-0">
<div class="product product__space product__space-primary rounded-md bg-white">
<div class="product__inner overflow-hidden p-3 p-lg-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">hardcover</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Until the End of Time: Mind, Matter</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>89</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<h1 class="text-stroke-1 font-size-xl-160 mb-0 position-absolute bottom-0">Selected Books</h1>
</div>
</div>