Gearing up something amazing for you…
Still waiting? Magic takes a moment! ✨
<div class="rbt-quick-access-banner rbt-quick-access-banner-sm flex-wrap rbt-bg-color-brand-300 rbt-rounded--8 alert alert-dismissible fade show" role="alert">
<div class="rbt-quick-access-banner-banner-content d-flex align-items-center">
<div class="rbt-icon-img me-3">
<img src="image-url..." alt="Ecommerce Gift Icon">
</div>
<p class="rbt-quick-access-banner-title b3 mb-0">
Register to buy Grocery's at wholesale prices for your shop.
</p>
</div>
<div class="rbt-quick-access-banner-action-btn">
<button class="rbt-btn rbt-btn-xs" data-bs-toggle="modal" data-bs-target="#signinModal">
<i class="fa-light fa-user mr--4"></i> Register Now
</button>
</div>
<a href="#" class="rbt-cancel-btn" data-bs-dismiss="alert" aria-label="Close">
<i class="fa-solid fa-xmark"></i>
</a>
</div>
<div class="pricing-part mt--0">
<del class="price-text">$295.00</del>
<span class="price-text">$179.98</span>
<span class="rbt-offer-badge rbt-offer-badge-md">Save 30%</span>
</div>
<button class="rbt-btn rbt-btn-xs rbt-btn-secondary d-flex align-items-center" data-bs-toggle="modal" data-bs-target="#findstoreModal">
<i class="fa-regular fa-location-dot mr--4"></i> Find A Near Store
</button>
<div class="rbt-default-modal modal fade" id="findstoreModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered xl-size">
<div class="modal-content p--0">
<div class="modal-header">
<button type="button" class="rbt-round-btn rbt-modal-dis-btn" data-bs-dismiss="modal" aria-label="Close">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
<div class="rbt-google-map bg-color-white">
<iframe class="w-100"
src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d2965.0824050173574!2d-93.63905729999999!3d41.998507000000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sWebFilings%2C+University+Boulevard%2C+Ames%2C+IA!5e0!3m2!1sen!2sus!4v1390839289319"
height="600" style="border:0"></iframe>
</div>
</div>
</div>
</div>
<div class="rbt-text-swiper-container rbt-arrow-vertical">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="rbt-text-group"> <span class="icon mr--4"><i class="fa-solid fa-bag-shopping"></i></span>
Slide 1
</div>
</div>
<div class="swiper-slide">
<div class="rbt-text-group"> <span class="icon mr--4"><i class="fa-solid fa-truck"></i></span>
Slide 2
</div>
</div>
<div class="swiper-slide">
<div class="rbt-text-group"> <span class="icon mr--4"><i class="fa-solid fa-rotate-left"></i></span>
Slide 3
</div>
</div>
...
</div>
<div class="rbt-verticle-arrow rbt-arrow-prev">
<i class="fa-regular fa-chevron-up"></i>
</div>
<div class="rbt-verticle-arrow rbt-arrow-next">
<i class="fa-regular fa-chevron-down"></i>
</div>
</div>
<div class="rbt-info-wrapper d-flex rbt-gap--12 flex-wrap">
<div class="prd-info-section">
<a class="rbt-quick-info-tag d-flex align-items-center rbt-gap--8 rbt-flash-animation"
href="#">
<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_3632_18878)" />
<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_3632_18878" 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><strong>34 products sold in last 10 hours.</strong></p>
</a>
</div>
<div class="prd-info-section">
<a class="rbt-quick-info-tag d-flex align-items-center rbt-gap--8 rbt-shiny" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10"
fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M1.98586 5.18652C1.93484 5.12038 1.88687 5.05807 1.84423 5.00038C2.25958 4.44469 2.71871 3.92381 3.21712 3.44281C4.28087 2.42212 5.61949 1.53911 7 1.53911C8.38051 1.53911 9.71837 2.42212 10.7829 3.44281C11.2813 3.92383 11.7404 4.44471 12.1558 5.00038C11.7402 5.55588 11.2811 6.07675 10.7829 6.55796C9.71837 7.57865 8.38051 8.46166 7 8.46166C5.61949 8.46166 4.28163 7.57865 3.21712 6.55796C2.77476 6.13114 2.36329 5.67282 1.98586 5.18652ZM13.7297 4.58042L13.0916 5.00038L13.7297 5.42035L13.7282 5.42266L13.7259 5.42574L13.7183 5.43804L13.6901 5.47958C13.5374 5.70347 13.378 5.92253 13.2119 6.13645C12.789 6.68142 12.3279 7.19501 11.8322 7.67326C10.6915 8.76779 8.98433 10 7 10C5.01566 10 3.3085 8.76779 2.16785 7.67326C1.47767 7.00644 0.855254 6.27156 0.30991 5.47958C0.300444 5.46579 0.291053 5.45194 0.281736 5.43804L0.274122 5.42574L0.271837 5.42266L0.271076 5.42112C0.271076 5.42035 0.270314 5.42035 0.908409 5.00038L0.270314 4.58042L0.271837 4.57811L0.274122 4.57503L0.281736 4.56273C0.323524 4.49897 0.366683 4.43614 0.411182 4.37428C0.932338 3.63825 1.52073 2.95324 2.16861 2.32828C3.30773 1.23144 5.01566 0 7 0C8.98433 0 10.6915 1.23221 11.8322 2.32674C12.5223 2.99355 13.1448 3.72843 13.6901 4.52042L13.7183 4.56196L13.7259 4.57426L13.7282 4.57734L13.7289 4.57888L13.7297 4.58042ZM13.0916 5.00038L13.7297 4.58042L14 5.00038L13.7297 5.42035L13.0916 5.00038ZM0.270314 4.58042L0.908409 5.00038L0.270314 5.42035L0 5.00038L0.270314 4.58042ZM6.23855 5.00038C6.23855 4.79639 6.31877 4.60075 6.46157 4.4565C6.60437 4.31225 6.79805 4.23121 7 4.23121C7.20195 4.23121 7.39563 4.31225 7.53842 4.4565C7.68122 4.60075 7.76145 4.79639 7.76145 5.00038C7.76145 5.20438 7.68122 5.40002 7.53842 5.54427C7.39563 5.68852 7.20195 5.76956 7 5.76956C6.79805 5.76956 6.60437 5.68852 6.46157 5.54427C6.31877 5.40002 6.23855 5.20438 6.23855 5.00038ZM7 2.69287C6.39415 2.69287 5.81312 2.93598 5.38472 3.36873C4.95632 3.80147 4.71565 4.38839 4.71565 5.00038C4.71565 5.61238 4.95632 6.1993 5.38472 6.63204C5.81312 7.06479 6.39415 7.3079 7 7.3079C7.60585 7.3079 8.18688 7.06479 8.61528 6.63204C9.04367 6.1993 9.28435 5.61238 9.28435 5.00038C9.28435 4.38839 9.04367 3.80147 8.61528 3.36873C8.18688 2.93598 7.60585 2.69287 7 2.69287Z"
fill="#24BD25" />
</svg>
<p><strong>20 people are viewing this</strong></p>
</a>
</div>
</div>
<div class="rbt-single-product-area">
<div class="rbt-product-variations" data-variations='{
"global": {
"types": {
"rbt_product_attribute_color": {
"type": "color",
"label": "Color",
"attributes": [
{
"color": "#2B2B2B",
"label": "Black",
"slug": "black"
},
{
"color": "#cc999d",
"label": "Pink",
"slug": "pink"
},
{
"color": "#9C9B9E",
"label": "Dark",
"slug": "dark"
},
{
"color": "#F2EDE7",
"label": "White",
"slug": "white"
},
{
"color": "#a09fa4",
"label": "Gray",
"slug": "gray"
},
{
"color": "#a09fa4",
"label": "Gray",
"slug": "gray"
}
]
},
"rbt_product_attribute_size": {
"type": "dropdown",
"label": "Size",
"attributes": [
{
"label": "Select",
"slug": ""
},
{
"label": "Extra Large",
"slug": "xl"
},
{
"label": "Large",
"slug": "lg"
},
{
"label": "Medium",
"slug": "md"
},
{
"label": "Small",
"slug": "sm"
},
{
"label": "Extra Small",
"slug": "xs"
}
]
},
"rbt_product_attribute_layout": {
"type": "image",
"label": "Brand",
"attributes": [
{
"image_url": "assets/images/product-single/ear-add-prd/eadd-prd-1.webp",
"label": "Go Pro",
"alt": "Go Pro"
},
{
"image_url": "assets/images/product-single/ear-add-prd/eadd-prd-2.webp",
"label": "Watch",
"alt": "watch"
},
{
"image_url": "assets/images/product-single/ear-add-prd/eadd-prd-3.webp",
"label": "Camera",
"alt": "Camera"
},
{
"image_url": "assets/images/product-single/ear-add-prd/eadd-prd-4.webp",
"label": "Airpod",
"alt": "Airpod"
}
]
},
"rbt_product_attribute_style": {
"type": "button",
"label": "Style",
"attributes": [
{
"label": "Casual",
"slug": "casual"
},
{
"label": "Formal",
"slug": "formal"
},
{
"label": "Extrime",
"slug": "extrime"
}
]
}
}
},
"local": [
{
"attributes": {
"rbt_product_attribute_color": "#2B2B2B",
"rbt_product_attribute_style": "casual",
"rbt_product_attribute_size": "xl",
"rbt_product_attribute_layout": "assets/images/product-single/ear-add-prd/eadd-prd-1.webp"
},
"price": {
"regular": 950,
"sale": 120
},
"description": "Alt Content",
"sku": "headphone-with-black-extra-large",
"images": {
"thumbnails": {
"1": {
"url": "assets/images/product-single/earphone/earphone-04.webp",
"alt": "Alt Content"
},
"2": {
"url": "assets/images/product-single/earphone/earphone-02.webp",
"alt": "Alt Content"
},
"3": {
"url": "assets/images/product-single/earphone/earphone-01.webp",
"alt": "Alt Content"
},
"4": {
"url": "assets/images/product-single/earphone/earphone-03.webp",
"alt": "Alt Content"
},
"5": {
"url": "assets/images/product-single/earphone/earphone-02.webp",
"alt": "Alt Content"
}
},
"full": {
"1": {
"url": "assets/images/product-single/earphone/earphone-04.webp",
"alt": "Alt Content"
},
"2": {
"url": "assets/images/product-single/earphone/earphone-02.webp",
"alt": "Alt Content"
},
"3": {
"url": "assets/images/product-single/earphone/earphone-01.webp",
"alt": "Alt Content"
},
"4": {
"url": "assets/images/product-single/earphone/earphone-03.webp",
"alt": "Alt Content"
},
"5": {
"url": "assets/images/product-single/earphone/earphone-02.webp",
"alt": "Alt Content"
}
}
},
"quantity": 150
},
{
"attributes": {
"rbt_product_attribute_color": "#2B2B2B",
"rbt_product_attribute_style": "formal",
"rbt_product_attribute_size": "xl",
"rbt_product_attribute_layout": "assets/images/product-single/ear-add-prd/eadd-prd-2.webp"
},
"price": {
"regular": 950,
"sale": 120
},
"description": "Alt Content",
"sku": "headphone-with-black-extra-large",
"images": {
"thumbnails": {
"1": {
"url": "assets/images/product-single/earphone/earphone-04.webp",
"alt": "Alt Content"
},
"2": {
"url": "assets/images/product-single/earphone/earphone-02.webp",
"alt": "Alt Content"
},
"3": {
"url": "assets/images/product-single/earphone/earphone-01.webp",
"alt": "Alt Content"
},
"4": {
"url": "assets/images/product-single/earphone/earphone-03.webp",
"alt": "Alt Content"
},
"5": {
"url": "assets/images/product-single/earphone/earphone-02.webp",
"alt": "Alt Content"
}
},
"full": {
"1": {
"url": "assets/images/product-single/earphone/earphone-04.webp",
"alt": "Alt Content"
},
"2": {
"url": "assets/images/product-single/earphone/earphone-02.webp",
"alt": "Alt Content"
},
"3": {
"url": "assets/images/product-single/earphone/earphone-01.webp",
"alt": "Alt Content"
},
"4": {
"url": "assets/images/product-single/earphone/earphone-03.webp",
"alt": "Alt Content"
},
"5": {
"url": "assets/images/product-single/earphone/earphone-02.webp",
"alt": "Alt Content"
}
}
},
"quantity": 150
}
]
}'>
<!-- Start Dynamic Color Swatches Area -->
<div class="rbt-store-variation-controls"></div>
<div class="rbt-store-reset-variations"></div>
<!-- End Dynamic Color Swatches Area -->
</div>
</div>
Basically, the "global" property is used for variations such as
Color, Size, Brand and
Style. You can add your custom Color for your product,
Size variaiton like xl, lg, sm and whatever size you wish,
Brand names and Style of your products such as casual,
formal, extrime etc.
You can easily add your own custom color for products. To add custom color
just follow some steps mentioned below:
Inside "global"
property, there is an another property named
"rbt_product_attribute_color" which have an array named
"attributes". Each Element inside this array is an object for a
color variation. You can add custom color variation here.
For example:-
{
"global": {
"types": {
"rbt_product_attribute_color": {
"type": "color",
"label": "Color",
"attributes": [
{
"color": "#2B2B2B",
"label": "Black",
"slug": "black"
},
{
"color": "#cc999d",
"label": "Pink",
"slug": "pink"
}
]
}
}
}
}
Inside "global" property, there is an another property named
"rbt_product_attribute_size" which have an array named
"attributes". Each Element inside this array is an object for
size variation. You can add custom size variation here.
For example:-
{
"global": {
"types": {
"rbt_product_attribute_size": {
"type": "dropdown",
"label": "Size",
"attributes": [
{
"label": "Extra Large",
"slug": "xl"
},
{
"label": "Large",
"slug": "lg"
}
]
}
}
}
}
Inside "global" property, there is an another property named
"rbt_product_attribute_layout" which have an array named
"attributes". Each Element inside this array is an object for
brand variation. You can add custom brand variation here.
For example:-
{
"global": {
"types": {
"rbt_product_attribute_layout": {
"type": "image",
"label": "Brand",
"attributes": [
{
"image_url": "image-url...",
"label": "Camera",
"alt": "Camera"
},
{
"image_url": "image-url...",
"label": "Watch",
"alt": "watch"
}
]
}
}
}
}
Inside "global" property, there is an another property named
"rbt_product_attribute_style" which have an array named
"attributes". Each Element inside this array is an object for
style variation. You can add custom style variation here.
For example:-
{
"global": {
"types": {
"rbt_product_attribute_style": {
"type": "button",
"label": "Style",
"attributes": [
{
"label": "Casual",
"slug": "casual"
},
{
"label": "Formal",
"slug": "formal"
}
]
}
}
}
}
You can easily set how the 'Size' and
'Style' selection will appear on your
site such as 'Dropdown' or 'Button'. Just set a value
"dropdown" or "button" to the property named
"type" inside the "rbt_product_attribute_size" or
"rbt_product_attribute_style" property.
For example:-
{
"global": {
"types": {
"rbt_product_attribute_size": {
"type": "button",
}
}
}
}
OR
{
"global": {
"types": {
"rbt_product_attribute_size": {
"type": "dropdown",
}
}
}
}
Basically, the "local" property is used for variations of
products. You can add your custom variations for any kind of products.
"local" is containing here an array and each element of this
array is a single variation of product which contain various kind of
information about the product.
For example:-
{
"local": [
{
"attributes": {
"rbt_product_attribute_color": "#2B2B2B",
"rbt_product_attribute_style": "casual",
"rbt_product_attribute_size": "xl",
"rbt_product_attribute_layout": "assets/images/product-single/ear-add-prd/eadd-prd-1.webp"
},
"price": {
"regular": 950,
"sale": 120
},
"description": "Alt Content",
"sku": "headphone-with-black-extra-large",
"images": {
"thumbnails": {
"1": {
"url": "assets/images/product-single/earphone/earphone-04.webp",
"alt": "Alt Content"
},
"2": {
"url": "assets/images/product-single/earphone/earphone-02.webp",
"alt": "Alt Content"
},
"3": {
"url": "assets/images/product-single/earphone/earphone-01.webp",
"alt": "Alt Content"
},
"4": {
"url": "assets/images/product-single/earphone/earphone-03.webp",
"alt": "Alt Content"
},
"5": {
"url": "assets/images/product-single/earphone/earphone-02.webp",
"alt": "Alt Content"
}
},
"full": {
"1": {
"url": "assets/images/product-single/earphone/earphone-04.webp",
"alt": "Alt Content"
},
"2": {
"url": "assets/images/product-single/earphone/earphone-02.webp",
"alt": "Alt Content"
},
"3": {
"url": "assets/images/product-single/earphone/earphone-01.webp",
"alt": "Alt Content"
},
"4": {
"url": "assets/images/product-single/earphone/earphone-03.webp",
"alt": "Alt Content"
},
"5": {
"url": "assets/images/product-single/earphone/earphone-02.webp",
"alt": "Alt Content"
}
}
},
"quantity": 150
},
{
"attributes": {
"rbt_product_attribute_color": "#2B2B2B",
"rbt_product_attribute_style": "formal",
"rbt_product_attribute_size": "xl",
"rbt_product_attribute_layout": "assets/images/product-single/ear-add-prd/eadd-prd-2.webp"
},
"price": {
"regular": 950,
"sale": 120
},
"description": "Alt Content",
"sku": "headphone-with-black-extra-large",
"images": {
"thumbnails": {
"1": {
"url": "assets/images/product-single/earphone/earphone-04.webp",
"alt": "Alt Content"
},
"2": {
"url": "assets/images/product-single/earphone/earphone-02.webp",
"alt": "Alt Content"
},
"3": {
"url": "assets/images/product-single/earphone/earphone-01.webp",
"alt": "Alt Content"
},
"4": {
"url": "assets/images/product-single/earphone/earphone-03.webp",
"alt": "Alt Content"
},
"5": {
"url": "assets/images/product-single/earphone/earphone-02.webp",
"alt": "Alt Content"
}
},
"full": {
"1": {
"url": "assets/images/product-single/earphone/earphone-04.webp",
"alt": "Alt Content"
},
"2": {
"url": "assets/images/product-single/earphone/earphone-02.webp",
"alt": "Alt Content"
},
"3": {
"url": "assets/images/product-single/earphone/earphone-01.webp",
"alt": "Alt Content"
},
"4": {
"url": "assets/images/product-single/earphone/earphone-03.webp",
"alt": "Alt Content"
},
"5": {
"url": "assets/images/product-single/earphone/earphone-02.webp",
"alt": "Alt Content"
}
}
},
"quantity": 150
}
]
}
<div class="rbt-countdown-banner rbt-countdown-banner-sm rbt-countdown-banner-has-bg-01">
<span class="b3 rbt-title">Special Offer :</span>
<div class="rbt-countdown-section">
<div class="rbt-countdown-one bg-variation-white cd-border-style">
<div class="countdown" data-date="2025-12-30">
<div class="countdown-container days">
<span class="countdown-value">87</span>
<span class="countdown-heading">Days</span>
</div>
<div class="countdown-container hours">
<span class="countdown-value">23</span>
<span class="countdown-heading">Hours</span>
</div>
<div class="countdown-container minutes">
<span class="countdown-value">38</span>
<span class="countdown-heading">Minutes</span>
</div>
<div class="countdown-container seconds">
<span class="countdown-value">27</span>
<span class="countdown-heading">Seconds</span>
</div>
</div>
</div>
</div>
<span class="rbt-desc b4">Remains until the end of the offer.</span>
</div>
<!-- Quantity Count Small -->
<div class="rbt-qty-area rbt-qty-sm">
<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="05" min="01">
<button class="qty-item-btn qty-item-btn-incr"><i class="fa-solid fa-plus"></i></button>
</div>
<!-- Quantity Count Default Size -->
<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="05" min="01">
<button class="qty-item-btn qty-item-btn-incr"><i class="fa-solid fa-plus"></i></button>
</div>
For orders over $9.90
For orders over $9.90
<!-- coupon card -->
<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>
<!-- coupon card disabled -->
<div class="rbt-coupon rbt-coupon-expired">
<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="rbt-btn rbt-bg-color-gray-300 shadow-none rbt-btn-sm">
Expired
</button>
</div>
</div>
<div class="rbt-list-product-container d-flex flex-column rbt-gap--24">
<div class="rbt-single-element d-flex align-items-center">
<div class="rbt-card rbt-product-card rbt-list-view-variation rbt-list-view-sm rbt-prd-sing-add-card">
<div class="inner">
<div class="rbt-card-img rbt-bg-color-default">
<a href="#"><img src="assets/images/product-single/ear-add-prd/eadd-prd-1.webp" alt="Card Image"></a>
</div>
<div class="rbt-card-body d-flex rbt-gap--8 align-items-center">
<div class="left-part">
<a href="#" class="rbt-card-subtitle b4 rbt-card-catagories-text mt--0">
<i class="fa-regular fa-shop mr--4 rbt-rated-icon"></i>
Snacks
</a>
<h6 class="rbt-card-title"><a href="#">Fresh Full Cream Milk Powder 1kg</a></h6>
</div>
<div class="right-part">
<div class="rbt-card-rating">
<ul class="rbt-rating-icon-list">
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
<li><i class="fa-solid fa-star"></i></li>
<li><i class="fa-solid fa-star"></i></li>
</ul>
<p class="rating-digit">(46)</p>
</div>
<div class="pricing-part">
<del class="price-text">$116.34</del>
<span class="price-text">$69.78</span>
</div>
</div>
</div>
</div>
</div>
<div class="rbt-create-new-btn">
<button class="rbt-btn rbt-btn-xs text-nowrap" data-bs-toggle="modal" data-bs-target="#quickviewModal">ADD <i class="fa-solid fa-plus ml--4"></i></button>
</div>
</div>
...
</div>
<div class="rbt-single-product-area">
<ul class="product-details-list shipment-details-list">
<li>
<span class="rbt-bold--text mr--4">Brand :</span>
<span class="text">Sony Corporation Ltd</span>
</li>
<li>
<span class="rbt-bold--text mr--4">Resolution :</span>
<span class="text">3840×2160</span>
</li>
<li>
<span class="rbt-bold--text mr--4">Release years :</span>
<span class="text"> Jan 2022</span>
</li>
<li>
<span class="rbt-bold--text mr--4">Motherboard :</span>
<span class="text"> Samsung</span>
<span class="text d-block"> ATX, ITX, microATX, Mini-ITX</span>
</li>
<li>
<span class="icon"><i
class="fa-sharp fa-regular fa-truck"></i></span>
<div class="right-content">
<span class="rbt-bold--text mr--4">Ships :</span>
<span class="text">2–3 weeks Free Shipping</span>
</div>
</li>
<li>
<span class="icon"><i
class="fa-regular fa-bag-shopping"></i></span>
<div class="right-content">
<span class="rbt-bold--text mr--4">7 Days Returns :</span>
<span class="text"> Free return within 7 days of
purchase</span>
</div>
</li>
</ul>
</div>
Only 80 pc left
<div class="rbt-single-product-area">
<div class="rbt-prd-qty-area">
<p class="prd-qty-txt"><strong>Only 80 pc left</strong></p>
<div class="progress" role="progressbar"
aria-label="Shipping-progress" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar w-50"></div>
</div>
</div>
</div>
<div class="rbt-products-nav">
<div class="rbt-event-hover tooltips" data-tooltip="Previous Product" data-tooltip-position="top">
<a class="rbt-product-nav-btn rbt-round-btn rbt-btn-prev" href="#!" aria-label="Previous product">
<i class="fa-regular fa-chevron-left"></i>
</a>
<div class="rbt-dropdown rbt-dropdown-from-right">
Your product card...
</div>
</div>
<a href="#!" class="rbt-product-nav-btn rbt-round-btn tooltips" data-tooltip="Back To Products" data-tooltip-position="top">
<i class="fa-regular fa-grid-2"></i>
</a>
<div class="rbt-event-hover tooltips" data-tooltip="Next Product" data-tooltip-position="top">
<a class="rbt-product-nav-btn rbt-round-btn rbt-btn-next" href="#!" aria-label="Next product">
<i class="fa-regular fa-chevron-right"></i>
</a>
<div class="rbt-dropdown">
Your product card...
</div>
</div>
</div>
SKU:
HN-508801
<div class="rbt-single-product-area">
<div class="rbt-info-wrapper d-flex">
<div class="rbt-card-rating mt--0">
<ul class="rbt-rating-icon-list">
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
<li><i class="fa-solid fa-star rbt-rated-icon"></i></li>
</ul>
<p class="rating-digit">(46)</p>
<div class="rbt-text-swiper-container rbt-arrow-vertical">
<div class="swiper-wrapper">
<div class="swiper-slide">
slide-1
</div>
<div class="swiper-slide">
slide 2...
</div>
...
</div>
<div class="rbt-verticle-arrow rbt-arrow-prev">
<i class="fa-regular fa-chevron-up"></i>
</div>
<div class="rbt-verticle-arrow rbt-arrow-next">
<i class="fa-regular fa-chevron-down"></i>
</div>
</div>
</div>
<div class="prd-info-section has-left-separator">
<div class="prd-id-text">
<p class="text-bold">SKU:</p>
<p> HN-508801</p>
</div>
<div class="rbt-badge rbt-badge-bg-green rbt-badge-border rbt-badge-small rbt-badge-rounded">9 in Stock</div>
</div>
</div>
</div>
<div class="rbt-info-wrapper d-flex">
<div class="prd-info-section">
<div class="prd-id-text">
<p class="text-bold">Brand:</p>
<a href="#" class="rbt-brand-img tooltips" data-tooltip="Product Brand" data-tooltip-position="top">
<img src="brand-image-url..." alt="Small icon Brand">
</a>
</div>
</div>
<div class="prd-info-section has-left-separator">
<div class="prd-id-text">
<p class="text-bold">All Europe</p>
<a href="#" class="rbt-brand-img tooltips" data-tooltip="All Europe Delivary" data-tooltip-position="top">
<img src="brand-image-url..." alt="Small icon Brand">
</a>
</div>
</div>
<div class="prd-info-section has-left-separator">
<div class="prd-id-text">
<p class="text-bold">Verified:</p>
<span class="rbt-brand-img tooltips" data-tooltip="Verified Product" data-tooltip-position="top">
<img src="brand-image-url..." alt="Small icon Brand">
</span>
</div>
</div>
</div>
<div class="rbt-single-product-area">
<div class="rbt-info-box rbt-bg-color-brand-50">
<div class="rbt-payment-info-container">
<ul class="payment-img-link">
<li><a href="#"><img src="assets/images/payment-brand/image-01.webp" alt="Payment Brand Image"></a></li>
</ul>
<span class="b2 rbt-text-medium text-center rbt-text-color-heading mt--12 d-block">Guaranteed safe & secure checkout</span>
</div>
</div>
</div>
<!-- default position -->
<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></span>
<span class="rbt-enlarge-text">Enlarge View</span>
</button>
<!-- position-top-left -->
<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></span>
<span class="rbt-enlarge-text">Enlarge View</span>
</button>
<!-- position-bottom-left -->
<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></span>
<span class="rbt-enlarge-text">Enlarge View</span>
</button>
<!-- position-bottom-right -->
<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></span>
<span class="rbt-enlarge-text">Enlarge View</span>
</button>
<div class="rbt-combo-prd-box rbt-bg-color-white">
<div class="row justify-content-between">
<div class="col-lg-2">
<div class="rbt-combo-title-section">
<i class="fa-regular fa-cube"></i>
<h5 class="rbt-title">There's more in the complete bundle</h5>
</div>
</div>
<div class="col-lg-10">
<div class="rbt-combo-prd-content-section">
<div class="rbt-prd-pricing-box rbt-bg-color-white">
<div class="rbt-pricing-box-top">
<!-- product thumbnail list -->
<div class="rbt-prd-img-area">
<div class="single-product-img-box">
<span class="icon h6"><i class="fa-solid fa-plus"></i></span>
<label class="rbt-img" for="rbt-cmb-prd-1">
<img src="assets/images/product-single/ear-add-prd/eadd-prd-checkbox-1.webp"
alt="Card Image">
</label>
</div>
<div class="single-product-img-box">
<span class="icon h6"><i class="fa-solid fa-plus"></i></span>
<label class="rbt-img" for="rbt-cmb-prd-2">
<img src="assets/images/product-single/ear-add-prd/eadd-prd-checkbox-2.webp"
alt="Card Image">
</label>
</div>
<di v class="single-product-img-box">
<span class="icon h6"><i class="fa-solid fa-plus"></i></span>
<label class="rbt-img" for="rbt-cmb-prd-3">
<img src="assets/images/product-single/ear-add-prd/eadd-prd-checkbox-3.webp"
alt="Card Image">
</label>
</di>
</div>
<div class="rbt-pricing-area">
<div class="price d-flex align-items-center justify-content-center rbt-gap--4">
<h6 class="mb--0">Total:</h6>
<h4 class="mb--0 rbt-text-bold">$1563.46</h4>
</div>
<div class="rbt-button-group mt--16 text-center mt_sm--8">
<button class="rbt-btn rbt-btn-md">
<i class="fa-regular fa-cart-shopping mr--4"></i> Add To Cart All
</button>
<button class="rbt-btn rbt-btn-md rbt-btn-border">
Add All To Wishlist
</button>
</div>
</div>
</div>
<div class="rbt-pricing-box-bottom">
<!-- product info list -->
<ul class="rbt-combo-prd-list liststyle">
<li class="rbt-single-prd">
<div class="input-part">
<input id="rbt-cmb-prd-1" class="rbt-check-green" type="checkbox"
name="rbt-cmb-prd-1">
<label for="rbt-cmb-prd-1">G244F 23.8 inch FHD 4k apid IPS 70Hz Super
Vertical </label>
</div>
<div class="single-prd-select-area">
<div class="rbt-modern-select single-prd-select rbt-sm-size">
<select class="rbt-select-activation">
<option>Extra Large</option>
...
</select>
</div>
</div>
<div class="pricing-part mt--0">
<del class="price-text">$116.34</del>
<span class="price-text">$69.78</span>
</div>
</li>
<li class="rbt-single-prd">
<div class="input-part">
<input id="rbt-cmb-prd-2" class="rbt-check-green" type="checkbox"
name="rbt-cmb-prd-2">
<label for="rbt-cmb-prd-2">Philips PerfectCare Elite Plus GC9682/80
Steam Generator Iron </label>
</div>
<div class="single-prd-select-area">
<div class="rbt-modern-select single-prd-select rbt-sm-size">
<select class="rbt-select-activation">
<option>Extra Large</option>
...
</select>
</div>
</div>
<div class="pricing-part mt--0">
<del class="price-text">$116.34</del>
<span class="price-text">$69.78</span>
</div>
</li>
<li class="rbt-single-prd">
<div class="input-part">
<input id="rbt-cmb-prd-3" class="rbt-check-green" type="checkbox"
name="rbt-cmb-prd-3">
<label for="rbt-cmb-prd-3">Get Great Discounts on a Xiaomi Branded
TWS.</label>
</div>
<div class="single-prd-select-area">
<div class="rbt-modern-select single-prd-select rbt-sm-size">
<select class="rbt-select-activation">
<option>Extra Large</option>
...
</select>
</div>
</div>
<div class="pricing-part mt--0">
<del class="price-text">$116.34</del>
<span class="price-text">$69.78</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<h5 class="mb--16">Buy more save more!</h5>
<div class="rbt-save-more-box-list">
<div class="rbt-single-box flex-fill">
<input type="radio" name="save_box" id="save_box-1">
<label for="save_box-1" class="rbt-label">
<div class="pricing-part mt--0">
<span class="price-text">$29.99</span>
</div>
<p class="rbt-product-quantity">05 - 09 pieces</p>
</label>
</div>
<div class="rbt-single-box flex-fill">
<input type="radio" name="save_box" id="save_box-2">
<label for="save_box-2" class="rbt-label">
<div class="pricing-part mt--0">
<span class="price-text">$24.99</span>
<span class="rbt-off-amount">(5% off)</span>
</div>
<p class="rbt-product-quantity">10 - 19 pieces</p>
</label>
</div>
<div class="rbt-single-box flex-fill">
<input type="radio" name="save_box" id="save_box-3">
<label for="save_box-3" class="rbt-label">
<h5 class="text-nowrap mb--4 rbt-text-bold">
$2.72
<span class="rbt-off-amount">(7% off)</span>
</h5>
<p class="rbt-product-quantity">20 - 50 pieces</p>
</label>
</div>
</div>
<h5 class="mb--16">Buy more save more!</h5>
<div class="rbt-save-more-box-list rbt-list-row">
<div class="rbt-single-box flex-fill">
<input type="radio" name="save_box" id="save_box-4">
<label for="save_box-4" class="rbt-label">
<div class="pricing-part mt--0">
<span class="price-text">$29.99</span>
</div>
<p class="rbt-product-quantity">05 - 09 pieces</p>
</label>
</div>
<div class="rbt-single-box flex-fill">
<input type="radio" name="save_box" id="save_box-5">
<label for="save_box-5" class="rbt-label">
<div class="pricing-part mt--0">
<span class="price-text">$24.99</span>
<span class="rbt-off-amount">(5% off)</span>
</div>
<p class="rbt-product-quantity">10 - 19 pieces</p>
</label>
</div>
<div class="rbt-single-box flex-fill">
<input type="radio" name="save_box" id="save_box-6">
<label for="save_box-6" class="rbt-label">
<p class="rbt-product-quantity">20 - 50 pieces</p>
<h5 class="text-nowrap mb--4 rbt-text-bold">
$2.72
<span class="rbt-off-amount">(7% off)</span>
</h5>
</label>
</div>
</div>
Drag & Drop Files Here Or
0 of 10
<div class="rbt-file-upload-container">
<input type="file" class="fileInput" multiple hidden>
<div class="file-upload-area fileUploadArea">
<div class="file-upload-content">
<span class="rbt-icon"><i class="fa-solid fa-cloud-arrow-up"></i></span>
<p class="rbt-title">Drag & Drop Files Here <span class="rbt-text-color-gray-400">Or</span></p>
<button class="browseFilesButton rbt-btn rbt-btn-sm">Browse Files</button>
</div>
<div class="fileList file-list"></div>
</div>
<p class="fileCount">0 of 10</p>
</div>