Happy 80th Independence Day 🇮🇳

video image

video image

Tags: Liquid Codes, homepage · 10 Aug 2026

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>

Instructions

Heyy Guys 👋
Watch the video below to learn how to Import these Codes into your Shopify Ecommerce Store!

Complete Video Tutorial: