Base Elements
Template Elements
Template Elements
E-Commerce
Base Elements
Template Elements
Template Elements
E-Commerce
Gearing up something amazing for you…
Still waiting? Magic takes a moment! ✨
Unimart is a E-commerce Template. Worldwide electronics store since 1978.
Limited Item, checkout within 10m 00s
Subtotal (2 items)
$758.00
Shipping
$10.00
Total
$768.00
Add $248.00 More To Get Free Shipping
For orders over $9.90
For orders over $9.90
<div class="rbt-single-product-media-area position-sticky-top d-flex row row--12 rbt-gap--0">
<div class="col-lg-1-5">
<div class="swiper product-single-slider-two-thumb-activation rbt-arrow-show-dfl rbt-thumb-has-bg-shape-overlay rbt-swiper-right-bottom-one rbt-arrow-between rbt-swiper-arrow-transparent">
<div class="swiper-wrapper rbt-store-thumb-variation-1">
<div class="swiper-slide rbt-scroll-trigger fade_in animation-order-1">
<button class="thumbnail d-block position-relative">
<span class="rbt-thumb-img-sm">
<img class="w-100" src="thumbnail-image-url..." alt="Product Images">
</span>
</button>
</div>
<div class="swiper-slide rbt-scroll-trigger fade_in animation-order-2">
thumbnail 2
</div>
<div class="swiper-slide rbt-scroll-trigger fade_in animation-order-3">
thumbnail 3
</div>
<div class="swiper-slide rbt-scroll-trigger fade_in animation-order-4">
thumbnail 4
</div>
<div class="swiper-slide rbt-scroll-trigger fade_in animation-order-5">
thumbnail 5
</div>
...
</div>
<div class="rbt-swiper-arrow rbt-arrow-right">
<i class="fa-regular fa-chevron-down"></i>
</div>
</div>
</div>
<div class="col-lg-4-5">
<div class="swiper rbt-medea-lg-img-area-md-wider product-single-slider-two-activation rbt-arrow-between rbt-arrow-show-dfl">
<div class="rbt-product-badge rbt-product-badge-bg-yellow rbt-badge-top-left--position">
NEW
</div>
<div class="rbt-product-badge rbt-product-badge-bg-green rbt-badge-top-left--position">
HOT
</div>
<button class="rbt-enlarge-btn position-bottom-right" data-fancybox="product-single-image" src="image-url...">
<span class="rbt-icon"><i class="fa-regular fa-arrows-maximize"></i></i></span>
<span class="rbt-enlarge-text">Enlarge View</span>
</button>
<div class="swiper-wrapper rbt-store-thumb-main-1">
<div class="swiper-slide rbt-scroll-trigger fade_in animation-order-1">
<div class="thumbnail">
<div class="rbt-product-single-img">
<img class="w-100" data-fancybox="product-single-image" src="image-url..." alt="Product Images">
</div>
</div>
</div>
<div class="swiper-slide rbt-scroll-trigger fade_in animation-order-2">
thumbnail 2
</div>
<div class="swiper-slide rbt-scroll-trigger fade_in animation-order-3">
thumbnail 3
</div>
<div class="swiper-slide rbt-scroll-trigger fade_in animation-order-4">
thumbnail 4
</div>
<div class="swiper-slide rbt-scroll-trigger fade_in animation-order-5">
thumbnail 5
</div>
...
</div>
<div class="rbt-swiper-arrow rbt-arrow-left">
<div class="custom-overflow">
<i class="rbt-icon fa-regular fa-arrow-left"></i>
<i class="rbt-icon-top fa-regular fa-arrow-left"></i>
</div>
</div>
<div class="rbt-swiper-arrow rbt-arrow-right">
<div class="custom-overflow">
<i class="rbt-icon fa-regular fa-arrow-right"></i>
<i class="rbt-icon-top fa-regular fa-arrow-right"></i>
</div>
</div>
</div>
</div>
</div>
To use folder shape view image just add the
.rbt-single-product-media-has-folder-shape class to it's wrapper.
<div class="rbt-single-product-media-area position-sticky-top rbt-single-product-media-has-folder-shape d-flex row row--12 rbt-gap--0">
.....
</div>
<div class="rbt-single-product-media-area position-sticky-top rbt-single-product-media-has-folder-shape d-flex row row--12 rbt-gap--0">
<div class="col-lg-5-5 col-lg-10">
<div class="swiper rbt-medea-lg-img-area-md-wider product-single-slider-two-activation rbt-arrow-between rbt-arrow-show-dfl">
<div class="rbt-product-badge rbt-product-badge-bg-yellow rbt-badge-top-left--position">
NEW
</div>
<div class="rbt-product-badge rbt-product-badge-bg-green rbt-badge-top-left--position">
HOT
</div>
<button class="rbt-enlarge-btn position-bottom-right" data-fancybox="product-single-image" src="image-url...">
<span class="rbt-icon"><i class="fa-regular fa-arrows-maximize"></i></i></span>
<span class="rbt-enlarge-text">Enlarge View</span>
</button>
<div class="swiper-wrapper rbt-store-thumb-main-1">
<div class="swiper-slide rbt-scroll-trigger fade_in animation-order-1">
<div class="thumbnail">
<div class="rbt-product-single-img">
<img class="w-100" data-fancybox="product-single-image" src="image-url..." alt="Product Images">
</div>
</div>
</div>
<div class="swiper-slide rbt-scroll-trigger fade_in animation-order-2">
thumbnail 2
</div>
<div class="swiper-slide rbt-scroll-trigger fade_in animation-order-3">
thumbnail 3
</div>
<div class="swiper-slide rbt-scroll-trigger fade_in animation-order-4">
thumbnail 4
</div>
<div class="swiper-slide rbt-scroll-trigger fade_in animation-order-5">
thumbnail 5
</div>
...
</div>
<div class="rbt-swiper-arrow rbt-arrow-left">
<div class="custom-overflow">
<i class="rbt-icon fa-regular fa-arrow-left"></i>
<i class="rbt-icon-top fa-regular fa-arrow-left"></i>
</div>
</div>
<div class="rbt-swiper-arrow rbt-arrow-right">
<div class="custom-overflow">
<i class="rbt-icon fa-regular fa-arrow-right"></i>
<i class="rbt-icon-top fa-regular fa-arrow-right"></i>
</div>
</div>
</div>
</div>
</div>
<div class="rbt-single-product-media-area position-sticky-top rbt-single-product-media-area-dflt d-flex rbt-gap--24">
<div class="rbt-product-badge rbt-product-badge-bg-yellow rbt-badge-top-left--position">
NEW
</div>
<div class="rbt-product-badge rbt-product-badge-bg-green rbt-badge-top-left--position">
HOT
</div>
<div class="row row--12 mt_dec--24 rbt-grid-4-variation-markup">
<div class="col-lg-6 col-6 mt--24 rbt-scroll-trigger fade_in animation-order-1">
<div class="thumbnail">
<a href="image-url..." data-fancybox="gallery" class="rbt-product-single-img">
<img class="rbt-rounded--12" src="image-url..." alt="...">
</a>
</div>
</div>
<div class="col-lg-6 col-6 mt--24 rbt-scroll-trigger fade_in animation-order-2">
<div class="thumbnail">
<a href="image-url..." data-fancybox="gallery" class="rbt-product-single-img">
<img class="rbt-rounded--12" src="image-url..." alt="...">
</a>
</div>
</div>
<div class="col-lg-6 col-6 mt--24 rbt-scroll-trigger fade_in animation-order-3">
<div class="thumbnail">
<a href="image-url..." data-fancybox="gallery" class="rbt-product-single-img">
<img class="rbt-rounded--12" src="image-url..." alt="...">
</a>
</div>
</div>
<div class="col-lg-6 col-6 mt--24 rbt-scroll-trigger fade_in animation-order-4">
<div class="thumbnail">
<a href="image-url..." data-fancybox="gallery" class="rbt-product-single-img">
<img class="rbt-rounded--12" src="image-url..." alt="...">
</a>
</div>
</div>
</div>
</div>
<div class="rbt-single-product-media-area rbt-single-product-media-area-dflt position-sticky-top d-flex rbt-gap--24">
<div class="rbt-thumb-slide-part">
<div class="swiper product-single-slider-two-thumb-activation thumb-height-var-two rbt-thumb-has-bg-shape-overlay rbt-arrow-show-dfl rbt-swiper-right-bottom-one rbt-arrow-between rbt-swiper-arrow-transparent">
<div class="swiper-wrapper rbt-store-thumb-variation-1">
<div class="swiper-slide">
<button class="thumbnail d-block position-relative">
<span class="rbt-thumb-img-sm">
<img class="w-100 rbt-rounded--4" src="iamge-url..." alt="...">
</span>
</button>
</div>
<div class="swiper-slide">
thumbanil button 2...
</div>
<div class="swiper-slide">
thumbanil button 3...
</div>
<div class="swiper-slide">
thumbanil button 4...
</div>
<div class="swiper-slide">
thumbanil button 5...
</div>
</div>
<div class="rbt-swiper-arrow rbt-arrow-right">
<i class="fa-regular fa-chevron-down"></i>
</div>
</div>
<hr class="rbt-separator mt--16 d-none d-lg-block mb--16 rbt-scroll-trigger fade_in animation-order-9">
<div class="rbt-video-thumb-wrapper rbt-scroll-trigger fade_in animation-order-10 max-w-auto">
<button class="rbt-video-thumb" data-fancybox="product-single-gallary-video" data-src="https://www.youtube.com/embed/DR9lxZ8kPYQ?si=-GMJDUfCEd9YhyXR">
<img src="video-thumnail-image-url...." alt="Thumbnail">
<span class="rbt-icon"><i class="fa-solid fa-play"></i></span>
</button>
<p class="b4 mb--0 mt--4 rbt-text-medium rbt-text-color-heading text-center">5 VIDEOS</p>
</div>
</div>
<div class="rbt-medea-lg-img-area w-82">
<div
class="swiper product-single-slider-two-activation rbt-arrow-between rbt-arrow-show-dfl rbt-arrow-bottom-right">
<div class="rbt-product-badge rbt-product-badge-bg-yellow rbt-badge-top-left--position">NEW
</div>
<div class="rbt-product-badge rbt-product-badge-bg-green rbt-badge-top-left--position">HOT
</div>
<div class="swiper-wrapper rbt-store-thumb-main-1">
<div class="swiper-slide">
<div class="thumbnail">
<div class="rbt-product-single-img" data-fancybox="product-single-gallary" data-src="image-url...">
<img class="w-100 rbt-rounded--12" src="image-url..." alt="...">
</div>
</div>
</div>
<div class="swiper-slide">
Product Image 2...
</div>
<div class="swiper-slide">
Product Image 3...
</div>
<div class="swiper-slide">
Product Image 4...
</div>
<div class="swiper-slide">
Product Image 5...
</div>
</div>
<div class="rbt-swiper-arrow rbt-arrow-left">
<div class="custom-overflow">
<i class="rbt-icon fa-regular fa-arrow-left"></i>
<i class="rbt-icon-top fa-regular fa-arrow-left"></i>
</div>
</div>
<div class="rbt-swiper-arrow rbt-arrow-right">
<div class="custom-overflow">
<i class="rbt-icon fa-regular fa-arrow-right"></i>
<i class="rbt-icon-top fa-regular fa-arrow-right"></i>
</div>
</div>
</div>
</div>
</div>
<div class="rbt-single-product-media-area rbt-single-product-media-area-dflt">
<div class="rbt-medea-lg-img-area">
<div class="swiper rbt-arrow-between rbt-product-single-slider-twolayout-activation rbt-arrow-show-dfl">
<div class="swiper-wrapper rbt-store-thumb-main-1">
<div class="swiper-slide">
<div class="thumbnail">
<div class="rbt-product-single-img" data-fancybox="product-single-gallary"
href="image-url...">
<img class="w-100 rbt-rounded--12" src="image-url..." alt="...">
</div>
</div>
</div>
<div class="swiper-slide">
slider 2...
</div>
<div class="swiper-slide">
slider 3...
</div>
<div class="swiper-slide">
slider 4...
</div>
<div class="swiper-slide">
slider 5...
</div>
</div>
<div class="rbt-swiper-arrow rbt-arrow-left">
<div class="custom-overflow">
<i class="rbt-icon fa-regular fa-arrow-left"></i>
<i class="rbt-icon-top fa-regular fa-arrow-left"></i>
</div>
</div>
<div class="rbt-swiper-arrow rbt-arrow-right">
<div class="custom-overflow">
<i class="rbt-icon fa-regular fa-arrow-right"></i>
<i class="rbt-icon-top fa-regular fa-arrow-right"></i>
</div>
</div>
</div>
</div>
</div>
<div class="rbt-single-product-media-area rbt-single-product-media-area-dflt">
<div class="rbt-medea-lg-img-area">
<div class="swiper rbt-arrow-between rbt-product-single-slider-twolayout-activation rbt-arrow-show-dfl">
<div class="swiper-wrapper rbt-store-thumb-main-1">
<div class="swiper-slide">
<div class="thumbnail">
<div class="rbt-product-single-img" data-fancybox="product-single-gallary"
href="image-url...">
<img class="w-100 rbt-rounded--12" src="image-url..." alt="...">
</div>
</div>
</div>
<div class="swiper-slide">
slider 2...
</div>
<div class="swiper-slide">
slider 3...
</div>
<div class="swiper-slide">
slider 4...
</div>
<div class="swiper-slide">
slider 5...
</div>
</div>
<div class="rbt-swiper-arrow rbt-arrow-left">
<div class="custom-overflow">
<i class="rbt-icon fa-regular fa-arrow-left"></i>
<i class="rbt-icon-top fa-regular fa-arrow-left"></i>
</div>
</div>
<div class="rbt-swiper-arrow rbt-arrow-right">
<div class="custom-overflow">
<i class="rbt-icon fa-regular fa-arrow-right"></i>
<i class="rbt-icon-top fa-regular fa-arrow-right"></i>
</div>
</div>
</div>
</div>
<div class="rbt-thumb-slide-part w-48">
<div class="swiper rbt-product-thumb-slider-twolayout-activation mt--24 mt_sm--12 mlr--0">
<div class="swiper-wrapper rbt-store-thumb-variation-1">
<div class="swiper-slide">
<button class="thumbnail d-block position-relative">
<span class="rbt-thumb-img-sm">
<img class="w-100 rbt-rounded--4" src="thumbnail-button-image-url..." alt="Product Images">
</span>
</button>
</div>
<div class="swiper-slide">
Slider thumbnail button 2...
</div>
<div class="swiper-slide">
Slider thumbnail button 3...
</div>
<div class="swiper-slide">
Slider thumbnail button 4...
</div>
<div class="swiper-slide">
Slider thumbnail button 5...
</div>
</div>
</div>
</div>
</div>
<div class="rbt-single-product-media-area rbt-single-product-media-area-dflt">
<div class="row row--8 align-items-center rbt-mobile-row rbt-masonary-variation-markup position-relative">
<div class="rbt-product-badge rbt-product-badge-bg-yellow rbt-badge-top-left--position">
NEW
</div>
<div class="rbt-product-badge rbt-product-badge-bg-green rbt-badge-top-left--position">
HOT
</div>
<div class="col-xl-12 col-sm-6 col-12 rbt-scroll-trigger fade_in animatin-order-1">
<div class="thumbnail position-relative">
<a class="rbt-product-single-img" data-fancybox="gallery" href="image-url...">
<img class="w-100 rbt-rounded--12" src="image-url..." alt="...">
</a>
</div>
</div>
<div class="col-xl-4 col-sm-6 col-12 rbt-scroll-trigger fade_in animatin-order-2 mt--16">
<div class="thumbnail">
<a class="rbt-product-single-img" data-fancybox="gallery" href="image-url...">
<img class="w-100 rbt-rounded--12" src="image-url..." alt="...">
</a>
</div>
</div>
<div class="col-xl-8 col-sm-6 col-12 rbt-scroll-trigger fade_in animatin-order-3 mt--16">
<div class="thumbnail">
<a class="rbt-product-single-img" data-fancybox="gallery" href="image-url...">
<img class="w-100 rbt-rounded--12" src="image-url..." alt="...">
</a>
</div>
</div>
<div class="col-xl-8 col-sm-6 col-12 rbt-scroll-trigger fade_in animatin-order-4 mt--16">
<div class="thumbnail">
<a class="rbt-product-single-img" data-fancybox="gallery" href="image-url...">
<img class="w-100 rbt-rounded--12" src="image-url..." alt="...">
</a>
</div>
</div>
<div class="col-xl-4 col-sm-6 col-12 rbt-scroll-trigger fade_in animatin-order-5 mt--16">
<div class="thumbnail">
<a class="rbt-product-single-img" data-fancybox="gallery" href="image-url...">
<img class="w-100 rbt-rounded--12" src="image-url..." alt="...">
</a>
</div>
</div>
</div>
</div>
<div class="rbt-single-product-media-area rbt-single-product-media-area-dflt d-flex rbt-gap--24">
<div class="rbt-thumb-slide-part rbt-sticky-top-150">
<div class="swiper product-single-slider-three-thumb-activation thumb-height-var-one rbt-arrow-show-dfl rbt-thumb-has-bg-shape-overlay rbt-swiper-right-bottom-one rbt-arrow-between rbt-swiper-arrow-transparent">
<div class="swiper-wrapper rbt-store-thumb-variation-1">
<div class="swiper-slide">
<button class="thumbnail d-block position-relative">
<span class="rbt-thumb-img-sm">
<img class="w-100 rbt-rounded--4" src="image-url..." alt="Product Images">
</span>
</button>
</div>
<div class="swiper-slide">
slider thumbnail button 2...
</div>
<div class="swiper-slide">
slider thumbnail button 3...
</div>
<div class="swiper-slide">
slider thumbnail button 4...
</div>
<div class="swiper-slide">
slider thumbnail button 5...
</div>
</div>
<div class="rbt-swiper-arrow rbt-arrow-right">
<i class="fa-regular fa-chevron-down"></i>
</div>
</div>
</div>
<div class="rbt-medea-lg-img-area w-83">
<div class="swiper product-single-slider-three-activation height-var-one rbt-medea-lg-img-area-sm-wider rbt-arrow-between rbt-arrow-show-dfl">
<div class="rbt-product-badge rbt-product-badge-bg-yellow rbt-badge-top-left--position">NEW</div>
<div class="rbt-product-badge rbt-product-badge-bg-green rbt-badge-top-left--position">HOT</div>
<div class="swiper-wrapper rbt-store-thumb-main-1">
<div class="swiper-slide">
<div class="thumbnail">
<div class="rbt-product-single-img" data-fancybox="product-single-gallary" data-src="image-url...">
<img class="w-100 rbt-rounded--12" src="image-url..." alt="Product Images">
</div>
</div>
</div>
<div class="swiper-slide">
slider 2...
</div>
<div class="swiper-slide">
slider 3...
</div>
<div class="swiper-slide">
slider 4...
</div>
<div class="swiper-slide">
slider 5...
</div>
</div>
</div>
</div>
</div>
<div class="rbt-component-area rbt-single-product-area rbt-bg-color-white rbt-section-gapBottom">
<div class="container-fluid plr--24 rbt-sticky-top-150">
<div class="row row--0 mt_dec--24 justify-content-center">
<div class="col-xl-12 col-lg-12 mt--24 order-sm-1">
<div class="rbt-single-product-media-area rbt-single-product-media-area-dflt">
<div class="rbt-medea-lg-img-area">
<div class="swiper rbt-arrow-between rbt-product-single-slider-fourlayout-activation rbt-arrow-show-dfl">
<div class="rbt-product-badge rbt-product-badge-bg-yellow rbt-badge-top-left--position rbt-scroll-trigger fade_in animation-order-1">
NEW
</div>
<div class="rbt-product-badge rbt-product-badge-bg-green rbt-badge-top-left--position rbt-scroll-trigger fade_in animation-order-1">
HOT
</div>
<div class="swiper-wrapper rbt-store-thumb-main-1">
<div class="swiper-slide">
<div class="thumbnail">
<div class="rbt-product-single-img" data-fancybox="product-single-gallary"
data-src="image-url...">
<img class="w-100 rbt-rounded--12" src="image-url..." alt="...">
</div>
</div>
</div>
<div class="swiper-slide">
slider 2...
</div>
<div class="swiper-slide">
slider 3...
</div>
<div class="swiper-slide">
slider 4...
</div>
<div class="swiper-slide">
slider 5...
</div>
<div class="swiper-slide">
slider 6...
</div>
</div>
<div class="rbt-swiper-arrow rbt-arrow-left">
<div class="custom-overflow">
<i class="rbt-icon fa-regular fa-arrow-left"></i>
<i class="rbt-icon-top fa-regular fa-arrow-left"></i>
</div>
</div>
<div class="rbt-swiper-arrow rbt-arrow-right">
<div class="custom-overflow">
<i class="rbt-icon fa-regular fa-arrow-right"></i>
<i class="rbt-icon-top fa-regular fa-arrow-right"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xl-12 col-lg-12 mt--24 order-2 rbt-single-mobile-view-sidebar order-sm-2 order-xl-3 d-flex justify-content-end">
<div class="row row--12 rbt-single-product-content rbt-content-top-sticky-on-img rbt-product-variations rbt-content-top-sticky-on-img-vr" data-variations="">
product details will appear here
</div>
</div>
</div>
</div>
</div>
<div class="rbt-single-product-media-area rbt-single-product-media-area-dflt">
<div class="rbt-medea-lg-img-area">
<div class="swiper rbt-arrow-between rbt-product-single-slider-threelayout-activation rbt-arrow-show-dfl">
<div class="rbt-product-badge rbt-product-badge-bg-yellow rbt-badge-top-left--position rbt-scroll-trigger fade_in animation-order-1">
NEW
</div>
<div class="rbt-product-badge rbt-product-badge-bg-green rbt-badge-top-left--position rbt-scroll-trigger fade_in animation-order-1">
HOT
</div>
<div class="swiper-wrapper rbt-store-thumb-main-1">
<div class="swiper-slide">
<div class="thumbnail">
<div class="rbt-product-single-img" data-fancybox="product-single-gallary" data-src="image-url...">
<img class="w-100 rbt-rounded--12" src="image-url..." alt="...">
</div>
</div>
</div>
<div class="swiper-slide">
slider 2...
</div>
<div class="swiper-slide">
slider 3...
</div>
<div class="swiper-slide">
slider 4...
</div>
<div class="swiper-slide">
slider 5...
</div>
</div>
<div class="rbt-swiper-arrow rbt-arrow-left">
<div class="custom-overflow">
<i class="rbt-icon fa-regular fa-arrow-left"></i>
<i class="rbt-icon-top fa-regular fa-arrow-left"></i>
</div>
</div>
<div class="rbt-swiper-arrow rbt-arrow-right">
<div class="custom-overflow">
<i class="rbt-icon fa-regular fa-arrow-right"></i>
<i class="rbt-icon-top fa-regular fa-arrow-right"></i>
</div>
</div>
</div>
</div>
<div class="rbt-thumb-slide-part has-right-bg-shape w-55">
<div class="swiper rbt-product-thumb-slider-threelayout-activation mt--24">
<div class="swiper-wrapper rbt-store-thumb-variation-1">
<div class="swiper-slide">
<button class="thumbnail d-block position-relative">
<span class="rbt-thumb-img-sm">
<img class="w-100 rbt-rounded--4" src="image-url..." alt="...">
</span>
</button>
</div>
<div class="swiper-slide">
slider thumbnail button 2...
</div>
<div class="swiper-slide">
slider thumbnail button 3...
</div>
<div class="swiper-slide">
slider thumbnail button 4...
</div>
<div class="swiper-slide">
slider thumbnail button 5...
</div>
</div>
</div>
</div>
</div>
<div class="rbt-single-product-media-area rbt-single-product-media-area-dflt">
<div class="row row--8 align-items-center rbt-mobile-row rbt-grid-masonary-variation-markup position-relative">
<div class="col-xl-12 col-sm-6 col-12 rbt-scroll-trigger fade_in animatin-order-1">
<div class="thumbnail position-relative">
<a class="rbt-product-single-img" data-fancybox="gallery" data-src="image-url...">
<img class="w-100 rbt-rounded--12" src="image-url..." alt="...">
</a>
</div>
</div>
<div class="col-xl-6 col-sm-6 col-12 rbt-scroll-trigger fade_in animatin-order-2 mt--16">
<div class="thumbnail">
<a class="rbt-product-single-img" data-fancybox="gallery" data-src="image-url..">
<img class="w-100 rbt-rounded--12" src="image-url.." alt="...">
</a>
</div>
</div>
<div class="col-xl-6 col-sm-6 col-12 rbt-scroll-trigger fade_in animatin-order-3 mt--16">
<div class="thumbnail">
<a class="rbt-product-single-img" data-fancybox="gallery" data-src="image-url..">
<img class="w-100 rbt-rounded--12" src="image-url.." alt="...">
</a>
</div>
</div>
<div class="col-xl-6 col-sm-6 col-12 rbt-scroll-trigger fade_in animatin-order-4 mt--16">
<div class="thumbnail">
<a class="rbt-product-single-img" data-fancybox="gallery" data-src="image-url..">
<img class="w-100 rbt-rounded--12" src="image-url.." alt="...">
</a>
</div>
</div>
<div class="col-xl-6 col-sm-6 col-12 rbt-scroll-trigger fade_in animatin-order-5 mt--16">
<div class="thumbnail">
<a class="rbt-product-single-img" data-fancybox="gallery" data-src="image-url..">
<img class="w-100 rbt-rounded--12" src="image-url.." alt="...">
</a>
</div>
</div>
</div>
</div>
<div class="thumbnail rbt-sticky-top-150">
<a href="image-url.." data-fancybox="gallery" class="rbt-product-single-img">
<img class="rbt-rounded--12 zoom_lens" src="image-url.." data-zoom-image="image-url.." alt="...">
</a>
</div>
<div class="thumbnail rbt-sticky-top-150">
<a href="image-url.." data-fancybox="gallery" class="rbt-product-single-img">
<img class="rbt-rounded--12 zoom_inner" src="image-url.." data-zoom-image="image-url.." alt="...">
</a>
</div>
<div class="thumbnail rbt-sticky-top-150">
<a href="image-url.." data-fancybox="gallery" class="rbt-product-single-img">
<img class="rbt-rounded--12 zoom_window" src="image-url.." data-zoom-image="image-url.." alt="...">
</a>
</div>
<div class="thumbnail rbt-360-view-thumbnail rbt-sticky-top-150">
<div class="cloudimage-360"
data-folder="https://scaleflex.cloudimg.io/v7/demo/360-nike/"
data-filename-x="nike-{index}.jpg"
data-amount-x="35"
data-speed="100"
data-drag-speed="120"
data-autoplay
data-filename-y="nike-y-{index}.jpg"
data-amount-y="36"
data-autoplay-behavior="spin-xy"
>
</div>
</div>