button and image & text
Page: Product Pages (Optimized for Conversions)
Snippet Code
<style>
section#shopify-section-template--24296097349947__custom_liquid_wX447U {
background-color: #FFFAF5;
}
.border-b.border-categoryDivider {
border-bottom: 1px solid #dee6e8;
}
p.font-black.text-[14px].leading-[20px].text-content-3.desktop:text-[18px].desktop:leading-[32px] {
font-weight: 600;
}
.pt-[40px] {
padding-top: 40px;
}
.pb-[40px] {
padding-bottom: 40px;
}
.scroll-mt-[100px] {
scroll-margin-top: 100px;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.flex-col {
flex-direction: column;
}
.flex {
display: flex;
}
.text-content-1 {
--tw-text-opacity: 1;
color: rgb(17 23 20 / var(--tw-text-opacity));
}
.font-bold {
font-weight: 700;
}
.no-scrollbar {
scrollbar-width: none;
}
.overflow-x-scroll {
overflow-x: scroll;
}
.rounded-[4px] {
border-radius: 4px;
}
.whitespace-nowrap {
white-space: nowrap;
}
.cursor-pointer {
cursor: pointer;
}
.text-content-3 {
--tw-text-opacity: 1;
}
.font-black {
font-weight: 900;
}
.opacity-50 {
opacity: .5;
}
.font-semibold {
font-weight: 600;
}
.gap-[16px] {
gap: 16px;
}
.w-full {
width: 100%;
}
.items-center {
align-items: center;
}
.text-center {
text-align: center;
}
.rounded-lg {
border-radius: .5rem;
}
.relative {
position: relative;
}
.object-fill {
object-fit: fill;
}
img {
max-width: 100%;
display: block;
}
.!text-content-3 {
--tw-text-opacity: 1 !important;
color: rgb(64 69 67/ 1) !important;
}
.!tracking-[0.16em] {
letter-spacing: .16em !important;
}
.!uppercase {
text-transform: uppercase !important;
}
.Fw700Fs12Hex707472 {
font-family: var(--font-lato);
font-weight: 700;
}
.!text-content-5 {
--tw-text-opacity: 1 !important;
color: rgb(112 116 114/ 1) !important;
}
.Fw400Fs12HexA0A2A1 {
font-family: var(--font-lato);
font-weight: 400;
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.border-dashed {
border-style: dashed;
}
.border {
border-width: 1px;
}
.overflow-hidden {
overflow: hidden;
}
.h-fit {
height: fit-content;
}
.rounded-[8px] {
border-radius: 8px;
}
.border-categoryDivider {
--tw-border-opacity: 1;
border-color: rgb(222 230 232 / var(--tw-border-opacity));
}
.border-b {
border-bottom-width: 1px;
}
.font-normal {
font-weight: 400;
}
.!font-sans {
font-family: var(--font-lato) !important;
}
.px-0 {
padding-left: 0;
padding-right: 0;
}
@media (min-width: 1024px) {
.desktop:my-[50px] {
margin-top: 50px;
margin-bottom: 50px;
}
.desktop:px-[0px] {
padding-left: 0;
padding-right: 0;
}
.desktop:max-w-[960px] {
max-width: 960px;
}
.desktop:px-0 {
padding-left: 0;
padding-right: 0;
}
.desktop:gap-[8px] {
gap: 8px;
}
.desktop:mb-[32px] {
margin-bottom: 32px;
}
.desktop:leading-[32px] {
line-height: 32px;
}
.desktop:text-[28px] {
font-size: 28px;
}
.desktop:gap-[32px] {
gap: 32px;
}
.desktop:p-[8px] {
padding: 8px;
}
.desktop:text-[18px] {
font-size: 18px;
}
.desktop:mt-[24px] {
margin-top: 24px;
}
.desktop:gap-[26px] {
gap: 26px;
}
.desktop:justify-center {
justify-content: center;
}
.desktop:flex-wrap {
flex-wrap: wrap;
}
.desktop:flex {
display: flex;
}
.desktop:w-min {
width: min-content;
}
.desktop:w-[218px] {
width: 218px;
}
.desktop:h-[218px] {
height: 218px;
}
.desktop:mb-[20px] {
margin-bottom: 20px;
}
.desktop:gap-[4px] {
gap: 4px;
}
.desktop:!leading-[24px] {
line-height: 24px !important;
}
.desktop:!text-[18px] {
font-size: 18px !important;
}
.desktop:!text-[16px] {
font-size: 16px !important;
}
.desktop:items-center {
align-items: center;
}
.desktop:flex-col {
flex-direction: column;
}
.desktop:mt-[32px] {
margin-top: 32px;
}
.desktop:mt-0 {
margin-top: 0;
}
.desktop:rounded-[16px] {
border-radius: 16px;
}
.desktop:p-[24px] {
padding: 24px;
}
.desktop:pb-[16px] {
padding-bottom: 16px;
}
.desktop:leading-[28px] {
line-height: 28px;
}
.desktop:text-[16px] {
font-size: 16px;
}
.desktop:pt-[16px] {
padding-top: 16px;
}
}
@media (max-width: 768px) {
.w-[158px].mb-[16px].desktop:mb-[20px].relative.h-[158px].desktop:w-[218px].desktop:h-[218px].rounded-lg {
width: 158px;
height: 158px;
margin-bottom: 15px;
}
p.text-[20px].desktop:text-[28px].leading-[24px].desktop:leading-[32px].font-bold.text-content-1 {
margin-bottom: 20px;
font-weight: 600 !important;
}
.border-b.border-categoryDivider {
padding-bottom: 10px;
margin-bottom: 10px;
}
p.font-black.text-[14px].leading-[20px].text-content-3.desktop:text-[18px].desktop:leading-[32px] {
font-weight: 600;
}
}
</style>
<div class="my-[30px] desktop:my-[50px] first:mt-0">
<div id="how_to_use" style="background-color:#FFFAF5"
class="pt-[40px] pb-[40px] desktop:px-[0px] scroll-mt-[100px]">
<div class="desktop:max-w-[960px] mx-auto">
<div class="flex flex-col gap-[4px] px-[16px] desktop:px-0 desktop:gap-[8px] mb-[24px] desktop:mb-[32px]">
<p
class="text-[20px] desktop:text-[28px] leading-[24px] desktop:leading-[32px] font-bold text-content-1">
Usage</p>
</div>
<div class="flex overflow-x-scroll gap-[16px] no-scrollbar px-[16px] desktop:gap-[32px] desktop:px-0">
<div style="background-color: rgb(143, 90, 23);"
class="py-[2px] px-[4px] rounded-[4px] whitespace-nowrap cursor-pointer desktop:p-[8px]">
<p style="color: white;"
class="font-black text-[14px] leading-[20px] text-content-3 desktop:text-[18px] desktop:leading-[32px]">
How to Use</p>
</div>
<div class="py-[2px] px-[4px] rounded-[4px] whitespace-nowrap cursor-pointer desktop:p-[8px]">
<p style="color: rgb(143, 90, 23);"
class="font-semibold opacity-50 text-[14px] leading-[20px] text-content-3 desktop:text-[18px] desktop:leading-[32px]">
Spa Like Facials</p>
</div>
</div>
<div class="flex gap-[16px] mt-[16px] desktop:mt-[24px]">
<div class="w-full">
<div
class="flex gap-[12px] desktop:flex desktop:justify-center desktop:flex-wrap desktop:gap-[26px] overflow-x-scroll no-scrollbar px-[16px] desktop:px-0">
<div class="flex flex-col items-center desktop:w-min">
<div class="text-center flex items-center flex-col">
<div style="background-color:#8F5A1750"
class="w-[158px] mb-[16px] desktop:mb-[20px] relative h-[158px] desktop:w-[218px] desktop:h-[218px] rounded-lg">
<img alt="steps" loading="lazy" decoding="async" data-nimg="fill"
class="object-fill rounded-lg w-full h-full"
style="height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent"
sizes="(min-width: 770px) 60vw, 80vw"
srcset="https://nathabit.in/_nat/images/Flax_Carrot_1_ef081caffe.jpg?format=auto&width=384&quality=75 384w, https://nathabit.in/_nat/images/Flax_Carrot_1_ef081caffe.jpg?format=auto&width=640&quality=75 640w, https://nathabit.in/_nat/images/Flax_Carrot_1_ef081caffe.jpg?format=auto&width=750&quality=75 750w, https://nathabit.in/_nat/images/Flax_Carrot_1_ef081caffe.jpg?format=auto&width=828&quality=75 828w, https://nathabit.in/_nat/images/Flax_Carrot_1_ef081caffe.jpg?format=auto&width=1080&quality=75 1080w, https://nathabit.in/_nat/images/Flax_Carrot_1_ef081caffe.jpg?format=auto&width=1200&quality=75 1200w, https://nathabit.in/_nat/images/Flax_Carrot_1_ef081caffe.jpg?format=auto&width=1920&quality=75 1920w"
src="https://nathabit.in/_nat/images/Flax_Carrot_1_ef081caffe.jpg?format=auto&width=1920&quality=75">
</div>
<div class="flex flex-col desktop:gap-[4px]">
<p
class="Fw700Fs12Hex707472 !text-content-3 !text-[11px] !leading-[14px] !tracking-[0.16em] !uppercase desktop:!text-[18px] desktop:!leading-[24px]">
Step 1</p>
<p
class="Fw400Fs12HexA0A2A1 !text-content-5 desktop:!text-[16px] desktop:!leading-[24px]">
After cleansing, apply all over face & neck.</p>
</div>
</div>
</div>
<div class="flex flex-col items-center desktop:w-min">
<div class="text-center flex items-center flex-col">
<div style="background-color:#8F5A1750"
class="w-[158px] mb-[16px] desktop:mb-[20px] relative h-[158px] desktop:w-[218px] desktop:h-[218px] rounded-lg">
<img alt="steps" loading="lazy" decoding="async" data-nimg="fill"
class="object-fill rounded-lg w-full h-full"
style="height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent"
sizes="(min-width: 770px) 60vw, 80vw"
srcset="https://nathabit.in/_nat/images/1_1_2_90d4637b25.jpg?format=auto&width=384&quality=75 384w, https://nathabit.in/_nat/images/1_1_2_90d4637b25.jpg?format=auto&width=640&quality=75 640w, https://nathabit.in/_nat/images/1_1_2_90d4637b25.jpg?format=auto&width=750&quality=75 750w, https://nathabit.in/_nat/images/1_1_2_90d4637b25.jpg?format=auto&width=828&quality=75 828w, https://nathabit.in/_nat/images/1_1_2_90d4637b25.jpg?format=auto&width=1080&quality=75 1080w, https://nathabit.in/_nat/images/1_1_2_90d4637b25.jpg?format=auto&width=1200&quality=75 1200w, https://nathabit.in/_nat/images/1_1_2_90d4637b25.jpg?format=auto&width=1920&quality=75 1920w"
src="https://nathabit.in/_nat/images/1_1_2_90d4637b25.jpg?format=auto&width=1920&quality=75">
</div>
<div class="flex flex-col desktop:gap-[4px]">
<p
class="Fw700Fs12Hex707472 !text-content-3 !text-[11px] !leading-[14px] !tracking-[0.16em] !uppercase desktop:!text-[18px] desktop:!leading-[24px]">
Step 2</p>
<p
class="Fw400Fs12HexA0A2A1 !text-content-5 desktop:!text-[16px] desktop:!leading-[24px]">
Massage gently by repeating these strokes - center to side of forehead, under
the eyes from nose to side of eyes.</p>
</div>
</div>
</div>
<div class="flex flex-col items-center desktop:w-min">
<div class="text-center flex items-center flex-col">
<div style="background-color:#8F5A1750"
class="w-[158px] mb-[16px] desktop:mb-[20px] relative h-[158px] desktop:w-[218px] desktop:h-[218px] rounded-lg">
<img alt="steps" loading="lazy" decoding="async" data-nimg="fill"
class="object-fill rounded-lg w-full h-full"
style="height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent"
sizes="(min-width: 770px) 60vw, 80vw"
srcset="https://nathabit.in/_nat/images/2_14_8c784e3578.jpg?format=auto&width=384&quality=75 384w, https://nathabit.in/_nat/images/2_14_8c784e3578.jpg?format=auto&width=640&quality=75 640w, https://nathabit.in/_nat/images/2_14_8c784e3578.jpg?format=auto&width=750&quality=75 750w, https://nathabit.in/_nat/images/2_14_8c784e3578.jpg?format=auto&width=828&quality=75 828w, https://nathabit.in/_nat/images/2_14_8c784e3578.jpg?format=auto&width=1080&quality=75 1080w, https://nathabit.in/_nat/images/2_14_8c784e3578.jpg?format=auto&width=1200&quality=75 1200w, https://nathabit.in/_nat/images/2_14_8c784e3578.jpg?format=auto&width=1920&quality=75 1920w"
src="https://nathabit.in/_nat/images/2_14_8c784e3578.jpg?format=auto&width=1920&quality=75">
</div>
<div class="flex flex-col desktop:gap-[4px]">
<p
class="Fw700Fs12Hex707472 !text-content-3 !text-[11px] !leading-[14px] !tracking-[0.16em] !uppercase desktop:!text-[18px] desktop:!leading-[24px]">
Step 3</p>
<p
class="Fw400Fs12HexA0A2A1 !text-content-5 desktop:!text-[16px] desktop:!leading-[24px]">
Upward strokes on cheeks and upward strokes on neck. Use daily as often as
needed. </p>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="desktop:flex desktop:flex-col desktop:items-center desktop:gap-[32px] mt-[24px] desktop:mt-[32px]">
<div
class="mt-[24px] desktop:mt-0 px-[16px] desktop:px-0 desktop:gap-[32px] desktop:flex desktop:justify-center">
<div style="border-color:#8F5A17"
class="h-fit bg-white border border-dashed rounded-[8px] desktop:rounded-[16px] overflow-hidden">
<div class="bg-white rounded-[8px] px-[16px] py-[12px] desktop:p-[24px]">
<div class="border-b border-categoryDivider">
<div class="pb-[8px] desktop:pb-[16px]">
<p style="color:#8F5A17"
class="font-bold text-[14px] leading-[20px] text-content-1 desktop:text-[18px] desktop:leading-[32px]">
Note</p>
</div>
</div>
<div style="color:#8F5A17"
class="!font-sans text-[14px] leading-[20px] desktop:text-[16px] font-normal pt-[8px] desktop:pt-[16px] desktop:leading-[28px] px-0">
<p>Massage well till the malai is fully absorbed into the skin,
else the aloe part of the malai will give an unnecessary tightening on skin.
</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!