Happy 80th Independence Day 🇮🇳

icon and text

icon and text

Tags: Liquid Codes, icon and text · 10 Aug 2026

Page: Product Pages (Optimized for Conversions)

Snippet Code

<style>
  .tcc-section {
    padding: 60px 0 50px;
  }

  .ttc-text-center {
    text-align: center;
  }

  .ttc-container {
    max-width: 1370px;
    margin: auto;
    padding: 0 15px;
  }

  .ttc-section-title {
    margin-bottom: 30px;
    display: inline-block;
    width: 100%;
  }

  .ttc-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
    justify-content: center;
  }

  .ttc-row>div {
    padding-left: 15px;
    padding-right: 15px;
    flex: 0 0 auto;
  }

  .ttc-col-6 {
    width: 50%;
  }

  .ttc-product-tip-box.ttc-bg-gray {
    padding: 30px 20px 40px;
    border-radius: 12px;
    height: 100%;
    background: #f6f6f6;
  }

  .ttc-product-tip-icon {
    width: 70px;
    height: 70px;
    background: #fff;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    padding: 15px;
    overflow: hidden;
    margin-bottom: 15px;
  }

  .ttc-product-tip-icon img {
    width: 100%;
  }

  img {
    max-width: 100%;
    height: auto;
    border-style: none;
    vertical-align: top;
  }

  .ttc-product-tip-box h3 {
    color: #8d1c1c;
    text-align: center;
    font-size: 30px;
    font-weight: 400;
    margin-bottom: 10px;
    margin-top: 10px;
    line-height: 1.2;
    font-family: "Inria Serif", serif !important;
    text-transform: capitalize;
  }

  .ttc-product-tip-box p {
    color: #475467;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 0;
  }

  .prod-third a {
    font-family: Chapaza;
    text-decoration-line: underline;
    color: #8d1c1c;
  }

  a {
    background-color: transparent;
    text-decoration: none;
  }

  /* Responsive Design */
  @media (max-width: 991px) {
    .ttc-col-6 {
      width: 100%;
      margin-bottom: 30px;
    }

    .ttc-section {
      padding: 40px 0 30px;
    }

    .ttc-product-tip-box {
      padding: 25px 15px 30px;
    }

    .ttc-product-tip-box h3 {
      font-size: 26px;
    }
  }

  @media (max-width: 575px) {
    .ttc-product-tip-icon {
      width: 60px;
      height: 60px;
      padding: 10px;
    }

    .ttc-product-tip-box h3 {
      font-size: 22px;
    }

    .prod-third a {
      font-size: 16px;
    }
  }
</style>

<div id="shopify-section-text-columns" class="shopify-section prod-third">
  <section class="tcc-section ttc-text-center">
    <div class="ttc-container">
      <div class="ttc-section-title"></div>
      <div class="ttc-row">

        <div class="ttc-col-6 ttc-col-sm-12 ttc-mb-sm-10">
          <div class="ttc-product-tip-box ttc-bg-gray">
            <span class="ttc-product-tip-icon"><img
                src="//thetribeconcepts.com/cdn/shop/t/45/assets/image-37.png?v=176742626407921877791732293740"
                alt=""></span>
            <h3>Secret tip</h3>
            <p>Warm the oil over hot water or by placing it in an oven for ten seconds to get better results.</p>
          </div>
        </div>

        <div class="ttc-col-6 ttc-col-sm-12 ttc-mb-sm-10">
          <div class="ttc-product-tip-box ttc-bg-gray">
            <span class="ttc-product-tip-icon"><img
                src="//thetribeconcepts.com/cdn/shop/t/45/assets/image-39.png?v=76202819481411063221732293781"
                alt=""></span>
            <h3>Best used with our</h3>
            <p><a href="#">Organic Hair Cleanser</a></p>
          </div>
        </div>

      </div>
    </div>
  </section>
</div>

Instructions

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

Complete Video Tutorial: