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 bg-danger badge-shadow">Sale</span>
<button class="btn-wishlist btn-sm" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist">
<i class="ci-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 fs-xs pb-1" href="#">Women’s T-shirt</a>
<h3 class="product-title fs-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="fs-sm text-muted">38.<small>50</small></del>
</div>
<div class="star-rating">
<i class="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-star"></i>
<i class="star-rating-icon ci-star"></i>
</div>
</div>
</div>
<div class="card-body card-body-hidden">
<div class="text-center pb-2">
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="color1" id="white" checked>
<label class="form-option-label rounded-circle" for="white">
<span class="form-option-color rounded-circle" style="background-color: #eaeaeb;"></span>
</label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="color1" id="blue">
<label class="form-option-label rounded-circle" for="blue">
<span class="form-option-color rounded-circle" style="background-color: #d1dceb;"></span>
</label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="color1" id="yellow">
<label class="form-option-label rounded-circle" for="yellow">
<span class="form-option-color rounded-circle" style="background-color: #f4e6a2;"></span>
</label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="color1" id="pink">
<label class="form-option-label rounded-circle" for="pink">
<span class="form-option-color rounded-circle" style="background-color: #f3dcff;"></span>
</label>
</div>
</div>
<div class="d-flex mb-2">
<select class="form-select form-select-sm me-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="ci-cart fs-sm me-1"></i>
Add to Cart
</button>
</div>
<div class="text-center">
<a class="nav-link-style fs-ms" href="#" data-bs-toggle="modal">
<i class="ci-eye align-middle me-1"></i>
Quick view
</a>
</div>
</div>
</div>// Product card (Grid)
.card.product-card
span.badge.bg-danger.badge-shadow Sale
button(type="button", data-bs-toggle="tooltip", data-bs-placement="left", title="Add to wishlist").btn-wishlist.btn-sm
i.ci-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.fs-xs.pb-1
| Women’s T-shirt
h3.product-title.fs-sm
a(href="#") Cotton Lace Blouse
.d-flex.justify-content-between
.product-price
span.text-accent $28.<small>50</small>
del.fs-sm.text-muted 38.<small>50</small>
+star-rating(3)
.card-body.card-body-hidden
.text-center.pb-2
.form-check.form-option.form-check-inline.mb-2
input(type="radio", name="color1", id="white", checked).form-check-input
label(for="white").form-option-label.rounded-circle
span(style="background-color: #eaeaeb;").form-option-color.rounded-circle
.form-check.form-option.form-check-inline.mb-2
input(type="radio", name="color1", id="blue").form-check-input
label(for="blue").form-option-label.rounded-circle
span(style="background-color: #d1dceb;").form-option-color.rounded-circle
.form-check.form-option.form-check-inline.mb-2
input(type="radio", name="color1", id="yellow").form-check-input
label(for="yellow").form-option-label.rounded-circle
span(style="background-color: #f4e6a2;").form-option-color.rounded-circle
.form-check.form-option.form-check-inline.mb-2
input(type="radio", name="color1", id="pink").form-check-input
label(for="pink").form-option-label.rounded-circle
span(style="background-color: #f3dcff;").form-option-color.rounded-circle
.d-flex.mb-2
select.form-select.form-select-sm.me-2
option XS
option S
option M
option L
option XL
button(type="button").btn.btn-primary.btn-sm
i.ci-cart.fs-sm.me-1
| Add to Cart
.text-center
a(href="#", data-bs-toggle="modal").nav-link-style.fs-ms
i.ci-eye.align-middle.me-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-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist">
<i class="ci-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 fs-xs pb-1" href="#">Sneakers & Keds</a>
<h3 class="product-title fs-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="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-star-half active"></i>
<i class="star-rating-icon ci-star"></i>
</div>
</div>
<div class="card-body card-body-hidden">
<div class="pb-2">
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="size1" id="s-75">
<label class="form-option-label" for="s-75">7.5</label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="size1" id="s-80" checked>
<label class="form-option-label" for="s-80">8</label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="size1" id="s-85">
<label class="form-option-label" for="s-85">8.5</label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="size1" id="s-90">
<label class="form-option-label" for="s-90">9</label>
</div>
</div>
<button class="btn btn-primary btn-sm mb-2" type="button">
<i class="ci-cart fs-sm me-1"></i>
Add to Cart
</button>
<div class="text-start">
<a class="nav-link-style fs-ms" href="#">
<i class="ci-eye align-middle me-1"></i>
Quick view
</a>
</div>
</div>
</div>
</div>
</div>// Product card (List)
.card.product-card.product-list
button(type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist").btn-wishlist.btn-sm
i.ci-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.fs-xs.pb-1
| Sneakers & Keds
h3.product-title.fs-base
a(href="#") Women Colorblock Sneakers
.d-flex.justify-content-between
.product-price
span.text-accent $154.<small>00</small>
+star-rating(3.5)
.card-body.card-body-hidden
.pb-2
.form-check.form-option.form-check-inline.mb-2
input(type="radio", name="size1", id="s-75").form-check-input
label.form-option-label(for="s-75") 7.5
.form-check.form-option.form-check-inline.mb-2
input(type="radio", name="size1", id="s-80" checked).form-check-input
label.form-option-label(for="s-80") 8
.form-check.form-option.form-check-inline.mb-2
input(type="radio", name="size1", id="s-85").form-check-input
label.form-option-label(for="s-85") 8.5
.form-check.form-option.form-check-inline.mb-2
input(type="radio", name="size1", id="s-90").form-check-input
label.form-option-label(for="s-90") 9
button(type="button").btn.btn-primary.btn-sm.mb-2
i.ci-cart.fs-sm.me-1
| Add to Cart
.text-start
a(href="#").nav-link-style.fs-ms
i.ci-eye.align-middle.me-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="ci-heart"></i>
</button>
<div class="product-card-actions">
<a class="btn btn-light btn-icon btn-shadow fs-base mx-2" href="#">
<i class="ci-eye"></i>
</a>
<button class="btn btn-light btn-icon btn-shadow fs-base mx-2" type="button">
<i class="ci-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 fs-xs me-1">
by <a class="product-meta fw-medium" href="#">Createx Std. </a>
in <a class="product-meta fw-medium" href="#">Graphics</a>
</div>
<div class="star-rating">
<i class="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-star"></i>
</div>
</div>
<h3 class="product-title fs-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="fs-sm me-2">
<i class="ci-download text-muted me-1"></i>
109
<span class="fs-xs ms-1">Sales</span>
</div>
<div class="bg-faded-accent text-accent rounded-1 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.ci-heart
.product-card-actions
a(href="#").btn.btn-light.btn-icon.btn-shadow.fs-base.mx-2
i.ci-eye
button(type="button").btn.btn-light.btn-icon.btn-shadow.fs-base.mx-2
i.ci-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.fs-xs.me-1
| by
a.product-meta.fw-medium(href="#") Createx Std.
| in
a.product-meta.fw-medium(href="#") Graphics
+star-rating(4)
h3.product-title.fs-sm.mb-2
a(href="#") Floating Phone and Tablet Mockup (PSD)
.d-flex.flex-wrap.justify-content-between.align-items-center
.fs-sm.me-2
i.ci-download.text-muted.me-1
| 109
span.fs-xs.ms-1 Sales
.bg-faded-accent.text-accent.rounded-1.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-3" 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 fs-sm mb-0">
<li class="d-flex align-items-center justify-content-between">
<a class="nav-link-style" href="#">
<i class="ci-arrow-right-circle me-2"></i>
Blazers & Suits
</a>
<span class="fs-ms text-muted">235</span>
</li>
<li class="d-flex align-items-center justify-content-between">
<a class="nav-link-style" href="#">
<i class="ci-arrow-right-circle me-2"></i>
Blouse
</a>
<span class="fs-ms text-muted">410</span>
</li>
<li class="d-flex align-items-center justify-content-between">
<a class="nav-link-style" href="#">
<i class="ci-arrow-right-circle me-2"></i>
Cardigans & Jumpers
</a>
<span class="fs-ms text-muted">107</span>
</li>
<li class="d-flex align-items-center justify-content-between">
<a class="nav-link-style" href="#">
<i class="ci-arrow-right-circle me-2"></i>
Dresses
</a>
<span class="fs-ms text-muted">93</span>
</li>
<li class="d-flex align-items-center justify-content-between">
<a class="nav-link-style" href="#">
<i class="ci-arrow-right-circle me-2"></i>
Hoodie & Sweatshirts
</a>
<span class="fs-ms text-muted">93</span>
</li>
<li class="d-flex align-items-center justify-content-between">
<a class="nav-link-style" href="#">
<i class="ci-arrow-right-circle me-2"></i>
Sportswear
</a>
<span class="fs-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="ci-arrow-right-circle me-2"></i>
View all
</a>
<span class="fs-ms text-muted">2,548</span>
</li>
</ul>
</div>
</div>// Category card
.card.border-0
a(href="#").d-block.overflow-hidden.rounded-3
img(src="path-to-image", alt="Clothing").d-block.w-100
.card-body
h2.h5 Clothing
ul.list-unstyled.fs-sm.mb-0
li.d-flex.align-items-center.justify-content-between
a(href="#").nav-link-style
i.ci-arrow-right-circle.me-2
| Blazers & Suits
span.fs-ms.text-muted 235
li.d-flex.align-items-center.justify-content-between
a(href="#").nav-link-style
i.ci-arrow-right-circle.me-2
| Blouse
span.fs-ms.text-muted 410
li.d-flex.align-items-center.justify-content-between
a(href="#").nav-link-style
i.ci-arrow-right-circle.me-2
| Cardigans & Jumpers
span.fs-ms.text-muted 107
li.d-flex.align-items-center.justify-content-between
a(href="#").nav-link-style
i.ci-arrow-right-circle.me-2
| Dresses
span.fs-ms.text-muted 93
li.d-flex.align-items-center.justify-content-between
a(href="#").nav-link-style
i.ci-arrow-right-circle.me-2
| Hoodie & Sweatshirts
span.fs-ms.text-muted 93
li.d-flex.align-items-center.justify-content-between
a(href="#").nav-link-style
i.ci-arrow-right-circle.me-2
| Sportswear
span.fs-ms.text-muted 65
li ...
li: hr
li.d-flex.align-items-center.justify-content-between
a(href="#").nav-link-style
i.ci-arrow-right-circle.me-2
| View all
span.fs-ms.text-muted 2,548
Product gallery
<!-- Product gallery -->
<div class="product-gallery">
<!-- Preview images with zoom effect -->
<div class="product-gallery-preview order-sm-2">
<div class="product-gallery-preview-item active" id="first">
<img class="image-zoom" src="path-to-preview-image" data-zoom="path-to-large-image" alt="Product image">
<div class="image-zoom-pane"></div>
</div>
<div class="product-gallery-preview-item" id="second">
<img class="image-zoom" src="path-to-preview-image" data-zoom="path-to-large-image" alt="Product image">
<div class="image-zoom-pane"></div>
</div>
<div class="product-gallery-preview-item" id="third">
<img class="image-zoom" src="path-to-preview-image" data-zoom="path-to-large-image" alt="Product image">
<div class="image-zoom-pane"></div>
</div>
<div class="product-gallery-preview-item" id="fourth">
<img class="image-zoom" src="path-to-preview-image" data-zoom="path-to-large-image" alt="Product image">
<div class="image-zoom-pane"></div>
</div>
</div>
<!-- Thumbnails -->
<div class="product-gallery-thumblist order-sm-1">
<a class="product-gallery-thumblist-item active" href="#first">
<img src="path-to-thumbnail" alt="Product thumb">
</a>
<a class="product-gallery-thumblist-item" href="#second">
<img src="path-to-thumbnail" alt="Product thumb">
</a>
<a class="product-gallery-thumblist-item" href="#third">
<img src="path-to-thumbnail" alt="Product thumb">
</a>
<a class="product-gallery-thumblist-item" href="#fourth">
<img src="path-to-thumbnail" alt="Product thumb">
</a>
<a class="product-gallery-thumblist-item video-item" href="link-to-youtube-video">
<div class="product-gallery-thumblist-item-text"><i class="ci-video"></i>Video</div>
</a>
</div>
</div>// Product gallery
.product-gallery
// Preview images with zoom effect
.product-gallery-preview.order-sm-2
#first.product-gallery-preview-item.active
img(src="path-to-preview-image", data-zoom="path-to-large-image", alt="Product image").image-zoom
.image-zoom-pane
#second.product-gallery-preview-item
img(src="path-to-preview-image", data-zoom="path-to-large-image", alt="Product image").image-zoom
.image-zoom-pane
#third.product-gallery-preview-item
img(src="path-to-preview-image", data-zoom="path-to-large-image", alt="Product image").image-zoom
.image-zoom-pane
#fourth.product-gallery-preview-item
img(src="path-to-preview-image", data-zoom="path-to-large-image", alt="Product image").image-zoom
.image-zoom-pane
// Thumbnails
.product-gallery-thumblist.order-sm-1
a(href="#first").product-gallery-thumblist-item.active
img(src="path-to-thumbnail", alt="Product thumb")
a(href="#second").product-gallery-thumblist-item
img(src="path-to-thumbnail", alt="Product thumb")
a(href="#third").product-gallery-thumblist-item
img(src="path-to-thumbnail", alt="Product thumb")
a(href="#fourth").product-gallery-thumblist-item
img(src="path-to-thumbnail", alt="Product thumb")
a(href="link-to-youtube-video").product-gallery-thumblist-item.video-item
.product-gallery-thumblist-item-text
i.ci-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-3" 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="fs-md" href="#">
Shop for women
<i class="ci-arrow-right fs-xs align-middle ms-1"></i>
</a>
</div>
<div class="tns-carousel-controls" id="for-women">
<button type="button"><i class="ci-arrow-left"></i></button>
<button type="button"><i class="ci-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="tns-carousel">
<div class="tns-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-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist">
<i class="ci-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 fs-xs pb-1" href="#">Cosmetics</a>
<h3 class="product-title fs-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="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-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-3(style="background-color: #f6f8fb;")
.d-flex.justify-content-between.px-grid-gutter.py-grid-gutter
div
h3.mb-1 For Women
a(href="#").fs-md
| Shop for women
i.ci-arrow-right.fs-xs.align-middle.ms-1
#for-women.tns-carousel-controls
button(type="button")
i.ci-arrow-left
button(type="button")
i.ci-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
.tns-carousel
.tns-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-bs-toggle="tooltip", data-bs-placement="left", title="Add to wishlist").btn-wishlist.btn-sm
i.ci-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.fs-xs.pb-1 Cosmetics
h3.product-title.fs-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="tns-carousel tns-controls-static tns-controls-outside">
<div class="tns-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-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist">
<i class="ci-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 fs-xs pb-1" href="#">Men’s Jeans</a>
<h3 class="product-title fs-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="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-star"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Item -->
<div>
<div class="card product-card card-static">
<span class="badge bg-danger badge-shadow">Sale</span>
<button class="btn-wishlist btn-sm" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist">
<i class="ci-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 fs-xs pb-1" href="#">Men’s T-shirts</a>
<h3 class="product-title fs-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="fs-sm text-muted">$11.<small>50</small></del>
</div>
<div class="star-rating">
<i class="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-star"></i>
<i class="star-rating-icon ci-star"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Add as many items as you need -->
</div>
</div>// Related products carousel
.tns-carousel.tns-controls-static.tns-controls-outside
.tns-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-bs-toggle="tooltip", data-bs-placement="left", title="Add to wishlist").btn-wishlist.btn-sm
i.ci-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.fs-xs.pb-1
| Men’s Jeans
h3.product-title.fs-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.bg-danger.badge-shadow Sale
button(type="button", data-bs-toggle="tooltip", data-bs-placement="left", title="Add to wishlist").btn-wishlist.btn-sm
i.ci-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.fs-xs.pb-1
| Men’s T-shirts
h3.product-title.fs-sm
a(href="#") Cotton T-shirt Regular Fit
.d-flex.justify-content-between
.product-price
span.text-accent $9.50
del.fs-sm.text-muted $11.50
+star-rating(3)
// Add as many items as you need
Product bundle
Frequently Bought Together
<!-- Product bundle section -->
<div class="border rounded-3">
<div class="row g-0">
<!-- Products -->
<div class="col-xxl-9 col-lg-8 col-md-8">
<div class="p-4 pt-5 p-lg-5">
<h3 class="text-center text-sm-start">Frequently Bought Together</h3>
<div class="d-sm-flex align-items-center pt-4 mb-4">
<!-- Product -->
<div class="card product-card card-static mx-auto" style="max-width: 18rem;">
<button class="btn-wishlist btn-sm" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist">
<i class="ci-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 fs-xs pb-1" href="#">Sneakers & Keds</a>
<h3 class="product-title fs-sm">
<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="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-star-half active"></i>
<i class="star-rating-icon ci-star"></i>
</div>
</div>
</div>
</div>
<div class="h2 fw-light py-2 py-sm-0 px-sm-2 text-center">+</div>
<!-- Product -->
<div class="card product-card card-static mx-auto" style="max-width: 18rem;">
<button class="btn-wishlist btn-sm" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist">
<i class="ci-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 fs-xs pb-1" href="#">Women's Shorts</a>
<h3 class="product-title fs-sm">
<a href="#">Mom High Waist Shorts</a>
</h3>
<div class="d-flex justify-content-between">
<div class="product-price">
<span class="text-accent">$39.<small>00</small></span>
</div>
<div class="star-rating">
<i class="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-star-filled active"></i>
<i class="star-rating-icon ci-star"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Checkboxes -->
<div class="border-top pt-4">
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="check-1" checked disabled>
<label class="form-check-label opacity-100" for="check-1"><strong>This product:</strong> Women Colorblock Sneakers <strong class='text-accent'>$154.<small>00</small></strong></label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check-2" checked>
<label class="form-check-label opacity-100" for="check-2">Mom High Waist Shorts <strong class='text-accent'>$39.<small>00</small></strong></label>
</div>
</div>
</div>
</div>
<!-- Totals -->
<div class="col-xxl-3 col-lg-4 col-md-4 d-flex flex-column justify-content-center border-start">
<div class="p-4 pb-5 py-lg-5 px-xxl-5 text-center">
<div class="h3 text-accent">$193.<small>00</small></div>
<p class="text-muted">For 2 item(s)</p>
<a class="btn btn-primary btn-shadow" href="#">
<i class="ci-cart fs-lg me-2"></i>Add to Cart
</a>
</div>
</div>
</div>
</div>// Product bundle section
.border.rounded-3
.row.g-0
// Products
.col-xxl-9.col-lg-8.col-md-8
.p-4.pt-5.p-lg-5
h3.text-center.text-sm-start Frequently Bought Together
.d-sm-flex.align-items-center.pt-4.mb-4
// Product
.card.product-card.card-static.mx-auto(style="max-width: 18rem;")
button(type="button", data-bs-toggle="tooltip", data-bs-placement="left", title="Add to wishlist").btn-wishlist.btn-sm
i.ci-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.fs-xs.pb-1
| Sneakers & Keds
h3.product-title.fs-sm
a(href="#") Women Colorblock Sneakers
.d-flex.justify-content-between
div.product-price
span.text-accent $154.<small>00</small>
+star-rating(3.5)
.h2.fw-light.py-2.py-sm-0.px-sm-2.text-center +
// Product
.card.product-card.card-static.mx-auto(style="max-width: 18rem;")
button(type="button", data-bs-toggle="tooltip", data-bs-placement="left", title="Add to wishlist").btn-wishlist.btn-sm
i.ci-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.fs-xs.pb-1 Women's Shorts
h3.product-title.fs-sm
a(href="#") Mom High Waist Shorts
.d-flex.justify-content-between
div.product-price
span.text-accent $39.<small>00</small>
+star-rating(4)
// Checkboxes
.border-top.pt-4
.form-check.mb-2
input(type="checkbox", id="check-1", checked, disabled).form-check-input
label(for="check-1").form-check-label.opacity-100
| <strong>This product:</strong> Women Colorblock Sneakers <strong class="text-accent">$154.<small>00</small></strong>
.form-check
input(type="checkbox", id="check-2", checked).form-check-input
label(for="check-2").form-check-label.opacity-100
| Mom High Waist Shorts <strong class="text-accent">$39.<small>00</small></strong>
// Totals
.col-xxl-3.col-lg-4.col-md-4.d-flex.flex-column.justify-content-center.border-start
.p-4.pb-5.py-lg-5.px-xxl-5.text-center
.h3.text-accent $193.<small>00</small>
p.text-muted For 2 item(s)
a(href="#").btn.btn-primary.btn-shadow
i.ci-cart.fs-lg.me-2
| Add to Cart
Interactive credit card form
<!-- Interactive credit card form -->
<div class="credit-card-wrapper"></div>
<form class="credit-card-form row g-3">
<div class="col-sm-6">
<input type="text" class="form-control" name="number" placeholder="Card Number" required>
</div>
<div class="col-sm-6">
<input type="text" class="form-control" name="name" placeholder="Full Name" required>
</div>
<div class="col-sm-3">
<input type="text" class="form-control" name="expiry" placeholder="MM/YY" required>
</div>
<div class="col-sm-3">
<input type="text" class="form-control" name="cvc" placeholder="CVC" required>
</div>
<div class="col-sm-6">
<button type="submit" class="btn btn-primary d-block w-100">Submit</button>
</div>
</form>
// Interactive credit card form
.credit-card-wrapper
form.credit-card-form.row.g-3
.col-sm-6
input(type="text", name="number", placeholder="Card Number", required).form-control
.col-sm-6
input(type="text", name="name", placeholder="Full Name", required).form-control
.col-sm-3
input(type="text", name="expiry", placeholder="MM/YY", required).form-control
.col-sm-3
input(type="text", name="cvc", placeholder="CVC", required).form-control
.col-sm-6
button(type="submit").btn.btn-primary.d-block.w-100
| Submit