Happy 80th Independence Day 🇮🇳

left cart and right image

left cart and right image

Tags: Liquid Codes, homepage · 08 Aug 2026

Page: Homepage

Snippet Code

<style>
  .juice-section {
    background: #e85c2b;
    padding: 40px 20px;
    display: flex;
    justify-content: center;
  }

  .juice-container {
    max-width: 1800px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }

  /* LEFT CARD */
  .juice-card {
    background: #d9d6cc;
    border-radius: 25px;
    padding: 50px;
    flex: 1;
  }

  .juice-title {
    font-size: 28px;
    letter-spacing: 3px;
    color: #e85c2b;
    margin-bottom: 15px;
  }

  .juice-desc {
    font-size: 14px;
    color: #444;
    margin-bottom: 30px;
    line-height: 1.6;
  }

  .juice-item {
    margin-bottom: 18px;
  }

  .juice-item h4 {
    font-size: 15px;
    color: #e85c2b;
    margin-bottom: 5px;
  }

  .juice-item p {
    font-size: 13px;
    color: #555;
  }

  /* RIGHT IMAGE */
  .juice-image-wrap {
    flex: 1;
    display: flex;
    justify-content: center;
  }

  .juice-image {
    width: 100%;
    max-width: 805px;
    /* aspect-ratio: 1 / 1; */
    /* border-radius: 50%; */
    /* background: #fff; */
    padding: 10px;
    /* box-shadow: 0 15px 0 rgba(0, 0, 0, 0.1); */
  }

  .juice-image img {
    width: 805px;
    height: 496px;
    object-fit: cover;
    /* border-radius: 50% 50% 50% 50%; */
    border-style: solid;
    border-width: 6px 6px 6px 6px;
    border-color: #FFFFFF;
    border-radius: 50% 50% 50% 50%;
    box-shadow: 0px 50px 0px 0px #F47B4A;
  }

  /* RESPONSIVE */
  @media (max-width: 992px) {
    .juice-container {
      flex-direction: column;
    }

    .juice-card {
      padding: 30px;
    }

    .juice-title {
      font-size: 22px;
    }

    .juice-image img {
      width: 306px;
      height: 193px;
      object-fit: cover;
      /* border-radius: 50% 50% 50% 50%; */
      border-style: solid;
      border-width: 6px 6px 6px 6px;
      border-color: #FFFFFF;
      border-radius: 50% 50% 50% 50%;
      box-shadow: 0px 50px 0px 0px #F47B4A;
    }
  }

  @media (max-width: 480px) {
    .juice-title {
      font-size: 18px;
      letter-spacing: 2px;
    }

    .juice-desc {
      font-size: 13px;
    }

    .juice-item h4 {
      font-size: 14px;
    }

    .juice-item p {
      font-size: 12px;
    }
  }
</style>

<div class="juice-section">
  <div class="juice-container">

    <!-- LEFT CONTENT -->
    <div class="juice-card">
      <h2 class="juice-title">FRESH PRESSED JUICES - 16 OZ</h2>

      <p class="juice-desc">
        Boost your immune system and refresh your mind & body with our delicious,
        nutritious fresh pressed juices.
      </p>

      <div class="juice-item">
        <h4>Lean Green Machine</h4>
        <p>Apple, kale, mint, cucumber, celery - $7</p>
      </div>

      <div class="juice-item">
        <h4>The Kale King</h4>
        <p>Kale, apple, lemon, cucumber - $8</p>
      </div>

      <div class="juice-item">
        <h4>The Green Monster</h4>
        <p>Apple, ginger, spinach, parsley, lemon - $8</p>
      </div>

      <div class="juice-item">
        <h4>Morning Rush</h4>
        <p>Apple, cucumber, lemon, cayenne pepper - $7</p>
      </div>

      <div class="juice-item">
        <h4>Fiber For Life</h4>
        <p>Apple, celery, cucumber, collard greens, lemon - $9</p>
      </div>

      <div class="juice-item">
        <h4>Simple Apple</h4>
        <p>Apple - $7</p>
      </div>

      <div class="juice-item">
        <h4>Original Orange</h4>
        <p>Orange - $8</p>
      </div>
    </div>

    <!-- RIGHT IMAGE -->
    <div class="juice-image-wrap">
      <div class="juice-image">
        <img src="https://images.unsplash.com/photo-1600275669439-14e40452d20b?q=80&w=800" alt="Juice">
      </div>
    </div>

  </div>
</div>

Instructions

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

Complete Video Tutorial: