Click to Know More
Page: Product Pages (Optimized for Conversions)
Snippet Code
<style>
.flex-col13 {
flex-direction: column;
}
p:not(:only-of-type) {
margin-bottom: 0rem;
}
.flex {
display: flex;
}
.text-content-1 {
--tw-text-opacity: 1;
color: rgb(17 23 20 / var(--tw-text-opacity));
}
.font-bold {
font-weight: 700;
}
.text-content-5 {
--tw-text-opacity: 1;
color: #707472;
}
.leading-[20px] {
line-height: 20px;
}
.font-normal {
font-weight: 400;
}
.rounded-md {
border-radius: .375rem;
}
.overflow-hidden {
overflow: hidden;
}
.object-cover {
object-fit: cover;
}
.w-full {
width: 100%;
}
img {
max-width: 100%;
height: auto;
display: block;
}
.text-left {
text-align: left;
}
.gap-[24px] {
gap: 24px;
}
.rounded-[8px] {
border-radius: 8px;
}
.gap-[12px] {
gap: 12px;
}
.items-center {
align-items: center;
}
.w-fit {
width: fit-content;
}
.text-content-primary {
--tw-text-opacity: 1;
}
.relative {
position: relative;
}
img {
max-width: 100%;
height: auto;
}
.gap-[14px] {
gap: 14px;
}
.pb-[14px] {
padding-bottom: 14px;
}
.border-categoryDivider {
--tw-border-opacity: 1;
border-color: rgb(222 230 232 / var(--tw-border-opacity));
}
.border-b {
border-bottom-width: 1px;
}
.gap-[6px] {
gap: 6px;
}
.object-fill {
object-fit: fill;
}
.Fw500Fs14Hex404543 {
font-family: var(--font-lato);
font-weight: 500;
--tw-text-opacity: 1;
color: rgb(64 69 67 / var(--tw-text-opacity));
}
.duration-700 {
transition-duration: .7s;
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.opacity-0 {
opacity: 0;
}
.max-h-0 {
max-height: 0;
}
.!text-content-5 {
--tw-text-opacity: 1 !important;
color: rgb(112 116 114/ 1) !important;
}
.Fw400Fs12HexA0A2A1,
.Fw400Fs14HexA0A2A1 {
font-family: var(--font-lato);
font-weight: 400;
}
@media (min-width: 1024px) {
.desktop:px-0 {
padding-left: 0;
padding-right: 0;
}
.desktop:scroll-mt-[150px] {
scroll-margin-top: 150px;
}
.desktop:max-w-[960px] {
max-width: 960px !important;
}
.desktop:mx-auto {
margin-left: auto;
margin-right: auto;
}
.desktop:gap-[8px] {
gap: 8px;
}
.desktop:leading-[32px] {
line-height: 32px;
}
.desktop:text-[28px] {
font-size: 28px;
}
.desktop:text-[16px] {
font-size: 16px;
}
.desktop:gap-[32px] {
gap: 32px;
}
.desktop:justify-start {
justify-content: flex-start;
}
.desktop:items-start {
align-items: flex-start;
}
.desktop:flex-row {
flex-direction: row;
}
.desktop:mt-[32px] {
margin-top: 32px;
}
.desktop:w-[50%] {
width: 50%;
}
.desktop:py-[8px] {
padding-top: 8px;
padding-bottom: 8px;
}
.desktop:px-[16px] {
padding-left: 16px;
padding-right: 16px;
}
.desktop:cursor-pointer {
cursor: pointer;
}
.desktop:leading-[28px] {
line-height: 28px;
}
.desktop:text-[18px] {
font-size: 18px;
}
.desktop:w-[20px] {
width: 20px;
}
.desktop:h-[20px] {
height: 20px;
}
.desktop:px-[0px] {
padding-left: 0;
padding-right: 0;
}
.desktop:gap-[16px] {
gap: 16px;
}
.desktop:!leading-[20px] {
line-height: 20px !important;
}
.desktop:!text-[18px] {
font-size: 18px !important;
}
.desktop:!leading-[28px] {
line-height: 28px !important;
}
.desktop:!text-[16px] {
font-size: 16px !important;
}
}
</style>
<div class="my-[0px] desktop:my-[0px] first:mt-0">
<div id="benefits"
class="px-[16px] desktop:max-w-[960px] desktop:mx-auto desktop:px-0 scroll-mt-[130px] desktop:scroll-mt-[150px]">
<div class="flex flex-col13 gap-[4px] desktop:gap-[8px]">
<p class="text-[20px] desktop:text-[28px] leading-[24px] desktop:leading-[32px] font-bold text-content-1">
It'is a Malai, not a cream!</p>
<p class="text-[14px] desktop:text-[16px] leading-[20px] font-normal text-content-5">Activated with
Ayurveda, Empowered by Modern Science</p>
</div>
<div
class="flex flex-col13 items-center justify-center gap-[24px] mt-[24px] desktop:flex-row desktop:justify-start desktop:items-start desktop:gap-[32px] desktop:mt-[32px]">
<div style="background-color:#F2F8F9" class="w-full desktop:w-[50%] rounded-md overflow-hidden"><img
alt="usp-image" loading="lazy" width="1500" height="1500" decoding="async" data-nimg="1"
class="object-cover w-full" style="color:transparent" sizes="(min-width: 770px) 60vw, 80vw"
srcset="https://nathabit.in/_nat/images/face_flax_hot_humid_1ab08d3e2e.jpg?format=auto&width=384&quality=75 384w, https://nathabit.in/_nat/images/face_flax_hot_humid_1ab08d3e2e.jpg?format=auto&width=640&quality=75 640w, https://nathabit.in/_nat/images/face_flax_hot_humid_1ab08d3e2e.jpg?format=auto&width=750&quality=75 750w, https://nathabit.in/_nat/images/face_flax_hot_humid_1ab08d3e2e.jpg?format=auto&width=828&quality=75 828w, https://nathabit.in/_nat/images/face_flax_hot_humid_1ab08d3e2e.jpg?format=auto&width=1080&quality=75 1080w, https://nathabit.in/_nat/images/face_flax_hot_humid_1ab08d3e2e.jpg?format=auto&width=1200&quality=75 1200w, https://nathabit.in/_nat/images/face_flax_hot_humid_1ab08d3e2e.jpg?format=auto&width=1920&quality=75 1920w"
src="https://nathabit.in/_nat/images/face_flax_hot_humid_1ab08d3e2e.jpg?format=auto&width=1920&quality=75">
</div>
<div class="flex flex-col13 gap-[24px] w-full text-left items-center desktop:items-start desktop:w-[50%]">
<div style="background-color:#FBF1E6"
class="flex gap-[12px] items-center py-[10px] px-[7px] rounded-[8px] w-fit desktop:cursor-pointer desktop:px-[16px] desktop:py-[8px]">
<p style="color:#8F5A17"
class="font-bold text-[14px] leading-[16px] text-content-primary desktop:text-[18px] desktop:leading-[28px]">
Click to Know More</p>
<div>
<div class="relative w-[16px] h-[16px] desktop:w-[20px] desktop:h-[20px]">
<!-- <img alt="hide eye icon"
loading="lazy" decoding="async" data-nimg="fill"
style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent"
src="/svg/hide-eye-icon.svg"> -->
<i class="fa-regular fa-eye-slash"></i>
</div>
</div>
</div>
<div class="flex flex-col13 w-full gap-[14px] desktop:px-[0px]">
<div class="pb-[14px] border-b last:border-none border-categoryDivider">
<div class="flex flex-col13 gap-[6px]">
<div class="flex gap-[8px] desktop:gap-[16px] items-center"><img alt="icon" loading="lazy" width="20"
height="20" decoding="async" data-nimg="1" class="object-fill" style="color:transparent" sizes="10vw"
srcset="https://nathabit.in/_nat/images/skin_1c50f549f0.svg?format=auto&width=64&quality=75 64w, https://nathabit.in/_nat/images/skin_1c50f549f0.svg?format=auto&width=96&quality=75 96w, https://nathabit.in/_nat/images/skin_1c50f549f0.svg?format=auto&width=128&quality=75 128w, https://nathabit.in/_nat/images/skin_1c50f549f0.svg?format=auto&width=256&quality=75 256w, https://nathabit.in/_nat/images/skin_1c50f549f0.svg?format=auto&width=384&quality=75 384w, https://nathabit.in/_nat/images/skin_1c50f549f0.svg?format=auto&width=640&quality=75 640w, https://nathabit.in/_nat/images/skin_1c50f549f0.svg?format=auto&width=750&quality=75 750w, https://nathabit.in/_nat/images/skin_1c50f549f0.svg?format=auto&width=828&quality=75 828w, https://nathabit.in/_nat/images/skin_1c50f549f0.svg?format=auto&width=1080&quality=75 1080w, https://nathabit.in/_nat/images/skin_1c50f549f0.svg?format=auto&width=1200&quality=75 1200w, https://nathabit.in/_nat/images/skin_1c50f549f0.svg?format=auto&width=1920&quality=75 1920w"
src="https://nathabit.in/_nat/images/skin_1c50f549f0.svg?format=auto&width=1920&quality=75">
<p class="Fw500Fs14Hex404543 !leading-[16px] desktop:!text-[18px] desktop:!leading-[20px]">
7-layer derma penetration for cellular revival</p>
</div>
<div class="overflow-hidden transition-all duration-700 max-h-0 opacity-0">
<p class="Fw400Fs12HexA0A2A1 !text-content-5 desktop:!text-[16px] desktop:!leading-[28px]">
Desi ghee is meticulously washed in copper vessels to create a fluffy,
ultra-moisturizing base that penetrates all 7 layers of the skin. This hydrolysis
process splits fats, enabling deep dermal absorption for unparalleled nourishment.
</p>
</div>
</div>
</div>
<div class="pb-[14px] border-b last:border-none border-categoryDivider">
<div class="flex flex-col13 gap-[6px]">
<div class="flex gap-[8px] desktop:gap-[16px] items-center"><img alt="icon" loading="lazy" width="20"
height="20" decoding="async" data-nimg="1" class="object-fill" style="color:transparent" sizes="10vw"
srcset="https://nathabit.in/_nat/images/sun_b0ce769d76.svg?format=auto&width=64&quality=75 64w, https://nathabit.in/_nat/images/sun_b0ce769d76.svg?format=auto&width=96&quality=75 96w, https://nathabit.in/_nat/images/sun_b0ce769d76.svg?format=auto&width=128&quality=75 128w, https://nathabit.in/_nat/images/sun_b0ce769d76.svg?format=auto&width=256&quality=75 256w, https://nathabit.in/_nat/images/sun_b0ce769d76.svg?format=auto&width=384&quality=75 384w, https://nathabit.in/_nat/images/sun_b0ce769d76.svg?format=auto&width=640&quality=75 640w, https://nathabit.in/_nat/images/sun_b0ce769d76.svg?format=auto&width=750&quality=75 750w, https://nathabit.in/_nat/images/sun_b0ce769d76.svg?format=auto&width=828&quality=75 828w, https://nathabit.in/_nat/images/sun_b0ce769d76.svg?format=auto&width=1080&quality=75 1080w, https://nathabit.in/_nat/images/sun_b0ce769d76.svg?format=auto&width=1200&quality=75 1200w, https://nathabit.in/_nat/images/sun_b0ce769d76.svg?format=auto&width=1920&quality=75 1920w"
src="https://nathabit.in/_nat/images/sun_b0ce769d76.svg?format=auto&width=1920&quality=75">
<p class="Fw500Fs14Hex404543 !leading-[16px] desktop:!text-[18px] desktop:!leading-[20px]">
UV-protective, non-sticky, lightweight moisturizer</p>
</div>
<div class="overflow-hidden transition-all duration-700 max-h-0 opacity-0">
<p class="Fw400Fs12HexA0A2A1 !text-content-5 desktop:!text-[16px] desktop:!leading-[28px]">
Active phyto-constituents from herbs, fruits, and plants, blended with rich
antioxidants, protect against UV damage, tanning, and dermal breakdown, while being
lightweight and deeply absorbing thanks to whipped dhaut ghrit.</p>
</div>
</div>
</div>
<div class="pb-[14px] border-b last:border-none border-categoryDivider">
<div class="flex flex-col13 gap-[6px]">
<div class="flex gap-[8px] desktop:gap-[16px] items-center"><img alt="icon" loading="lazy" width="20"
height="20" decoding="async" data-nimg="1" class="object-fill" style="color:transparent" sizes="10vw"
srcset="https://nathabit.in/_nat/images/anti_age_8cbd45e65d.svg?format=auto&width=64&quality=75 64w, https://nathabit.in/_nat/images/anti_age_8cbd45e65d.svg?format=auto&width=96&quality=75 96w, https://nathabit.in/_nat/images/anti_age_8cbd45e65d.svg?format=auto&width=128&quality=75 128w, https://nathabit.in/_nat/images/anti_age_8cbd45e65d.svg?format=auto&width=256&quality=75 256w, https://nathabit.in/_nat/images/anti_age_8cbd45e65d.svg?format=auto&width=384&quality=75 384w, https://nathabit.in/_nat/images/anti_age_8cbd45e65d.svg?format=auto&width=640&quality=75 640w, https://nathabit.in/_nat/images/anti_age_8cbd45e65d.svg?format=auto&width=750&quality=75 750w, https://nathabit.in/_nat/images/anti_age_8cbd45e65d.svg?format=auto&width=828&quality=75 828w, https://nathabit.in/_nat/images/anti_age_8cbd45e65d.svg?format=auto&width=1080&quality=75 1080w, https://nathabit.in/_nat/images/anti_age_8cbd45e65d.svg?format=auto&width=1200&quality=75 1200w, https://nathabit.in/_nat/images/anti_age_8cbd45e65d.svg?format=auto&width=1920&quality=75 1920w"
src="https://nathabit.in/_nat/images/anti_age_8cbd45e65d.svg?format=auto&width=1920&quality=75">
<p class="Fw500Fs14Hex404543 !leading-[16px] desktop:!text-[18px] desktop:!leading-[20px]">
Anti-aging with infused copper & active antioxidants</p>
</div>
<div class="overflow-hidden transition-all duration-700 max-h-0 opacity-0">
<p class="Fw400Fs12HexA0A2A1 !text-content-5 desktop:!text-[16px] desktop:!leading-[28px]">
Ghee washed in copper vessels infuses youth-protective nanoparticles, boosting
collagen, elastin, and hyaluronic acid while reducing melanin. Antioxidants from
oils, herbs, and fruits repair cellular damage, promoting youthful, healthy skin.
</p>
</div>
</div>
</div>
<div class="pb-[14px] border-b last:border-none border-categoryDivider">
<div class="flex flex-col13 gap-[6px]">
<div class="flex gap-[8px] desktop:gap-[16px] items-center"><img alt="icon" loading="lazy" width="20"
height="20" decoding="async" data-nimg="1" class="object-fill" style="color:transparent" sizes="10vw"
srcset="https://nathabit.in/_nat/images/magic_75056722f8.svg?format=auto&width=64&quality=75 64w, https://nathabit.in/_nat/images/magic_75056722f8.svg?format=auto&width=96&quality=75 96w, https://nathabit.in/_nat/images/magic_75056722f8.svg?format=auto&width=128&quality=75 128w, https://nathabit.in/_nat/images/magic_75056722f8.svg?format=auto&width=256&quality=75 256w, https://nathabit.in/_nat/images/magic_75056722f8.svg?format=auto&width=384&quality=75 384w, https://nathabit.in/_nat/images/magic_75056722f8.svg?format=auto&width=640&quality=75 640w, https://nathabit.in/_nat/images/magic_75056722f8.svg?format=auto&width=750&quality=75 750w, https://nathabit.in/_nat/images/magic_75056722f8.svg?format=auto&width=828&quality=75 828w, https://nathabit.in/_nat/images/magic_75056722f8.svg?format=auto&width=1080&quality=75 1080w, https://nathabit.in/_nat/images/magic_75056722f8.svg?format=auto&width=1200&quality=75 1200w, https://nathabit.in/_nat/images/magic_75056722f8.svg?format=auto&width=1920&quality=75 1920w"
src="https://nathabit.in/_nat/images/magic_75056722f8.svg?format=auto&width=1920&quality=75">
<p class="Fw500Fs14Hex404543 !leading-[16px] desktop:!text-[18px] desktop:!leading-[20px]">
Super-activated face rejuvenator & radiance booster</p>
</div>
<div class="overflow-hidden transition-all duration-700 max-h-0 opacity-0">
<p class="Fw400Fs12HexA0A2A1 !text-content-5 desktop:!text-[16px] desktop:!leading-[28px]">
Fresh fruit pulps, aloe, decocted herbs, and nutrient-rich seeds and spices
holistically nurture dermal tissues, gradually restoring a supple glow.</p>
</div>
</div>
</div>
<div class="pb-[14px] border-b last:border-none border-categoryDivider">
<div class="flex flex-col13 gap-[6px]">
<div class="flex gap-[8px] desktop:gap-[16px] items-center"><img alt="icon" loading="lazy" width="20"
height="20" decoding="async" data-nimg="1" class="object-fill" style="color:transparent" sizes="10vw"
srcset="https://nathabit.in/_nat/images/thumbs_up_4e847d670a.svg?format=auto&width=64&quality=75 64w, https://nathabit.in/_nat/images/thumbs_up_4e847d670a.svg?format=auto&width=96&quality=75 96w, https://nathabit.in/_nat/images/thumbs_up_4e847d670a.svg?format=auto&width=128&quality=75 128w, https://nathabit.in/_nat/images/thumbs_up_4e847d670a.svg?format=auto&width=256&quality=75 256w, https://nathabit.in/_nat/images/thumbs_up_4e847d670a.svg?format=auto&width=384&quality=75 384w, https://nathabit.in/_nat/images/thumbs_up_4e847d670a.svg?format=auto&width=640&quality=75 640w, https://nathabit.in/_nat/images/thumbs_up_4e847d670a.svg?format=auto&width=750&quality=75 750w, https://nathabit.in/_nat/images/thumbs_up_4e847d670a.svg?format=auto&width=828&quality=75 828w, https://nathabit.in/_nat/images/thumbs_up_4e847d670a.svg?format=auto&width=1080&quality=75 1080w, https://nathabit.in/_nat/images/thumbs_up_4e847d670a.svg?format=auto&width=1200&quality=75 1200w, https://nathabit.in/_nat/images/thumbs_up_4e847d670a.svg?format=auto&width=1920&quality=75 1920w"
src="https://nathabit.in/_nat/images/thumbs_up_4e847d670a.svg?format=auto&width=1920&quality=75">
<p class="Fw500Fs14Hex404543 !leading-[16px] desktop:!text-[18px] desktop:!leading-[20px]">
Tailored to meet the unique needs of every season and age group</p>
</div>
<div class="overflow-hidden transition-all duration-700 max-h-0 opacity-0">
<p class="Fw400Fs12HexA0A2A1 !text-content-5 desktop:!text-[16px] desktop:!leading-[28px]">
Different ages, and climates require unique moisturization due to varying humidity,
temperature, moisture and cellular function.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Instructions
Heyy Guys 
Watch the video below to learn how to Import these Codes into your Shopify Ecommerce Store!