Happy 80th Independence Day 🇮🇳

USP

USP

Tags: Liquid Codes, USP · 12 Aug 2026

Page: Homepage

Snippet Code

<style>
  .little-smiles-section {
    background: #FFD2EA;
    /* padding: 50px 20px; */
    text-align: center;
    width: 100%;
  }

  .little-smiles-title {
    font-size: 30px;
    font-weight: 600;
    color: #3c322c;
    margin-bottom: 45px;
    line-height: 1.2;
    font-family: Poppins;
    font-style: normal;
    letter-spacing: normal;
  }

  .little-smiles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1600px;
    margin: 0 auto;
  }

  .little-smiles-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 45px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 230px;
  }

  .little-smiles-card img {
    width: 116px;
    height: 116px;
    object-fit: contain;
    margin-bottom: 25px;
  }

  .little-smiles-card p {
    margin: 0;
    font-size: 20px;
    color: #000000;
    font-weight: 600;
    line-height: 1.4;
    font-family: Nunito, sans-serif;
    font-style: normal;
    letter-spacing: normal;
  }

  .little-smiles-section .section-image-overlay {
    width: 7%;
    /* top: 6%; */
    left: 91%;
  }

  .section-image-overlay.ambient {
    animation: animateAmbientOverlay 9s ease-in-out infinite;
  }

  .section-image-overlay {
    position: absolute;
    object-fit: contain;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }

  @keyframes animateAmbientOverlay {
    0% {
      transform: translate(-50%, -50%) scale(1) rotate(0);
    }

    25% {
      transform: translate(-45%, -55%) scale(.96) rotate(-4deg);
    }

    50% {
      transform: translate(-55%, -45%) scale(1.03) rotate(4deg);
    }

    75% {
      transform: translate(-45%, -55%) scale(.96) rotate(-4deg);
    }

    100% {
      transform: translate(-50%, -50%) scale(1) rotate(0);
    }
  }

  /* Tablet */
  @media screen and (max-width: 1024px) {
    .little-smiles-grid {
      grid-template-columns: repeat(3, 1fr);
    }

    .little-smiles-title {
      font-size: 34px;
    }

    .little-smiles-card p {
      font-size: 24px;
    }
  }

  /* Mobile */
  @media screen and (max-width: 768px) {
    /* .little-smiles-section {
      padding: 35px 15px;
    } */

    .little-smiles-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .little-smiles-title {
      font-size: 26px;
      margin-bottom: 35px;
    }

    .little-smiles-card {
      min-height: 139px;
      padding: 15px 15px;
    }

    .little-smiles-card img {
      width: 41px;
      height: 41px;
      margin-bottom: 25px;
    }

    .little-smiles-card p {
      font-size: 16px;
    }

    .little-smiles-section .section-image-overlay {
      width: 15%;
      /* top: 3%; */
      left: 90%;
    }
  }
</style>

<section class="little-smiles-section">
  <img
    src="https://cdn.shopify.com/s/files/1/0743/8175/4566/files/ChatGPT_Image_May_20__2026__02_46_12_PM-removebg-preview.png?v=1779342902&width=120"
    alt="background shape" width="120" height="120" loading="lazy" sizes="(min-width: 1600px) 100vw,
  (min-width: 750px) calc(100vw - 130px), calc(100vw - 50px)" class="section-image-overlay ambient">

  <h2 class="little-smiles-title">Made for Little Smiles</h2>

  <div class="little-smiles-grid">

    <div class="little-smiles-card">
      <img src="https://cdn.shopify.com/s/files/1/0743/8175/4566/files/11647844_1.png?v=1779342997" alt="Comfort First">
      <p>Cash on Delivery</p>
    </div>

    <div class="little-smiles-card">
      <img src="https://cdn.shopify.com/s/files/1/0743/8175/4566/files/18293694_1.png?v=1779342996"
        alt="Style With Soul">
      <p>Free Ship in India</p>
    </div>

    <div class="little-smiles-card">
      <img src="https://cdn.shopify.com/s/files/1/0743/8175/4566/files/10378077_1.png?v=1779342996"
        alt="For Every Occasion">
      <p>Usually Ship on Time</p>
    </div>

    <!-- <div class="little-smiles-card">
      <img
        src="https://cdn.shopify.com/s/files/1/0661/1501/0654/files/imgi_352_11_d1adf90c-a796-4cc6-9d3c-80fc9545cb18-removebg-preview.png?v=1778578891"
        alt="Mom-Approved Quality">
      <p>Mom-Approved Quality</p>
    </div> -->

  </div>
</section>

Instructions

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

Complete Video Tutorial: