video image
Page: Homepage


Snippet Code
<style>
.banner-section-personalized {
position: relative;
width: 100%;
overflow: hidden;
}
.shopify-section {
color: #1a1a1a;
scroll-margin-top: calc(var(--header-height, 0px) * 1 + var(0px) * var(0));
}
.mobile-only-section {
display: none;
}
.mobile-only-section {
aspect-ratio: 16 / 9;
}
.banner-section-personalized .banner-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
img {
vertical-align: top;
border-style: none;
max-width: 100%;
}
.banner-section-personalized .content {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 5% 6%;
}
.banner-section-personalized .label {
font-weight: 600;
padding: 4px 8px;
font-size: 12px;
margin-top: 3px;
max-width: fit-content;
}
.label {
letter-spacing: .5px;
border-radius: min(2px);
display: inline-block;
}
.banner-section-personalized h1 {
font-size: 2rem;
margin: 0 0 3px 0;
}
.gradient-text-animation {
font-size: 18.75px;
font-weight: 800;
background: linear-gradient(270deg, var(--gradient-colors, #00c9a7, #008080, #005f5f));
background-size: 600% 600%;
-webkit-text-fill-color: transparent;
animation: moveGradient 5s ease infinite;
}
.banner-section-personalized .subheadline {
font-size: 15px;
white-space: pre-line;
margin-bottom: 9px;
max-width: 85%;
}
.banner-section-personalized .cta {
background-color: #FACA0C;
color: black;
font-weight: 900;
font-size: 18px;
padding: 1.5px 21px;
text-decoration: none;
border-radius: 4px;
max-width: fit-content;
margin-top: auto;
margin-bottom: 1.5px;
}
.banner-section-personalized .terms {
font-size: 10.5px;
margin-bottom: 15px;
margin-top: 3px;
}
.desktop-banner-section {
display: block;
}
.desktop-banner-section img {
display: block;
}
img {
vertical-align: top;
border-style: none;
max-width: 100%;
}
div#shopify-section-template--19109741068440__custom_liquid_QKyfNV {
margin-top: 30px;
}
</style>
<section id="shopify-section-template--19445595308261__personalized_banner_BP9EVE"
class="shopify-section banner-section-personalized">
<section class="banner-section-personalized mobile-only-section">
<a href="https://discoverpilgrim.com/products/25-aha-2-bha-5-pha-peeling-solution"
style="display: block; width: 100%; height: 100%; text-decoration: none;">
<img src="//discoverpilgrim.com/cdn/shop/files/ALPHA-ARBUTIN_angle-1600x900.jpg?v=1750915875"
class="banner-background" alt="Banner background" fetchpriority="auto" loading="lazy">
<div class="content">
<div class="label" style="background-color: #18a352; color: #ffffff;">
#2 in Skincare
</div>
<h1 style="color: #000000;"><span class="gradient-text-animation">₹64.5 per facial</span><br>for clean, tan-free
skin!</h1>
<p class="subheadline" style="color: #3f3f3f;">The <b>most cost-effective</b> skincare ever.</p>
<div class="cta">SHOP NOW</div>
<p class="terms" style="color: #3e3e3e;">Based on approx. 10 uses per bottle (₹645 MRP)</p>
</div>
</a>
<script>
window.dataLayer = window.dataLayer || [];
document.addEventListener("DOMContentLoaded", function () {
var cohort = "skincare";
// Impression Event
dataLayer.push({
event: "personalized_banner_impression",
cohort: cohort
});
// Click Event
var bannerSection = document.querySelector('.banner-section-personalized');
if (bannerSection) {
bannerSection.addEventListener('click', function () {
dataLayer.push({
event: "personalized_banner_click",
cohort: cohort
});
});
}
});
</script>
</section>
<section class="desktop-banner-section">
<a href="/products/korean-rice-water-collagen-advanced-damage-repair-shampoo">
<img fetchpriority="auto" loading="lazy"
src="//discoverpilgrim.com/cdn/shop/files/Damage-Control_HomepageBanner_1920x520_2b3807de-81ba-4242-b3ba-e27ac27c60e1.gif?v=1750404827"
alt="Desktop Banner" style="width:100%; height:auto;">
</a>
</section>
</section>