Buy now
Shop components
Components that are related to the e-commerce module of the website.
Cartzilla component
Product card (Grid)
<!-- Product card (Grid) -->
<div class="card product-card">
<span class="badge badge-danger badge-shadow">Sale</span>
<button class="btn-wishlist btn-sm" type="button" data-toggle="tooltip" data-placement="left" title="Add to wishlist">
<i class="czi-heart"></i>
</button>
<a class="card-img-top d-block overflow-hidden" href="#">
<img src="path-to-image" alt="Product">
</a>
<div class="card-body py-2">
<a class="product-meta d-block font-size-xs pb-1" href="#">Women’s T-shirt</a>
<h3 class="product-title font-size-sm"><a href="#">Cotton Lace Blouse</a></h3>
<div class="d-flex justify-content-between">
<div class="product-price">
<span class="text-accent">$28.<small>50</small></span>
<del class="font-size-sm text-muted">38.<small>50</small></del>
</div>
<div class="star-rating">
<i class="sr-star czi-star-filled active"></i>
<i class="sr-star czi-star-filled active"></i>
<i class="sr-star czi-star-filled active"></i>
<i class="sr-star czi-star"></i>
<i class="sr-star czi-star"></i>
</div>
</div>
</div>
<div class="card-body card-body-hidden">
<div class="text-center pb-2">
<div class="custom-control custom-option custom-control-inline mb-2">
<input class="custom-control-input" type="radio" name="color1" id="white" checked>
<label class="custom-option-label rounded-circle" for="white">
<span class="custom-option-color rounded-circle" style="background-color: #eaeaeb;"></span>
</label>
</div>
<div class="custom-control custom-option custom-control-inline mb-2">
<input class="custom-control-input" type="radio" name="color1" id="blue">
<label class="custom-option-label rounded-circle" for="blue">
<span class="custom-option-color rounded-circle" style="background-color: #d1dceb;"></span>
</label>
</div>
<div class="custom-control custom-option custom-control-inline mb-2">
<input class="custom-control-input" type="radio" name="color1" id="yellow">
<label class="custom-option-label rounded-circle" for="yellow">
<span class="custom-option-color rounded-circle" style="background-color: #f4e6a2;"></span>
</label>
</div>
<div class="custom-control custom-option custom-control-inline mb-2">
<input class="custom-control-input" type="radio" name="color1" id="pink">
<label class="custom-option-label rounded-circle" for="pink">
<span class="custom-option-color rounded-circle" style="background-color: #f3dcff;"></span>
</label>
</div>
</div>
<div class="d-flex mb-2">
<select class="custom-select custom-select-sm mr-2">
<option>XS</option>
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
<button class="btn btn-primary btn-sm" type="button">
<i class="czi-cart font-size-sm mr-1"></i>
Add to Cart
</button>
</div>
<div class="text-center">
<a class="nav-link-style font-size-ms" href="#" data-toggle="modal">
<i class="czi-eye align-middle mr-1"></i>
Quick view
</a>
</div>
</div>
</div>// Product card (Grid)
.card.product-card
span.badge.badge-danger.badge-shadow Sale
button(type="button", data-toggle="tooltip", data-placement="left", title="Add to wishlist").btn-wishlist.btn-sm
i.czi-heart
a(href="#").card-img-top.d-block.overflow-hidden
img(src="path-to-image", alt="Product")
.card-body.py-2
a(href="#").product-meta.d-block.font-size-xs.pb-1
| Women’s T-shirt
h3.product-title.font-size-sm
a(href="#") Cotton Lace Blouse
.d-flex.justify-content-between
.product-price
span.text-accent $28.<small>50</small>
del.font-size-sm.text-muted 38.<small>50</small>
+star-rating(3)
.card-body.card-body-hidden
.text-center.pb-2
.custom-control.custom-option.custom-control-inline.mb-2
input(type="radio", name="color1", id="white", checked).custom-control-input
label(for="white").custom-option-label.rounded-circle
span(style="background-color: #eaeaeb;").custom-option-color.rounded-circle
.custom-control.custom-option.custom-control-inline.mb-2
input(type="radio", name="color1", id="blue").custom-control-input
label(for="blue").custom-option-label.rounded-circle
span(style="background-color: #d1dceb;").custom-option-color.rounded-circle
.custom-control.custom-option.custom-control-inline.mb-2
input(type="radio", name="color1", id="yellow").custom-control-input
label(for="yellow").custom-option-label.rounded-circle
span(style="background-color: #f4e6a2;").custom-option-color.rounded-circle
.custom-control.custom-option.custom-control-inline.mb-2
input(type="radio", name="color1", id="pink").custom-control-input
label(for="pink").custom-option-label.rounded-circle
span(style="background-color: #f3dcff;").custom-option-color.rounded-circle
.d-flex.mb-2
select.custom-select.custom-select-sm.mr-2
option XS
option S
option M
option L
option XL
button(type="button").btn.btn-primary.btn-sm
i.czi-cart.font-size-sm.mr-1
| Add to Cart
.text-center
a(href="#", data-toggle="modal").nav-link-style.font-size-ms
i.czi-eye.align-middle.mr-1
| Quick view
Product card (List)
<!-- Product card (List) -->
<div class="card product-card product-list">
<button class="btn-wishlist btn-sm" type="button" data-toggle="tooltip" data-placement="left" title="Add to wishlist">
<i class="czi-heart"></i>
</button>
<div class="d-sm-flex align-items-center">
<a class="product-list-thumb" href="#">
<img src="path-to-image" alt="Product">
</a>
<div class="card-body py-2">
<a class="product-meta d-block font-size-xs pb-1" href="#">Sneakers & Keds</a>
<h3 class="product-title font-size-base">
<a href="#">Women Colorblock Sneakers</a>
</h3>
<div class="d-flex justify-content-between">
<div class="product-price">
<span class="text-accent">$154.<small>00</small></span>
</div>
<div class="star-rating">
<i class="sr-star czi-star-filled active"></i>
<i class="sr-star czi-star-filled active"></i>
<i class="sr-star czi-star-filled active"></i>
<i class="sr-star czi-star-filled active"></i>
<i class="sr-star czi-star"></i>
</div>
</div>
<div class="card-body card-body-hidden">
<div class="pb-2">
<div class="custom-control custom-option custom-control-inline mb-2">
<input class="custom-control-input" type="radio" name="size1" id="s-75">
<label class="custom-option-label" for="s-75">7.5</label>
</div>
<div class="custom-control custom-option custom-control-inline mb-2">
<input class="custom-control-input" type="radio" name="size1" id="s-80" checked>
<label class="custom-option-label" for="s-80">8</label>
</div>
<div class="custom-control custom-option custom-control-inline mb-2">
<input class="custom-control-input" type="radio" name="size1" id="s-85">
<label class="custom-option-label" for="s-85">8.5</label>
</div>
<div class="custom-control custom-option custom-control-inline mb-2">
<input class="custom-control-input" type="radio" name="size1" id="s-90">
<label class="custom-option-label" for="s-90">9</label>
</div>
</div>
<button class="btn btn-primary btn-sm mb-2" type="button">
<i class="czi-cart font-size-sm mr-1"></i>
Add to Cart
</button>
<div class="text-left">
<a class="nav-link-style font-size-ms" href="#">
<i class="czi-eye align-middle mr-1"></i>
Quick view
</a>
</div>
</div>
</div>
</div>
</div>// Product card (List)
.card.product-card.product-list
button(type="button" data-toggle="tooltip" data-placement="left" title="Add to wishlist").btn-wishlist.btn-sm
i.czi-heart
.d-sm-flex.align-items-center
a(href="#").product-list-thumb
img(src="path-to-image", alt="Product")
.card-body.py-2
a(href="#").product-meta.d-block.font-size-xs.pb-1
| Sneakers & Keds
h3.product-title.font-size-base
a(href="#") Women Colorblock Sneakers
.d-flex.justify-content-between
.product-price
span.text-accent $154.<small>00</small>
+star-rating(4)
.card-body.card-body-hidden
.pb-2
.custom-control.custom-option.custom-control-inline.mb-2
input(type="radio", name="size1", id="s-75").custom-control-input
label.custom-option-label(for="s-75") 7.5
.custom-control.custom-option.custom-control-inline.mb-2
input(type="radio", name="size1", id="s-80" checked).custom-control-input
label.custom-option-label(for="s-80") 8
.custom-control.custom-option.custom-control-inline.mb-2
input(type="radio", name="size1", id="s-85").custom-control-input
label.custom-option-label(for="s-85") 8.5
.custom-control.custom-option.custom-control-inline.mb-2
input(type="radio", name="size1", id="s-90").custom-control-input
label.custom-option-label(for="s-90") 9
button(type="button").btn.btn-primary.btn-sm.mb-2
i.czi-cart.font-size-sm.mr-1
| Add to Cart
.text-left
a(href="#").nav-link-style.font-size-ms
i.czi-eye.align-middle.mr-1
| Quick view
Product card alt (Downloadable)
<!-- Product card alt (Downloadable) -->
<div class="card product-card-alt">
<div class="product-thumb">
<button class="btn-wishlist btn-sm" type="button">
<i class="czi-heart"></i>
</button>
<div class="product-card-actions">
<a class="btn btn-light btn-icon btn-shadow font-size-base mx-2" href="#">
<i class="czi-eye"></i>
</a>
<button class="btn btn-light btn-icon btn-shadow font-size-base mx-2" type="button">
<i class="czi-cart"></i>
</button>
</div>
<a class="product-thumb-overlay" href="#"></a>
<img src="path-to-image" alt="Product">
</div>
<div class="card-body">
<div class="d-flex flex-wrap justify-content-between align-items-start pb-2">
<div class="text-muted font-size-xs mr-1">
by <a class="product-meta font-weight-medium" href="#">Createx Std. </a>
in <a class="product-meta font-weight-medium" href="#">Graphics</a>
</div>
<div class="star-rating">
<i class="sr-star czi-star-filled active"></i>
<i class="sr-star czi-star-filled active"></i>
<i class="sr-star czi-star-filled active"></i>
<i class="sr-star czi-star-filled active"></i>
<i class="sr-star czi-star"></i>
</div>
</div>
<h3 class="product-title font-size-sm mb-2">
<a href="#">Floating Phone and Tablet Mockup (PSD)</a>
</h3>
<div class="d-flex flex-wrap justify-content-between align-items-center">
<div class="font-size-sm mr-2">
<i class="czi-download text-muted mr-1"></i>
109
<span class="font-size-xs ml-1">Sales</span>
</div>
<div class="bg-faded-accent text-accent rounded-sm py-1 px-2">$15.<small>00</small></div>
</div>
</div>
</div>// Product card alt (Downloadable)
.card.product-card-alt
.product-thumb
button(type="button").btn-wishlist.btn-sm
i.czi-heart
.product-card-actions
a(href="#").btn.btn-light.btn-icon.btn-shadow.font-size-base.mx-2
i.czi-eye
button(type="button").btn.btn-light.btn-icon.btn-shadow.font-size-base.mx-2
i.czi-cart
a(href="#").product-thumb-overlay
img(src="path-to-image", alt="Product")
.card-body
.d-flex.flex-wrap.justify-content-between.align-items-start.pb-2
.text-muted.font-size-xs.mr-1
| by
a.product-meta.font-weight-medium(href="#") Createx Std.
| in
a.product-meta.font-weight-medium(href="#") Graphics
+star-rating(4)
h3.product-title.font-size-sm.mb-2
a(href="#") Floating Phone and Tablet Mockup (PSD)
.d-flex.flex-wrap.justify-content-between.align-items-center
.font-size-sm.mr-2
i.czi-download.text-muted.mr-1
| 109
span.font-size-xs.ml-1 Sales
.bg-faded-accent.text-accent.rounded-sm.py-1.px-2
| $15.
small 00
Category card
Clothing
- Blazers & Suits235
- Blouse410
- Cardigans & Jumpers107
- Dresses93
- Hoodie & Sweatshirts93
- Sportswear65
- ...
-
- View all2,548
<!-- Category card -->
<div class="card border-0">
<a class="d-block overflow-hidden rounded-lg" href="#">
<img class="d-block w-100" src="path-to-image" alt="Clothing">
</a>
<div class="card-body">
<h2 class="h5">Clothing</h2>
<ul class="list-unstyled font-size-sm mb-0">
<li class="d-flex align-items-center justify-content-between">
<a class="nav-link-style" href="#">
<i class="czi-arrow-right-circle mr-2"></i>
Blazers & Suits
</a>
<span class="font-size-ms text-muted">235</span>
</li>
<li class="d-flex align-items-center justify-content-between">
<a class="nav-link-style" href="#">
<i class="czi-arrow-right-circle mr-2"></i>
Blouse
</a>
<span class="font-size-ms text-muted">410</span>
</li>
<li class="d-flex align-items-center justify-content-between">
<a class="nav-link-style" href="#">
<i class="czi-arrow-right-circle mr-2"></i>
Cardigans & Jumpers
</a>
<span class="font-size-ms text-muted">107</span>
</li>
<li class="d-flex align-items-center justify-content-between">
<a class="nav-link-style" href="#">
<i class="czi-arrow-right-circle mr-2"></i>
Dresses
</a>
<span class="font-size-ms text-muted">93</span>
</li>
<li class="d-flex align-items-center justify-content-between">
<a class="nav-link-style" href="#">
<i class="czi-arrow-right-circle mr-2"></i>
Hoodie & Sweatshirts
</a>
<span class="font-size-ms text-muted">93</span>
</li>
<li class="d-flex align-items-center justify-content-between">
<a class="nav-link-style" href="#">
<i class="czi-arrow-right-circle mr-2"></i>
Sportswear
</a>
<span class="font-size-ms text-muted">65</span>
</li>
<li>...</li>
<li>
<hr>
</li>
<li class="d-flex align-items-center justify-content-between">
<a class="nav-link-style" href="#">
<i class="czi-arrow-right-circle mr-2"></i>
View all
</a>
<span class="font-size-ms text-muted">2,548</span>
</li>
</ul>
</div>
</div>// Category card
.card.border-0
a(href="#").d-block.overflow-hidden.rounded-lg
img(src="path-to-image", alt="Clothing").d-block.w-100
.card-body
h2.h5 Clothing
ul.list-unstyled.font-size-sm.mb-0
li.d-flex.align-items-center.justify-content-between
a(href="#").nav-link-style
i.czi-arrow-right-circle.mr-2
| Blazers & Suits
span.font-size-ms.text-muted 235
li.d-flex.align-items-center.justify-content-between
a(href="#").nav-link-style
i.czi-arrow-right-circle.mr-2
| Blouse
span.font-size-ms.text-muted 410
li.d-flex.align-items-center.justify-content-between
a(href="#").nav-link-style
i.czi-arrow-right-circle.mr-2
| Cardigans & Jumpers
span.font-size-ms.text-muted 107
li.d-flex.align-items-center.justify-content-between
a(href="#").nav-link-style
i.czi-arrow-right-circle.mr-2
| Dresses
span.font-size-ms.text-muted 93
li.d-flex.align-items-center.justify-content-between
a(href="#").nav-link-style
i.czi-arrow-right-circle.mr-2
| Hoodie & Sweatshirts
span.font-size-ms.text-muted 93
li.d-flex.align-items-center.justify-content-between
a(href="#").nav-link-style
i.czi-arrow-right-circle.mr-2
| Sportswear
span.font-size-ms.text-muted 65
li ...
li: hr
li.d-flex.align-items-center.justify-content-between
a(href="#").nav-link-style
i.czi-arrow-right-circle.mr-2
| View all
span.font-size-ms.text-muted 2,548
Product gallery
<!-- Product gallery -->
<div class="cz-product-gallery">
<!-- Preview images with zoom effect -->
<div class="cz-preview order-sm-2">
<div class="cz-preview-item active" id="first">
<img class="cz-image-zoom" src="path-to-preview-image" data-zoom="path-to-large-image" alt="Product image">
<div class="cz-image-zoom-pane"></div>
</div>
<div class="cz-preview-item" id="second">
<img class="cz-image-zoom" src="path-to-preview-image" data-zoom="path-to-large-image" alt="Product image">
<div class="cz-image-zoom-pane"></div>
</div>
<div class="cz-preview-item" id="third">
<img class="cz-image-zoom" src="path-to-preview-image" data-zoom="path-to-large-image" alt="Product image">
<div class="cz-image-zoom-pane"></div>
</div>
<div class="cz-preview-item" id="fourth">
<img class="cz-image-zoom" src="path-to-preview-image" data-zoom="path-to-large-image" alt="Product image">
<div class="cz-image-zoom-pane"></div>
</div>
</div>
<!-- Thumbnails -->
<div class="cz-thumblist order-sm-1">
<a class="cz-thumblist-item active" href="#first">
<img src="path-to-thumbnail" alt="Product thumb">
</a>
<a class="cz-thumblist-item" href="#second">
<img src="path-to-thumbnail" alt="Product thumb">
</a>
<a class="cz-thumblist-item" href="#third">
<img src="path-to-thumbnail" alt="Product thumb">
</a>
<a class="cz-thumblist-item" href="#fourth">
<img src="path-to-thumbnail" alt="Product thumb">
</a>
<a class="cz-thumblist-item video-item" href="link-to-youtube/vimeo-video">
<div class="cz-thumblist-item-text"><i class="czi-video"></i>Video</div>
</a>
</div>
</div>// Product gallery
.cz-product-gallery
// Preview images with zoom effect
.cz-preview.order-sm-2
#first.cz-preview-item.active
img(src="path-to-preview-image", data-zoom="path-to-large-image", alt="Product image").cz-image-zoom
.cz-image-zoom-pane
#second.cz-preview-item
img(src="path-to-preview-image", data-zoom="path-to-large-image", alt="Product image").cz-image-zoom
.cz-image-zoom-pane
#third.cz-preview-item
img(src="path-to-preview-image", data-zoom="path-to-large-image", alt="Product image").cz-image-zoom
.cz-image-zoom-pane
#fourth.cz-preview-item
img(src="path-to-preview-image", data-zoom="path-to-large-image", alt="Product image").cz-image-zoom
.cz-image-zoom-pane
// Thumbnails
.cz-thumblist.order-sm-1
a(href="#first").cz-thumblist-item.active
img(src="path-to-thumbnail", alt="Product thumb")
a(href="#second").cz-thumblist-item
img(src="path-to-thumbnail", alt="Product thumb")
a(href="#third").cz-thumblist-item
img(src="path-to-thumbnail", alt="Product thumb")
a(href="#fourth").cz-thumblist-item
img(src="path-to-thumbnail", alt="Product thumb")
a(href="link-to-youtube/vimeo-video").cz-thumblist-item.video-item
.cz-thumblist-item-text
i.czi-video
| Video
Featured category carousel
For Women
Shop for women
<!-- Featured category carousel -->
<div class="row">
<!-- Banner with controls -->
<div class="col-md-5">
<div class="d-flex flex-column h-100 overflow-hidden rounded-lg" style="background-color: #f6f8fb;">
<div class="d-flex justify-content-between px-grid-gutter py-grid-gutter">
<div>
<h3 class="mb-1">For Women</h3>
<a class="font-size-md" href="#">
Shop for women
<i class="czi-arrow-right font-size-xs align-middle ml-1"></i>
</a>
</div>
<div class="cz-custom-controls" id="for-women">
<button type="button"><i class="czi-arrow-left"></i></button>
<button type="button"><i class="czi-arrow-right"></i></button>
</div>
</div>
<a class="d-none d-md-block mt-auto" href="#">
<img class="d-block w-100" src="path-to-category-image" alt="For Women">
</a>
</div>
</div>
<!-- Product grid (carousel) -->
<div class="col-md-7 pt-4 pt-md-0">
<div class="cz-carousel">
<div class="cz-carousel-inner" data-carousel-options='{"nav": false, "controlsContainer": "#for-women"}'>
<!-- Carousel slide: 6 items -->
<div>
<div class="row mx-n2">
<!-- Item -->
<div class="col-lg-4 col-6 px-0 px-sm-2 mb-sm-4">
<div class="card product-card card-static">
<button class="btn-wishlist btn-sm" type="button" data-toggle="tooltip" data-placement="left" title="Add to wishlist">
<i class="czi-heart"></i>
</button>
<a class="card-img-top d-block overflow-hidden" href="#">
<img src="path-to-image" alt="Product">
</a>
<div class="card-body py-2">
<a class="product-meta d-block font-size-xs pb-1" href="#">Cosmetics</a>
<h3 class="product-title font-size-sm">
<a href="#">Metallic Lipstick (Crimson)</a>
</h3>
<div class="d-flex justify-content-between">
<div class="product-price">
<span class="text-accent">$12.<small>99</small></span>
</div>
<div class="star-rating">
<i class="sr-star czi-star-filled active"></i>
<i class="sr-star czi-star-filled active"></i>
<i class="sr-star czi-star-filled active"></i>
<i class="sr-star czi-star-filled active"></i>
<i class="sr-star czi-star"></i>
</div>
</div>
</div>
</div>
</div>
...
<!-- Item -->
</div>
</div>
...
<!-- Carousel slide: 6 items -->
<!-- Add another slide - set of 6 items -->
</div>
</div>
</div>
</div>// Featured category carousel
.row
// Banner with controls
.col-md-5
.d-flex.flex-column.h-100.overflow-hidden.rounded-lg(style="background-color: #f6f8fb;")
.d-flex.justify-content-between.px-grid-gutter.py-grid-gutter
div
h3.mb-1 For Women
a(href="#").font-size-md
| Shop for women
i.czi-arrow-right.font-size-xs.align-middle.ml-1
#for-women.cz-custom-controls
button(type="button")
i.czi-arrow-left
button(type="button")
i.czi-arrow-right
a(href="#").d-none.d-md-block.mt-auto
img(src="path-to-category-image", alt="For Women").d-block.w-100
// Product grid (carousel)
.col-md-7.pt-4.pt-md-0
.cz-carousel
.cz-carousel-inner(data-carousel-options='{"nav": false, "controlsContainer": "#for-women"}')
// Carousel slide: 6 items
div
.row.mx-n2
.col-6.px-0.px-sm-2.mb-sm-4
.card.product-card.card-static
button(type="button", data-toggle="tooltip", data-placement="left", title="Add to wishlist").btn-wishlist.btn-sm
i.czi-heart
a(href="#").card-img-top.d-block.overflow-hidden
img(src="path-to-image", alt="Product")
.card-body.py-2
a(href="#").product-meta.d-block.font-size-xs.pb-1 Cosmetics
h3.product-title.font-size-sm
a(href="#") Metallic Lipstick (Crimson)
.d-flex.justify-content-between
.product-price
span.text-accent $12.<small>99</small>
+star-rating(4)
// Carousel slide: 6 items
// Add another slide - set of 6 items
Related products carousel
<!-- Related products carousel -->
<div class="cz-carousel cz-controls-static cz-controls-outside">
<div class="cz-carousel-inner" data-carousel-options='{"items": 2, "controls": true, "nav": false, "autoHeight": true, "responsive": {"0":{"items":1},"500":{"items":2, "gutter": 18},"768":{"items":3, "gutter": 20}, "1100":{"items":4, "gutter": 30}}}'>
<!-- Item -->
<div>
<div class="card product-card card-static">
<button class="btn-wishlist btn-sm" type="button" data-toggle="tooltip" data-placement="left" title="Add to wishlist">
<i class="czi-heart"></i>
</button>
<a class="card-img-top d-block overflow-hidden" href="#">
<img src="path-to-image" alt="Product">
</a>
<div class="card-body py-2">
<a class="product-meta d-block font-size-xs pb-1" href="#">Men’s Jeans</a>
<h3 class="product-title font-size-sm"><a href="#">Slim Taper Fit Jeans</a></h3>
<div class="d-flex justify-content-between">
<div class="product-price">
<span class="text-accent">$58.<small>99</small></span>
</div>
<div class="star-rating">
<i class="sr-star czi-star-filled active"></i>
<i class="sr-star czi-star-filled active"></i>
<i class="sr-star czi-star-filled active"></i>
<i class="sr-star czi-star-filled active"></i>
<i class="sr-star czi-star"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Item -->
<div>
<div class="card product-card card-static">
<span class="badge badge-danger badge-shadow">Sale</span>
<button class="btn-wishlist btn-sm" type="button" data-toggle="tooltip" data-placement="left" title="Add to wishlist">
<i class="czi-heart"></i>
</button>
<a class="card-img-top d-block overflow-hidden" href="#">
<img src="path-to-image" alt="Product">
</a>
<div class="card-body py-2">
<a class="product-meta d-block font-size-xs pb-1" href="#">Men’s T-shirts</a>
<h3 class="product-title font-size-sm"><a href="#">Cotton T-shirt Regular Fit</a></h3>
<div class="d-flex justify-content-between">
<div class="product-price">
<span class="text-accent">$9.<small>50</small></span>
<del class="font-size-sm text-muted">$11.<small>50</small></del>
</div>
<div class="star-rating">
<i class="sr-star czi-star-filled active"></i>
<i class="sr-star czi-star-filled active"></i>
<i class="sr-star czi-star-filled active"></i>
<i class="sr-star czi-star"></i>
<i class="sr-star czi-star"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Add as many items as you need -->
</div>
</div>// Related products carousel
.cz-carousel.cz-controls-static.cz-controls-outside
.cz-carousel-inner(data-carousel-options='{"items": 2, "controls": true, "nav": false, "autoHeight": true, "responsive": {"0":{"items":1},"500":{"items":2, "gutter": 18},"768":{"items":3, "gutter": 20}, "1100":{"items":4, "gutter": 30}}}')
// Item
div
.card.product-card.card-static
button(type="button", data-toggle="tooltip", data-placement="left", title="Add to wishlist").btn-wishlist.btn-sm
i.czi-heart
a(href="#").card-img-top.d-block.overflow-hidden
img(src="path-to-image", alt="Product")
.card-body.py-2
a(href="#").product-meta.d-block.font-size-xs.pb-1
| Men’s Jeans
h3.product-title.font-size-sm
a(href="#") Slim Taper Fit Jeans
.d-flex.justify-content-between
.product-price
span.text-accent $58.99
+star-rating(4)
// Item
div
.card.product-card.card-static
span.badge.badge-danger.badge-shadow Sale
button(type="button", data-toggle="tooltip", data-placement="left", title="Add to wishlist").btn-wishlist.btn-sm
i.czi-heart
a(href="#").card-img-top.d-block.overflow-hidden
img(src="path-to-image", alt="Product")
.card-body.py-2
a(href="#").product-meta.d-block.font-size-xs.pb-1
| Men’s T-shirts
h3.product-title.font-size-sm
a(href="#") Cotton T-shirt Regular Fit
.d-flex.justify-content-between
.product-price
span.text-accent $9.50
del.font-size-sm.text-muted $11.50
+star-rating(3)
// Add as many items as you need