image and text with slider
Page: Product Pages (Optimized for Conversions)
Snippet Code
<style>
.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;
}
.overflow-x-scroll {
overflow-x: scroll;
}
.w-min {
width: min-content;
}
.border-[#B07C49] {
--tw-border-opacity: 1;
border-color: rgb(176 124 73 / var(--tw-border-opacity));
}
.border-2 {
border-width: 2px;
}
.overflow-hidden {
overflow: hidden;
}
.relative {
position: relative;
}
.object-cover {
object-fit: cover;
}
img {
max-width: 100%;
display: block;
}
.text-center {
text-align: center;
}
.py-1 {
padding-top: .25rem;
padding-bottom: .25rem;
}
.px-[10px] {
padding-left: 10px;
padding-right: 10px;
}
.bg-[#B07C49] {
--tw-bg-opacity: 1;
background-color: rgb(176 124 73 / var(--tw-bg-opacity));
}
.justify-center {
justify-content: center;
}
.items-center {
align-items: center;
}
.transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-1/2 {
--tw-translate-x: -50%;
}
.left-1/2 {
left: 50%;
}
.bottom-0 {
bottom: 0;
}
.absolute {
position: absolute;
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.tracking-wider {
letter-spacing: .05em;
}
.leading-[12px] {
line-height: 12px;
}
.uppercase {
text-transform: uppercase;
}
.font-[400] {
font-weight: 400;
}
.text-[10px] {
font-size: 10px;
}
.whitespace-nowrap {
white-space: nowrap;
}
.Fw400Fs14Hex404543 {
font-family: var(--font-lato);
--tw-text-opacity: 1;
color: #404543;
}
.!text-content-5 {
--tw-text-opacity: 1 !important;
color: rgb(112 116 114/ 1) !important;
}
.Fw400Fs12HexA0A2A1 {
font-family: var(--font-lato);
font-weight: 400;
}
.border-darkWhite {
--tw-border-opacity: 1;
border-color: rgb(243 243 243 / var(--tw-border-opacity));
}
.border {
border-width: 1px;
}
@media (min-width: 1024px) {
.desktop:my-[50px] {
margin-top: 50px;
margin-bottom: 50px;
}
.desktop:scroll-mt-[150px] {
scroll-margin-top: 150px;
}
.desktop:max-w-[960px] {
max-width: 960px;
}
.desktop:mx-auto {
margin-left: auto;
margin-right: auto;
}
.desktop:px-0 {
padding-left: 0;
padding-right: 0;
}
.desktop:gap-[8px] {
gap: 8px;
}
.desktop:leading-[32px] {
line-height: 32px;
}
.desktop:text-[28px] {
font-size: 28px;
}
.desktop:text-[16px] {
font-size: 16px;
}
.desktop:pt-[32px] {
padding-top: 32px;
}
.desktop:pb-[32px] {
padding-bottom: 32px;
}
.desktop:pb-[16px] {
padding-bottom: 16px;
}
.desktop:gap-[24px] {
gap: 24px;
}
.desktop:rounded-[16px] {
border-radius: 16px;
}
.desktop:w-[220px] {
width: 220px;
}
.desktop:h-[220px] {
height: 220px;
}
.desktop:tracking-widest {
letter-spacing: .1em;
}
.desktop:text-[13px] {
font-size: 13px;
}
.desktop:rounded-t-md {
border-top-left-radius: .375rem;
border-top-right-radius: .375rem;
}
.desktop:h-[24px] {
height: 24px;
}
.desktop:text-center {
text-align: center;
}
.desktop:pt-[20px] {
padding-top: 20px;
}
.desktop:!leading-[20px] {
line-height: 20px !important;
}
.desktop:!font-bold {
font-weight: 700 !important;
}
.desktop:!text-[18px] {
font-size: 18px !important;
}
.desktop:!leading-[24px] {
line-height: 24px !important;
}
.desktop:!text-[16px] {
font-size: 16px !important;
}
.desktop:mt-[4px] {
margin-top: 4px;
}
}
@media (max-width: 768px) {
.relative.w-[140px].h-[140px].rounded-[8px].overflow-hidden.desktop:w-[220px].desktop:h-[220px].desktop:rounded-[16px].border-2.border-[#B07C49] {
width: 135px;
height: 135px;
}
.relative.w-[140px].h-[140px].rounded-[8px].overflow-hidden.desktop:w-[220px].desktop:h-[220px].desktop:rounded-[16px].border-darkWhite.border {
width: 135px;
height: 135px;
}
.pb-[16px].desktop:pb-[32px].pt-[24px].desktop:pt-[32px] {
margin-top: 20px;
margin-bottom: 20px;
}
p.Fw400Fs11HexA0A2A1.!leading-[16px].desktop:!text-[16px].desktop:!leading-[24px] {
border-top: 1px solid #dee6e8;
padding-top: 15px;
}
}
.center-keliye {
width: 100%;
display: flex;
justify-content: center;
}
</style>
<div class="my-[30px] desktop:my-[50px] first:mt-0">
<div id="ingredients" class="scroll-mt-[130px] desktop:scroll-mt-[150px]">
<div class="desktop:max-w-[960px] desktop:mx-auto">
<div class="flex flex-col gap-[4px] px-[16px] desktop:px-0 desktop:gap-[8px]">
<p
class="text-[20px] desktop:text-[28px] leading-[24px] desktop:leading-[32px] font-bold text-content-1">
Active Ingredients</p>
<p class="text-[14px] desktop:text-[16px] leading-[20px] font-normal text-content-5">Fresh & whole
picks</p>
</div>
<div>
<div class="pb-[16px] desktop:pb-[32px] pt-[24px] desktop:pt-[32px]">
<div
class="flex gap-[12px] overflow-x-scroll nav-scrollbar desktop:gap-[24px] desktop:pb-[16px] px-[16px] desktop:px-0">
<div class="w-min">
<div style="background-color:#F2F8F9"
class="relative w-[140px] h-[140px] rounded-[8px] overflow-hidden desktop:w-[220px] desktop:h-[220px] desktop:rounded-[16px] border-2 border-[#B07C49]">
<img alt="ingredient" loading="lazy" decoding="async" data-nimg="fill"
class="object-cover"
style="height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent"
sizes="30vw"
srcset="https://nathabit.in/_nat/images/dhaut_ghrit_40a01a98b4.jpg?format=auto&width=256&quality=75 256w, https://nathabit.in/_nat/images/dhaut_ghrit_40a01a98b4.jpg?format=auto&width=384&quality=75 384w, https://nathabit.in/_nat/images/dhaut_ghrit_40a01a98b4.jpg?format=auto&width=640&quality=75 640w, https://nathabit.in/_nat/images/dhaut_ghrit_40a01a98b4.jpg?format=auto&width=750&quality=75 750w, https://nathabit.in/_nat/images/dhaut_ghrit_40a01a98b4.jpg?format=auto&width=828&quality=75 828w, https://nathabit.in/_nat/images/dhaut_ghrit_40a01a98b4.jpg?format=auto&width=1080&quality=75 1080w, https://nathabit.in/_nat/images/dhaut_ghrit_40a01a98b4.jpg?format=auto&width=1200&quality=75 1200w, https://nathabit.in/_nat/images/dhaut_ghrit_40a01a98b4.jpg?format=auto&width=1920&quality=75 1920w"
src="https://nathabit.in/_nat/images/dhaut_ghrit_40a01a98b4.jpg?format=auto&width=1920&quality=75">
<div class="center-keliye">
<div
class="absolute bottom-0 transform -translate-x-1/2 text-center bg-[#B07C49] py-1 px-[10px] flex justify-center items-center rounded-t-[4px] h-[20px] desktop:h-[24px] desktop:text-[13px] desktop:rounded-t-md desktop:tracking-widest">
<p
class="whitespace-nowrap font-[400] text-white text-[10px] uppercase leading-[12px] tracking-wider">
In Copper Vessels</p>
</div>
</div>
</div>
<div class="pt-[16px] desktop:pt-[20px] desktop:text-center">
<p
class="Fw400Fs14Hex404543 !leading-[20px] desktop:!text-[18px] desktop:!leading-[20px] desktop:!font-bold">
Washed Ghee</p>
<p
class="Fw400Fs12HexA0A2A1 !text-content-5 desktop:!text-[16px] desktop:!leading-[24px] desktop:mt-[4px]">
Deeply penetrates for lightweight, long-lasting hydration; boosts lipid production,
skin regeneration, and tissue repair.</p>
</div>
</div>
<div class="w-min">
<div style="background-color:#EDF5EB"
class="relative w-[140px] h-[140px] rounded-[8px] overflow-hidden desktop:w-[220px] desktop:h-[220px] desktop:rounded-[16px] border-darkWhite border">
<img alt="ingredient" loading="lazy" decoding="async" data-nimg="fill"
class="object-cover"
style="height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent"
sizes="30vw"
srcset="https://nathabit.in/_nat/images/raw_milk_366c486ff0.jpg?format=auto&width=256&quality=75 256w, https://nathabit.in/_nat/images/raw_milk_366c486ff0.jpg?format=auto&width=384&quality=75 384w, https://nathabit.in/_nat/images/raw_milk_366c486ff0.jpg?format=auto&width=640&quality=75 640w, https://nathabit.in/_nat/images/raw_milk_366c486ff0.jpg?format=auto&width=750&quality=75 750w, https://nathabit.in/_nat/images/raw_milk_366c486ff0.jpg?format=auto&width=828&quality=75 828w, https://nathabit.in/_nat/images/raw_milk_366c486ff0.jpg?format=auto&width=1080&quality=75 1080w, https://nathabit.in/_nat/images/raw_milk_366c486ff0.jpg?format=auto&width=1200&quality=75 1200w, https://nathabit.in/_nat/images/raw_milk_366c486ff0.jpg?format=auto&width=1920&quality=75 1920w"
src="https://nathabit.in/_nat/images/raw_milk_366c486ff0.jpg?format=auto&width=1920&quality=75">
</div>
<div class="pt-[16px] desktop:pt-[20px] desktop:text-center">
<p
class="Fw400Fs14Hex404543 !leading-[20px] desktop:!text-[18px] desktop:!leading-[20px] desktop:!font-bold">
Raw Milk</p>
<p
class="Fw400Fs12HexA0A2A1 !text-content-5 desktop:!text-[16px] desktop:!leading-[24px] desktop:mt-[4px]">
Rich in beta casein, Vit- A, D & E & micro-nutrients, deeply nourishes &
moisturises, rendering anti-aging radiance.</p>
</div>
</div>
<div class="w-min">
<div style="background-color:#FCF4FE"
class="relative w-[140px] h-[140px] rounded-[8px] overflow-hidden desktop:w-[220px] desktop:h-[220px] desktop:rounded-[16px] border-darkWhite border">
<img alt="ingredient" loading="lazy" decoding="async" data-nimg="fill"
class="object-cover"
style="height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent"
sizes="30vw"
srcset="https://nathabit.in/_nat/images/brown_flax_1_da9043b2ee.jpg?format=auto&width=256&quality=75 256w, https://nathabit.in/_nat/images/brown_flax_1_da9043b2ee.jpg?format=auto&width=384&quality=75 384w, https://nathabit.in/_nat/images/brown_flax_1_da9043b2ee.jpg?format=auto&width=640&quality=75 640w, https://nathabit.in/_nat/images/brown_flax_1_da9043b2ee.jpg?format=auto&width=750&quality=75 750w, https://nathabit.in/_nat/images/brown_flax_1_da9043b2ee.jpg?format=auto&width=828&quality=75 828w, https://nathabit.in/_nat/images/brown_flax_1_da9043b2ee.jpg?format=auto&width=1080&quality=75 1080w, https://nathabit.in/_nat/images/brown_flax_1_da9043b2ee.jpg?format=auto&width=1200&quality=75 1200w, https://nathabit.in/_nat/images/brown_flax_1_da9043b2ee.jpg?format=auto&width=1920&quality=75 1920w"
src="https://nathabit.in/_nat/images/brown_flax_1_da9043b2ee.jpg?format=auto&width=1920&quality=75">
</div>
<div class="pt-[16px] desktop:pt-[20px] desktop:text-center">
<p
class="Fw400Fs14Hex404543 !leading-[20px] desktop:!text-[18px] desktop:!leading-[20px] desktop:!font-bold">
Flax Seed</p>
<p
class="Fw400Fs12HexA0A2A1 !text-content-5 desktop:!text-[16px] desktop:!leading-[24px] desktop:mt-[4px]">
Rich in lignans, omega-3 & 6 boosts collagen, barrier & elastin, preventing
sagging.</p>
</div>
</div>
<div class="w-min">
<div style="background-color:#f5e8e6"
class="relative w-[140px] h-[140px] rounded-[8px] overflow-hidden desktop:w-[220px] desktop:h-[220px] desktop:rounded-[16px] border-darkWhite border">
<img alt="ingredient" loading="lazy" decoding="async" data-nimg="fill"
class="object-cover"
style="height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent"
sizes="30vw"
srcset="https://nathabit.in/_nat/images/carrot_071bd78c5c.jpg?format=auto&width=256&quality=75 256w, https://nathabit.in/_nat/images/carrot_071bd78c5c.jpg?format=auto&width=384&quality=75 384w, https://nathabit.in/_nat/images/carrot_071bd78c5c.jpg?format=auto&width=640&quality=75 640w, https://nathabit.in/_nat/images/carrot_071bd78c5c.jpg?format=auto&width=750&quality=75 750w, https://nathabit.in/_nat/images/carrot_071bd78c5c.jpg?format=auto&width=828&quality=75 828w, https://nathabit.in/_nat/images/carrot_071bd78c5c.jpg?format=auto&width=1080&quality=75 1080w, https://nathabit.in/_nat/images/carrot_071bd78c5c.jpg?format=auto&width=1200&quality=75 1200w, https://nathabit.in/_nat/images/carrot_071bd78c5c.jpg?format=auto&width=1920&quality=75 1920w"
src="https://nathabit.in/_nat/images/carrot_071bd78c5c.jpg?format=auto&width=1920&quality=75">
</div>
<div class="pt-[16px] desktop:pt-[20px] desktop:text-center">
<p
class="Fw400Fs14Hex404543 !leading-[20px] desktop:!text-[18px] desktop:!leading-[20px] desktop:!font-bold">
Carrot Juice</p>
<p
class="Fw400Fs12HexA0A2A1 !text-content-5 desktop:!text-[16px] desktop:!leading-[24px] desktop:mt-[4px]">
Nutrition packed with carotenoids & Vit-A for UV protected youthful skin.</p>
</div>
</div>
<div class="w-min">
<div style="background-color:#EDF5EB"
class="relative w-[140px] h-[140px] rounded-[8px] overflow-hidden desktop:w-[220px] desktop:h-[220px] desktop:rounded-[16px] border-darkWhite border">
<img alt="ingredient" loading="lazy" decoding="async" data-nimg="fill"
class="object-cover"
style="height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent"
sizes="30vw"
srcset="https://nathabit.in/_nat/images/Screenshot_2022_08_06_at_6_25_52_PM_930d43b70b.jpg?format=auto&width=256&quality=75 256w, https://nathabit.in/_nat/images/Screenshot_2022_08_06_at_6_25_52_PM_930d43b70b.jpg?format=auto&width=384&quality=75 384w, https://nathabit.in/_nat/images/Screenshot_2022_08_06_at_6_25_52_PM_930d43b70b.jpg?format=auto&width=640&quality=75 640w, https://nathabit.in/_nat/images/Screenshot_2022_08_06_at_6_25_52_PM_930d43b70b.jpg?format=auto&width=750&quality=75 750w, https://nathabit.in/_nat/images/Screenshot_2022_08_06_at_6_25_52_PM_930d43b70b.jpg?format=auto&width=828&quality=75 828w, https://nathabit.in/_nat/images/Screenshot_2022_08_06_at_6_25_52_PM_930d43b70b.jpg?format=auto&width=1080&quality=75 1080w, https://nathabit.in/_nat/images/Screenshot_2022_08_06_at_6_25_52_PM_930d43b70b.jpg?format=auto&width=1200&quality=75 1200w, https://nathabit.in/_nat/images/Screenshot_2022_08_06_at_6_25_52_PM_930d43b70b.jpg?format=auto&width=1920&quality=75 1920w"
src="https://nathabit.in/_nat/images/Screenshot_2022_08_06_at_6_25_52_PM_930d43b70b.jpg?format=auto&width=1920&quality=75">
</div>
<div class="pt-[16px] desktop:pt-[20px] desktop:text-center">
<p
class="Fw400Fs14Hex404543 !leading-[20px] desktop:!text-[18px] desktop:!leading-[20px] desktop:!font-bold">
Fresh Aloe Vera</p>
<p
class="Fw400Fs12HexA0A2A1 !text-content-5 desktop:!text-[16px] desktop:!leading-[24px] desktop:mt-[4px]">
Intensely & quickly hydrates with over 97% water content & deep dermal
penetration.</p>
</div>
</div>
</div>
</div>
<div
class="pt-[16px] desktop:text-center mx-[16px] border-t border-categoryDivider desktop:border-0 desktop:mx-0 desktop:pt-0">
<p class="Fw400Fs11HexA0A2A1 !leading-[16px] desktop:!text-[16px] desktop:!leading-[24px]">Full
Ingredient List: See More Info for Full Ingredient List</p>
</div>
<div style="background:linear-gradient(89.87deg, #FFFAF5 4.36%, rgba(255, 250, 245, 0) 100.7%)"
class="w-full mt-[16px] rounded-l-full px-[16px]"></div>
</div>
</div>
</div>
</div>Instructions
Heyy Guys 
Watch the video below to learn how to Import these Codes into your Shopify Ecommerce Store!