Gearing up something amazing for you…
Still waiting? Magic takes a moment! ✨
<button class="rbt-cart-sidenav-activation">Cart Offcanvas</button>
<div class="rbt-cart-side-menu rbt-sidebar-cart">
<div class="inner-wrapper">
<div class="inner-top">
<div class="rbt-cart-header">
<div class="title-section">
<h6 class="title mb--0"><i class="fa-sharp fa-regular fa-cart-shopping mr--12"></i> Your cart</h6>
</div>
<div class="rbt-quick-info-tag d-flex mt--16 rbt-flash-animation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.9706 14.9359C18.8148 18.8649 15.7493 22 11.9891 22C8.12909 22 5 18.5858 5 14.6221C5 14.0924 4.99101 13.0336 5.74352 11.2472C6.19387 10.1781 6.47633 9.50646 6.63574 8.89253C6.72333 8.55511 6.89367 8.01904 7.37926 8.89253C7.66559 9.40757 7.67666 10.1483 7.67666 10.1483C7.67666 10.1483 8.74197 9.28536 9.4611 7.63673C10.5153 5.21985 9.67419 3.77512 9.38675 2.77048C9.28727 2.42294 9.22481 1.79833 9.90721 2.06409C10.6025 2.33495 12.4408 3.69334 13.4017 5.12512C14.7732 7.16855 15.2605 9.128 15.2605 9.128C15.2605 9.128 15.6997 8.55268 15.8553 7.95068C16.0312 7.27089 16.0338 6.59763 16.5988 7.32285C17.1361 8.01253 17.9341 9.3086 18.3833 10.5408C19.1989 12.7784 18.9706 14.9359 18.9706 14.9359Z" fill="url(#paint0_linear_47_23657)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9999 22C9.23852 22 7 19.7944 7 17.0735C7 15.4318 7.67145 14.435 9.0689 13.0833C9.96366 12.2179 10.8011 11.1549 11.157 10.4311C11.2271 10.2886 11.3866 9.54605 12.0014 10.4155C12.3239 10.8714 12.8296 11.6823 13.1538 12.3744C13.7127 13.5676 13.8461 14.7239 13.8461 14.7239C13.8461 14.7239 14.3938 14.4059 14.7692 13.5871C14.8902 13.3232 15.1348 12.3241 15.8186 13.323C16.3204 14.0561 17.0097 15.3741 16.9999 17.0735C16.9999 19.7944 14.7613 22 11.9999 22Z" fill="#FC9502"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.1019 16C12.8497 16 12.8497 17.4475 13.7996 19.3803C14.4321 20.6672 13.486 22 12.1019 22C10.7178 22 10 20.8271 10 19.3803C10 17.9335 11.3541 16 12.1019 16Z" fill="#FCE202"/>
<defs>
<linearGradient id="paint0_linear_47_23657" x1="11.9995" y1="22.0148" x2="11.9995" y2="2.01511" gradientUnits="userSpaceOnUse">
<stop offset="1" stop-color="#FF4C0D"/>
<stop offset="1" stop-color="#FC9502"/>
</linearGradient>
</defs>
</svg>
<p>Limited Item, <strong>checkout within <span class="rbt-countdown-cart">10m 00s</span></strong></p>
</div>
<div class="rbt-btn-close" id="btn_sideNavClose">
<button class="minicart-close-button rbt-round-btn"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<nav class="side-nav w-100">
<ul class="rbt-minicart-wrapper">
<li class="minicart-item">
<div class="thumbnail">
<a href="#">
<img src="assets/images/product-img/cart-product/cart-product-01.webp" alt="Product Image">
</a>
</div>
<div class="product-content">
<h6 class="title"><a href="#">Apple 12inch iPad </a></h6>
<span class="quantity">1x <span class="price">$359.00</span></span>
<div class="bottom-part">
<div class="rbt-qty-area">
<button class="qty-item-btn qty-item-btn-decr"><i class="fa-solid fa-minus"></i></button>
<input type="number" class="items-qty-input" value="01" min="1">
<button class="qty-item-btn qty-item-btn-incr"><i class="fa-solid fa-plus"></i></button>
</div>
<button class="edit-btn" type="button" data-bs-toggle="modal" data-bs-target="#quickviewEditCartModal"><i class="fa-regular fa-pen"></i> Edit</button>
</div>
</div>
<div class="close-btn">
<button class="rbt-round-btn"><i class="fa-solid fa-xmark"></i></button>
</div>
</li>
<li class="minicart-item">
<div class="thumbnail">
<a href="#">
<img src="assets/images/product-img/cart-product/cart-product-02.webp" alt="Product Image">
</a>
</div>
<div class="product-content">
<h6 class="title"><a href="#">Apple Watch 8 Pro </a></h6>
<span class="quantity">1x <span class="price">$288.00</span></span>
<div class="bottom-part">
<div class="rbt-qty-area">
<button class="qty-item-btn qty-item-btn-decr"><i class="fa-solid fa-minus"></i></button>
<input type="number" class="items-qty-input" value="01" min="1">
<button class="qty-item-btn qty-item-btn-incr"><i class="fa-solid fa-plus"></i></button>
</div>
<button class="edit-btn" type="button" data-bs-toggle="modal" data-bs-target="#quickviewEditCartModal"><i class="fa-regular fa-pen"></i> Edit</button>
</div>
</div>
<div class="close-btn">
<button class="rbt-round-btn"><i class="fa-solid fa-xmark"></i></button>
</div>
</li>
</ul>
</nav>
</div>
<div class="rbt-minicart-footer">
<div class="minicart-quick-access-area">
<a href="#" class="single-quick-access rbt-note-btn">
<span class="icon"><i class="fa-regular fa-pen"></i></span>
<span class="text">Note</span>
</a>
<span class="hr-sepator"></span>
<a href="#" class="single-quick-access rbt-shipping-btn">
<span class="icon"><i class="fa-regular fa-truck-fast"></i></span>
<span class="text">Shipping</span>
</a>
<span class="hr-sepator"></span>
<a href="#" class="single-quick-access rbt-coupon-btn">
<span class="icon"><i class="fa-regular fa-ticket"></i></span>
<span class="text">Coupon</span>
</a>
</div>
<div class="minicart-inc-items-area mt--12">
<h6 class="title positin-top">You May Also Like</h6>
<div class="bottom-area">
<div class="swiper rbt-dot-top-right inc-item-swiper-activation rbt-minicart-wrapper">
<div class="swiper-wrapper">
<!-- single slide -->
<div class="swiper-slide">
<div class="minicart-item">
<div class="thumbnail">
<a href="#">
<img src="assets/images/product-img/cart-product/cart-product-sm-01.webp" alt="Product Image">
</a>
</div>
<div class="product-content">
<h6 class="title"><a href="#">Apple 12inch iPad </a></h6>
<span class="quantity"><span class="price">$359.00</span></span>
</div>
<a href="#" class="add-itembtn tooltips" data-tooltip="Add to Cart"><i class="fa-regular fa-cart-plus"></i></a>
</div>
</div>
<!-- single slide -->
<div class="swiper-slide">
<div class="minicart-item">
<div class="thumbnail">
<a href="#">
<img src="assets/images/product-img/cart-product/cart-product-sm-01.webp" alt="Product Image">
</a>
</div>
<div class="product-content">
<h6 class="title"><a href="#">Apple 12inch iPad </a></h6>
<span class="quantity"><span class="price">$359.00</span></span>
</div>
<a href="#" class="add-itembtn tooltips" data-tooltip="Add to Cart"><i class="fa-regular fa-cart-plus"></i></a>
</div>
</div>
</div>
<div class="rbt-swiper-pagination"></div>
</div>
</div>
</div>
<hr class="mb--0 mt--16">
<div class="rbt-cart-subttotal">
<p>Subtotal (2 items)</p>
<p class="price">$758.00</p>
</div>
<div class="rbt-cart-subttotal">
<p>Shipping</p>
<p class="price">$10.00</p>
</div>
<hr class="mb--0">
<div class="rbt-cart-subttotal">
<p class="subtotal"><strong>Total</strong></p>
<p class="price">$768.00</p>
</div>
<div class="offer-progress-area">
<p class="offer-text">Add <strong>$248.00</strong> More To Get <strong>Free Shipping</strong></p>
<div class="progress" role="progressbar" aria-label="Shipping-progress" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar w-75"></div>
</div>
</div>
<div class="rbt-minicart-bottom mt--24">
<div class="checkout-btn mt--20">
<a class="rbt-btn w-100 text-center" href="#">
<span class="btn-text">Checkout</span>
</a>
</div>
<div class="share-btn-grp">
<a href="#" class="share-btn"><i class="fa-regular fa-pen mr--4"></i> View Cart</a>
<button data-bs-toggle="modal" data-bs-target="#socialShareModal" type="button" class="share-btn"><i class="fa-sharp fa-solid fa-link mr--4"></i> Share Cart</button>
</div>
</div>
</div>
</div>
<!-- notes -->
<div class="rbt-offcanvas-inner-popup">
<div class="rbt-offcanvas-inner-popup-card note-popup">
<div class="rbt-offcanvas-card-inner">
<h6 class="rbt-title rbt-text-bold">
<span class="mr--4"><i class="fa-regular fa-pen"></i></span>
Add note for seller
</h6>
<form>
<div class="rbt-input-field-grp mb--12">
<textarea class="rbt-text-field" name="message"
placeholder="Notes about your order, e.g. special notes for delivery."></textarea>
</div>
<div class="rbt-btn-group mt--16">
<button class="rbt-btn rbt-btn-md rbt-btn-primary d-block w-100">Apply</button>
<button class="rbt-btn rbt-btn-md rbt-btn-naked d-block w-100 mt--8 mb--8 rbt-popup-close-btn">Cancel</button>
</div>
</form>
</div>
</div>
</div>
<!-- shipping -->
<div class="rbt-offcanvas-inner-popup">
<div class="rbt-offcanvas-inner-popup-card shipping-popup">
<div class="rbt-offcanvas-card-inner">
<h6 class="rbt-title rbt-text-bold">
<span class="mr--4"><i class="fa-light fa-truck-fast"></i></span>
Estimate shipping rates
</h6>
<form>
<div class="rbt-input-field-grp mb--12">
<div class="rbt-dropdown-select filter-select rbt-modern-select search-by-category">
<select class="w-100 rbt-select-activation">
<option>United Kingdom (UK)</option>
<option>United States (US)</option>
<option>Bangladesh</option>
<option>United Arab Emirates</option>
</select>
</div>
</div>
<div class="rbt-input-field-grp mb--12">
<input type="text" placeholder="State / County">
</div>
<div class="rbt-input-field-grp mb--12">
<input type="text" placeholder="City">
</div>
<div class="rbt-input-field-grp">
<input type="text" placeholder="Postcode / ZIP">
</div>
<div class="rbt-btn-group mt--16">
<button class="rbt-btn rbt-btn-md rbt-btn-primary d-block w-100">Calculate shipping rates</button>
<button class="rbt-btn rbt-btn-md rbt-btn-naked d-block w-100 mt--8 mb--8 rbt-popup-close-btn">Cancel</button>
</div>
</form>
</div>
</div>
</div>
<!-- coupon -->
<div class="rbt-offcanvas-inner-popup">
<div class="rbt-offcanvas-inner-popup-card coupon-popup">
<div class="rbt-offcanvas-card-inner">
<h6 class="rbt-title rbt-text-bold">
<span class="mr--4"><i class="fa-regular fa-ticket"></i></span>
Select or input Coupon
</h6>
<div class="rbt-coupon-wrapper rbt-bg-color-white">
<div class="rbt-coupon">
<div class="inner rbt-text-copy-activation">
<div class="left-part">
<input type="text" value="WELCOME100" readonly class="rbt-coupon-code-text rbt-has-right-shepe-border rbt-copy-value-field">
</div>
<div class="coupon-details">
<h2 class="rbt-coupon-info-title b1">UP TO 30% OFF</h2>
<p class="rbt-coupon-info-sub-title b3 mt--4">For orders over $9.90</p>
<ul class="rbt-coupon-info-list mt--12">
<li><span>12/18/2023 14:00 ~ 12/25/2023 14:00</span></li>
<li><span>The minimum spend for this coupon <strong>$200.00</strong></span></li>
</ul>
</div>
<button class="copy-icon rbt-round-btn rbt-bg-primary rbt-copy-btn" data-tooltip="Copy">
<i class="fa-sharp fa-regular fa-copy"></i>
</button>
</div>
</div>
<div class="rbt-coupon">
<div class="inner rbt-text-copy-activation">
<div class="left-part">
<input type="text" value="WELCOME100" readonly class="rbt-coupon-code-text rbt-has-right-shepe-border rbt-copy-value-field">
</div>
<div class="coupon-details">
<h2 class="rbt-coupon-info-title b1">UP TO 30% OFF</h2>
<p class="rbt-coupon-info-sub-title b3 mt--4">For orders over $9.90</p>
<ul class="rbt-coupon-info-list mt--12">
<li><span>12/18/2023 14:00 ~ 12/25/2023 14:00</span></li>
<li><span>The minimum spend for this coupon <strong>$200.00</strong></span></li>
</ul>
</div>
<button class="copy-icon rbt-round-btn rbt-bg-primary rbt-copy-btn" data-tooltip="Copy">
<i class="fa-sharp fa-regular fa-copy"></i>
</button>
</div>
</div>
</div>
<form>
<div class="rbt-input-field-grp mt--24">
<p class="b1 mb--12 rbt-text-color-gray-600">If you have coupon code, please apply it below.</p>
<input type="text" placeholder="Coupon code">
</div>
<div class="rbt-btn-group mt--16">
<button class="rbt-btn rbt-btn-md rbt-btn-primary d-block w-100">Apply</button>
<button class="rbt-btn rbt-btn-md rbt-btn-naked d-block w-100 mt--8 mb--8 rbt-popup-close-btn">Cancel</button>
</div>
</form>
</div>
</div>
</div>
</div>
<button class="rbt-special-offprds-offcanvas-activation">Special Offers</button>
<div class="rbt-special-offprds-side-menu rbt-special-offer-sidemenu">
<div class="inner-wrapper p--0">
<aside class="rbt-sidebar">
<div class="rbt-sidebar-widget-wrapper rbt-sidebar-bg-one">
<div class="rbt-sidebar-top sticky-top-0 rbt-bg-color-white">
<h6 class="rbt-sidebar-title mb--0 h-auto"><i class="fa-sharp fa-regular fa-filter-list mr--4"></i>
Special Offers
</h6>
<button class="rbt-sidebar-close-btn" id="btn_filtersideNavClose">
<i class="fa-sharp fa-solid fa-xmark"></i>
</button>
</div>
<div class="rbt-sidebar-bottom border-0">
<div class="row row--12 mt_dec--24">
<!-- Start Single Card -->
<div class="col-12 col-md-12 col-lg-12 mt--24">
<div class="rbt-card rbt-offer-card">
<div class="inner">
<div class="rbt-card-img">
<a href="#">
<img src="assets/images/offer-list/offer-card-image-1.webp" alt="Offer Thumbnail">
</a>
</div>
<div class="rbt-card-body">
<div class="ofr-meta-part">
<div class="single-meta">
<i class="fa-sharp fa-regular fa-calendar"></i>
26 May 2024 - 16 Jun 2024
</div>
<div class="single-meta">
<a href="#">
<i class="fa-regular fa-shop"></i>
All Outlet
</a>
</div>
</div>
<hr class="rbt-separator rbt-separator-gray200 mt--16 mb--24 rbt-bg-color-gray-100">
<div class="rbt-ofr-card-content text-center mb--16">
<h6 class="rbt-ofr-card-title mb--8 rbt-text-semi-bold">
<a href="#">Summer Mobile Fest</a>
</h6>
<p class="rbt-ofr-card-text mb--24 b1 rbt-text-color-gray-500">Exciting Discounts on
Selected
Smartphone!</p>
<a class="rbt-btn rbt-btn-md active" href="#">View
Details</a>
</div>
</div>
</div>
</div>
</div>
<!-- End Single Card -->
...
</div>
</div>
</div>
</aside>
</div>
</div>
<button class="rbt-cat-offcanvas-activation"><i class="fa-sharp fa-regular fa-bars"></i> Categories</button>
<div class="rbt-offcanvas-cat-side-menu rbt-category-sidemenu ">
<div class="inner-wrapper">
<div class="rbt-categories-sidebar d-flex">
<div class="rbt-sidebar-left-content">
<div class="rbt-sidebar-left-inner">
<!-- Start sidebar left header -->
<div class="rbt-sidebar-left-content-head">
<div class="rbt-categories-sidebar-top-content mb--24">
logo
<button class="rbt-sidebar-close-btn">
<i class="fa-sharp fa-solid fa-xmark"></i>
</button>
</div>
<div class="rbt-access-box rbt-scroll-trigger fade_in animation-order-1 rbt-access-box-has-bg-hover rbt-access-box-has-bg-hover-white d-inline-block">
<a href="#!" class="rbt-access-box-wrapper" data-bs-toggle="modal" data-bs-target="#signinModal">
<div class="rbt-round-btn rbt-bg-color-brand-300 rbt-text-color-primary has-rbt-sm-fsize">
<i class="fa-regular fa-user"></i>
</div>
<div class="content">
<p>Log in/Sign Up</p>
<span>Access Account</span>
</div>
</a>
</div>
</div>
<!-- End sidebar left header -->
<div class="rbt-sidebar-tabs-wrapper">
<div class="rbt-sidebar-tabs-inner">
<!-- Start tabs -->
<ul class="rbt-sidebar-sub-categories nav flex-column nav-pills" id="v-pills-tab"
role="tablist" aria-orientation="vertical">
<li>
<button class="rbt-nav-link nav-link" id="rbt-tab-cat-sidebar-1" data-bs-toggle="pill" data-bs-target="#rbt-nav-pill-1" type="button" role="tab" aria-controls="rbt-nav-pill-1" aria-selected="true">
<span class="rbt-round-btn">
<i class="fa-regular fa-camera"></i>
</span>
<span class="rbt-content">
<span class="rbt-sub-category-title">
<span>Camera & Photo</span>
</span>
<span class="description">Popular Camera & Photo accessories</span>
</span>
<span class="icon">
<i class="fa-regular fa-chevron-right"></i>
</span>
</button>
</li>
<li>
<button class="rbt-nav-link nav-link" id="rbt-tab-cat-sidebar-2" data-bs-toggle="pill" data-bs-target="#rbt-nav-pill-2" type="button" role="tab" aria-controls="rbt-nav-pill-2" aria-selected="false">
<span class="rbt-round-btn">
<i class="fa-regular fa-watch-apple"></i>
</span>
<span class="rbt-content">
<span class="rbt-sub-category-title">
<span>All Watches</span>
<span
class="rbt-product-badge rbt-product-badge-bg-primary">EXCLUSIVE</span>
</span>
<span class="description">Pages with a demonstration
of Smartwatches</span>
</span>
<span class="icon">
<i class="fa-regular fa-chevron-right"></i>
</span>
</button>
</li>
...
</ul>
<!-- End tabs -->
<!-- Start quick links -->
<div class="rbt-sidebar-quick-links-part">
<div class="rbt-sidebar-bottom-inner">
<hr class="rbt-separator rbt-separator-gray200 mb--24">
<nav class="rbt-sidebar-nav">
<h6 class="rbt-sub-category-title">
<a data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Quick Links
<span class="icon"><i class="fa-regular fa-chevron-down"></i></span>
</a>
</h6>
<div class="collapse" id="collapseExample">
<ul class="rbt-sidebar-quick-links">
<li><a href="#">Nav Item</a></li>
...
</ul>
</div>
</nav>
<hr class="rbt-separator rbt-separator-gray200 mb--24 mt--24">
<nav class="rbt-sidebar-nav">
<h6 class="rbt-sub-category-title">
<a data-bs-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample2">
More Links
<span class="icon"><i class="fa-regular fa-chevron-down"></i></span>
</a>
</h6>
<div class="collapse" id="collapseExample2">
<ul class="rbt-sidebar-quick-links">
<li><a href="#">Nav Item</a></li>
...
</ul>
</div>
</nav>
</div>
</div>
<!-- End quick links -->
</div>
</div>
<!-- Start sidebar footer -->
<div class="rbt-sidebar-left-content-footer">
<div class="rbt-sidebar-contact-area">
<div class="rbt-sidebar-contact-inner rbt-link-hover">
<p class="rbt-contact-text">Boston, 44 Main street</p>
<a class="rbt-contact-links" href="callto:+1(917)722-7425">+1(917)722-7425 (the call is
free)</a>
<p class="rbt-contact-text mt--12">Mon-Sun 9.00 - 18.00</p>
<a class="rbt-contact-links" href="mailto:demo@example.com">demo@example.com</a>
<a class="rbt-contact-links d-block" href="#">View on map</a>
</div>
</div>
</div>
<!-- End sidebar footer -->
</div>
</div>
<div class="rbt-sidebar-right-content">
<div class="rbt-sidebar-right-inner">
<!-- Start tab content -->
<div class="tab-content" id="v-pills-tabContent">
<!-- Single Category Tab content -->
<div class="rbt-tab-content tab-pane fade show active" id="rbt-nav-pill-1" role="tabpanel" aria-labelledby="rbt-tab-cat-sidebar-1" tabindex="0">
<div class="rbt-sub-category-products">
<div class="rbt-category-products-inner">
<!-- Start product singel -->
<div class="rbt-sub-category-product">
<a href="#" class="rbt-sidebar-category-img">
<img src="..." alt="Product Image">
</a>
<h6 class="rbt-header"><a href="#">Action Camera</a></h6>
<ul class="rbt-product-features has-link-underline-effect">
<li><a href="#">Sports Cameras</a></li>
<li><a href="#">Underwater Cameras</a></li>
<li><a href="#">360 Cameras</a></li>
</ul>
</div>
<!-- End product singel -->
<!-- Start product singel -->
<div class="rbt-sub-category-product">
<a href="#" class="rbt-sidebar-category-img">
<img src="..." alt="Product Image">
</a>
<h6 class="rbt-header"><a href="#">Camera lenses</a></h6>
<ul class="rbt-product-features has-link-underline-effect">
<li><a href="#">VR Cameras</a></li>
<li><a href="#">Panoramic Cameras </a></li>
<li><a href="#">3D Cameras</a></li>
</ul>
</div>
<!-- End product singel -->
</div>
<!-- Start banner -->
<div class="rbt-sidebar-banner">
<div class="rbt-banner-img">
<img src="assets/images/product-img/sidebar-category/product-banner.webp" alt="Banner Image">
</div>
<div class="rbt-sidebar-banner-content">
<p class="rbt-sidebar-banner-text">Camera Accessories
<span class="rbt-text-color-primary rbt-text-semi-bold ml--4">11th December</span>
</p>
<h4 class="rbt-sidebar-banner-titile">Up to 40% Off <span class="rbt-text-regular">On All Brands</span></h4>
<a href="#" class="rbt-btn rbt-btn-sm">Know More</a>
</div>
</div>
<!-- End banner -->
</div>
</div>
<!-- Single Category Tab content -->
<div class="rbt-tab-content tab-pane fade" id="rbt-nav-pill-2" role="tabpanel" aria-labelledby="rbt-tab-cat-sidebar-2" tabindex="0">
<div class="rbt-sub-category-products">
<div class="rbt-category-products-inner">
<!-- Start product singel -->
<div class="rbt-sub-category-product">
<a href="#" class="rbt-sidebar-category-img">
<img src="..." alt="Product Image">
</a>
<h6 class="rbt-header"><a href="shop-by-categories.html">Fitness Tracker</a>
</h6>
<ul class="rbt-product-features has-link-underline-effect">
<li><a href="#">Smart Bands</a></li>
<li><a href="#">Heart Rate Monitors</a></li>
<li><a href="#">Sleep Trackers</a></li>
</ul>
</div>
<!-- End product singel -->
...
</div>
<!-- Start banner -->
<div class="rbt-sidebar-banner">
<div class="rbt-banner-img">
<img src="..." alt="Banner Image">
</div>
<div class="rbt-sidebar-banner-content">
<p class="rbt-sidebar-banner-text">Starting From <span class="rbt-text-color-primary rbt-text-semi-bold ml--4">11th December</span></p>
<h4 class="rbt-sidebar-banner-titile">Up to 40% Off <span class="rbt-text-regular">On All Brands</span></h4>
<a href="#" class="rbt-btn rbt-btn-sm">Know More</a>
</div>
</div>
<!-- End banner -->
</div>
</div>
...
</div>
<!-- End tab content -->
</div>
</div>
</div>
</div>
</div>
By default filter offcanvas appear on left side of the window. You can change the side as you need such as left, right, top and .start-from-left or .start-from-right or .start-from-top or .start-from-bottom.
<button class="rbt-btn rbt-filter-offcanvas-activation"><i class="fa-sharp fa-regular fa-filter mr--4"></i><span class="filter-text">Filter Offcanvas</span></button>
<!-- Start Side Nav -->
<div class="rbt-filter-offcanvas-area side-menu start-from-left">
<div class="inner-wrapper p--32">
<aside class="rbt-sidebar position-sticky sticky-top">
<div class="rbt-sidebar-widget-wrapper rbt-sidebar-bg-one position-relative">
<button class="rbt-sidebar-close-btn">
<i class="fa-sharp fa-solid fa-xmark"></i>
</button>
<div class="rbt-sidebar-top">
<h6 class="rbt-sidebar-title"><i class="fa-sharp fa-regular fa-filter-list mr--4"></i>
Filter & Refine
</h6>
</div>
<div class="rbt-sidebar-bottom">
<!-- Single Filter Widget -->
<div class="rbt-single-widget rbt-widget-categories">
<div class="bt-single-widget-inner">
<h4 class="rbt-widget-title rbt-widget-title-without-border">
<a data-bs-toggle="collapse" href="#rbt-collapse-3" role="button" aria-expanded="false" aria-controls="rbt-collapse-3">
Categories
<span class="icon"><i class="fa-regular fa-chevron-down"></i></span>
</a>
</h4>
<div class="collapse show" id="rbt-collapse-3">
<ul class="rbt-sidebar-list-wrapper rbt-categories-list-check">
<li class="rbt-check-group">
<input id="cat-list-1" type="checkbox" name="cat-list-1">
<label for="cat-list-1">Accessories <span class="rbt-lable count">(96)</span></label>
</li>
<li class="rbt-check-group">
<input id="cat-list-2" type="checkbox" name="cat-list-2">
<label for="cat-list-2">Best seller <span class="rbt-lable count">(12)</span></label>
</li>
...
</ul>
</div>
</div>
</div>
...
</div>
</div>
</aside>
</div>
</div>
<!-- End Side Nav -->