Products Hero
Ready-to-use Shop hero blocks to get you started.
Products hero #1
The Space shoes
$99Our Space Design Makeup collection – to create your coolest look, then switch it up again tomorrow.
Color:
Size:
Size guideAdd to Cart
| Size | Numeric | Chest (CM) | Arm (CM) |
|---|---|---|---|
| Small | 36 | 89-94 | 81 |
| Medium | 38-40 | 97-102 | 86 |
| Large | 42 | 104-109 | 89 |
| Extra large | 44-46 | 112-117 | 91 |
HTML:
<!-- Product Description Section -->
<div class="container space-2 space-3--lg">
<div class="row">
<div class="col-lg-7 mb-7 mb-lg-0">
<!-- Red Product Gallery -->
<div id="redShoeProduct" data-target-group="idProductSwitcher">
<div class="row align-items-center">
<div class="col-2">
<!-- Slick Carousel - Thumbnail Shop Product -->
<div id="redShoeNavThumb" class="js-slick-carousel u-slick u-slick--transform-off-lg u-slick--pagination-active-border"
data-infinite="true"
data-center-mode="true"
data-slides-show="4"
data-is-thumbs="true"
data-vertical="true"
data-focus-on-select="true"
data-nav-for="#redShoeNavMain">
<div class="js-slide my-2">
<img class="img-fluid u-slick--pagination-active-border__item" src="../assets/img/100x100/img5.jpg" alt="Image Description">
</div>
<div class="js-slide my-2">
<img class="img-fluid u-slick--pagination-active-border__item" src="../assets/img/100x100/img6.jpg" alt="Image Description">
</div>
<div class="js-slide my-2">
<img class="img-fluid u-slick--pagination-active-border__item" src="../assets/img/100x100/img7.jpg" alt="Image Description">
</div>
<div class="js-slide my-2">
<img class="img-fluid u-slick--pagination-active-border__item" src="../assets/img/100x100/img8.jpg" alt="Image Description">
</div>
</div>
<!-- End Slick Carousel - Thumbnail Shop Product -->
</div>
<div class="col-10">
<!-- Slick Carousel - Main Shop Product -->
<div id="redShoeNavMain" class="js-slick-carousel u-slick"
data-infinite="true"
data-nav-for="#redShoeNavThumb">
<div class="js-slide">
<img class="img-fluid" src="../assets/img/700x400/img1.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid" src="../assets/img/700x400/img2.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid" src="../assets/img/700x400/img3.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid" src="../assets/img/700x400/img4.jpg" alt="Image Description">
</div>
</div>
<!-- End Slick Carousel - Main Shop Product -->
</div>
</div>
</div>
<!-- End Red Product Gallery -->
<!-- Black Product Gallery -->
<div id="blackShoeProduct" style="display: none; opacity: 0;" data-target-group="idProductSwitcher">
<div class="row align-items-center">
<div class="col-2">
<!-- Slick Carousel - Thumbnail Shop Product -->
<div id="blackShoeNavThumb" class="js-slick-carousel u-slick u-slick--transform-off-lg u-slick--pagination-active-border"
data-infinite="true"
data-center-mode="true"
data-slides-show="4"
data-is-thumbs="true"
data-vertical="true"
data-focus-on-select="true"
data-nav-for="#blackShoeNavMain">
<div class="js-slide my-2">
<img class="img-fluid u-slick--pagination-active-border__item" src="../assets/img/100x100/img9.jpg" alt="Image Description">
</div>
<div class="js-slide my-2">
<img class="img-fluid u-slick--pagination-active-border__item" src="../assets/img/100x100/img10.jpg" alt="Image Description">
</div>
<div class="js-slide my-2">
<img class="img-fluid u-slick--pagination-active-border__item" src="../assets/img/100x100/img11.jpg" alt="Image Description">
</div>
<div class="js-slide my-2">
<img class="img-fluid u-slick--pagination-active-border__item" src="../assets/img/100x100/img12.jpg" alt="Image Description">
</div>
</div>
<!-- End Slick Carousel - Thumbnail Shop Product -->
</div>
<div class="col-10">
<!-- Slick Carousel - Main Shop Product -->
<div id="blackShoeNavMain" class="js-slick-carousel u-slick"
data-infinite="true"
data-nav-for="#blackShoeNavThumb">
<div class="js-slide">
<img class="img-fluid" src="../assets/img/700x400/img5.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid" src="../assets/img/700x400/img6.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid" src="../assets/img/700x400/img7.jpg" alt="Image Description">
</div>
<div class="js-slide">
<img class="img-fluid" src="../assets/img/700x400/img8.jpg" alt="Image Description">
</div>
</div>
<!-- End Slick Carousel - Main Shop Product -->
</div>
</div>
</div>
<!-- End Black Product Gallery -->
</div>
<div class="col-lg-5">
<!-- Content -->
<div class="mb-5">
<h1 class="font-weight-normal">The Space shoes</h1>
<span class="d-block h3 mb-3">$99</span>
<p>Our Space Design Makeup collection – to create your coolest look, then switch it up again tomorrow.</p>
</div>
<!-- Color Select -->
<h2 class="h6">Color:</h2>
<span class="js-animation-link active u-shopping-cart-color-selector mr-2" style="background-image: url(../assets/img/20x20/red.jpg);"
data-target="#redShoeProduct"
data-link-group="idProductSwitcher"></span>
<span class="js-animation-link u-shopping-cart-color-selector mr-2" style="background-image: url(../assets/img/20x20/black.jpg);"
data-target="#blackShoeProduct"
data-link-group="idProductSwitcher"></span>
<!-- End Color Select -->
<hr class="my-4">
<!-- Size Select -->
<div class="d-flex justify-content-between align-items-center mb-2">
<h3 class="h6 mb-0">Size:</h3>
<a class="d-flex align-items-center text-muted" href="#shoppingCartModal" role="button"
data-modal-target="#shoppingCartModal"
data-overlay-color="#111722">
<span class="fa fa-ruler-horizontal font-size-18 mr-2"></span>
<small>Size guide</small>
</a>
</div>
<div class="mb-4">
<div class="custom-control custom-radio custom-control-inline form-selector">
<input type="radio" id="shoeSize6" name="shoeSizeSelectorName" class="custom-control-input form-selector__input">
<label class="custom-control-label form-selector__label" for="shoeSize6">6</label>
</div>
<div class="custom-control custom-radio custom-control-inline form-selector">
<input type="radio" id="shoeSize7" name="shoeSizeSelectorName" class="custom-control-input form-selector__input">
<label class="custom-control-label form-selector__label" for="shoeSize7">7</label>
</div>
<div class="custom-control custom-radio custom-control-inline form-selector">
<input type="radio" id="shoeSize8" name="shoeSizeSelectorName" class="custom-control-input form-selector__input">
<label class="custom-control-label form-selector__label" for="shoeSize8">8</label>
</div>
<div class="custom-control custom-radio custom-control-inline form-selector">
<input type="radio" id="shoeSize9" name="shoeSizeSelectorName" class="custom-control-input form-selector__input">
<label class="custom-control-label form-selector__label" for="shoeSize9">9</label>
</div>
<div class="custom-control custom-radio custom-control-inline form-selector">
<input type="radio" id="shoeSize10" name="shoeSizeSelectorName" class="custom-control-input form-selector__input">
<label class="custom-control-label form-selector__label" for="shoeSize10">10</label>
</div>
<div class="custom-control custom-radio custom-control-inline form-selector">
<input type="radio" id="shoeSize11" name="shoeSizeSelectorName" class="custom-control-input form-selector__input">
<label class="custom-control-label form-selector__label" for="shoeSize11">11</label>
</div>
<div class="custom-control custom-radio custom-control-inline form-selector">
<input type="radio" id="shoeSize12" name="shoeSizeSelectorName" class="custom-control-input form-selector__input">
<label class="custom-control-label form-selector__label" for="shoeSize12">12</label>
</div>
<div class="custom-control custom-radio custom-control-inline form-selector">
<input type="radio" id="shoeSize13" name="shoeSizeSelectorName" class="custom-control-input form-selector__input">
<label class="custom-control-label form-selector__label" for="shoeSize13">13</label>
</div>
</div>
<!-- End Size Select -->
<hr class="my-4">
<a class="btn btn-block btn-primary" href="../html/shop/cart.html">Add to Cart</a>
<!-- End Content -->
</div>
</div>
</div>
<!-- End Product Description Section -->
<!-- Shopping Cart Modal Window -->
<div id="shoppingCartModal" class="js-shopping-cart-window u-modal-window">
<!-- Modal Close Button -->
<button class="btn btn-xs btn-icon btn-text-secondary u-modal-window__close" type="button" onclick="Custombox.modal.close();">
<span class="fas fa-times"></span>
</button>
<!-- End Modal Close Button -->
<!-- Content -->
<div class="p-5">
<table class="table table-bordered table-striped mb-0">
<thead>
<tr>
<th>Size</th>
<th>Numeric</th>
<th>Chest (CM)</th>
<th>Arm (CM)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Small</td>
<td>36</td>
<td>89-94</td>
<td>81</td>
</tr>
<tr>
<td>Medium</td>
<td>38-40</td>
<td>97-102</td>
<td>86</td>
</tr>
<tr>
<td>Large</td>
<td>42</td>
<td>104-109</td>
<td>89</td>
</tr>
<tr>
<td>Extra large</td>
<td>44-46</td>
<td>112-117</td>
<td>91</td>
</tr>
</tbody>
</table>
</div>
<!-- EndContent -->
</div>
<!-- End Shopping Cart Modal Window -->
CSS library:
<link rel="stylesheet" href="assets/vendor/slick-carousel/slick/slick.css">
<link rel="stylesheet" href="assets/vendor/custombox/dist/custombox.min.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/slick-carousel/slick/slick.js"></script>
<script src="assets/vendor/custombox/dist/custombox.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/helpers/hs.show-animation.js"></script>
<script src="assets/js/helpers/hs.slick-carousel.js"></script>
<script src="assets/js/helpers/hs.modal-window.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of show animations
$.HSCore.components.HSShowAnimation.init('.js-animation-link', {
afterShow: function() {
$('.js-slick-carousel').slick('setPosition');
$('#redShoeNavThumb').slick('setPosition');
$('#blackShoeNavThumb').slick('setPosition');
}
});
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
// initialization of autonomous popups
$.HSCore.components.HSModalWindow.init('[data-modal-target]', '.js-shopping-cart-window', {
autonomous: true
});
});
</script>