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 (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 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="#">Themesbrand </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>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>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>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>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>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>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>