Product description

Design a captivating product description

If you want to make the product's descriptions become more catchy, you can use our custom HTML below.

Step 1: From your Shopify admin, go to Products > choose the products you want to edit.

Step 2: Click Show HTML, then paste the code we provide below.

To change the images, just upload them in Settings > Files and copy the link.

Style #1:

  • Add the code as below:

<div class="flex flex-col items-center">
    <div class="description">
      <h2 class="font-medium text-2xl md:mb-6 leading-7">The Iconic Silhouette</h2>
      <p class="text-color-base leading-7">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil</p>
    </div>
    <div class="img-ctn grid items-center flex-wrap grid-cols-3 justify-between gap-4 md:gap-7"><img alt="img" src="https://cdn.shopify.com/s/files/1/0561/2742/2636/files/customcontent3.jpg?v=1627958045" /> <img alt="img" src="https://cdn.shopify.com/s/files/1/0561/2742/2636/files/customcontent4.jpg?v=1627958045" /> <img alt="img" src="https://cdn.shopify.com/s/files/1/0561/2742/2636/files/customcontent2.jpg?v=1627958045" /></div>
    <div class="list-info grid md:grid-cols-4">
      <div class="info-item">
        <h6 class="font-semibold text-black">Infomation</h6>
        <ul class="list-disc">
          <li>Cutaway collar</li>
          <li>front button fastening</li>
          <li>chest patch pocket</li>
          <li>long sleeves</li>
        </ul>
      </div>
      <div class="info-item">
        <div class="info-item-detail">
          <h6 class="font-semibold text-black">Composition</h6>
          <ul class="list-disc">
            <li>Cutaway collar</li>
            <li>front button fastening</li>
          </ul>
        </div>
      </div>
      <div class="info-item">
        <h6 class="font-semibold text-black">Wearing</h6>
        <p class="text-color-base leading-6">Model is 1.84 m wearing size M</p>
      </div>
      <div class="info-item">
        <h6 class="font-semibold text-black">Washing Instructions</h6>
        <div class="mb-4"><img src="https://cdn.shopify.com/s/files/1/0561/2742/2636/files/customicon4.png?v=1627978072" style="max-width: 185px;" /></div>
        <p class="text-color-base leading-6">Machine wash, no ironing, don’t dry clean, don’t tumble dry</p>
      </div>
    </div>
  </div>
  

Style #2

  • Add the code as below:

<div class="custom-container grid md:grid-cols-3 xl:items-center">
  <div class="img-ctn grid">
    <img src="https://cdn.shopify.com/s/files/1/0561/2742/2636/files/customcontent2.jpg?v=1627958045" alt="img" />
  </div>
  <div class="content grid w-full col-span-2 md:pl-12">
    <div class="description mb-12">
      <h4 class="font-medium text-2xl mb-2.5">The Iconic Silhouette</h4>
      <p>he garments labelled as Committed are products that have been produced using sustainable fibers or processes, reducing their environmental impact. Mango's goal is to support the implementation of practices more committed to the environment, and therefore increase the number of sustainable garments in the collection.</p>
    </div>
    <div class="list-info grid xl:grid-cols-3">
      <div class="info-item">
        <h6 class="font-semibold text-base text-black">Infomation</h6>
        <ul class="list-disc text-color-base">
          <li>Cutaway collar</li>
          <li>front button fastening</li>
          <li>chest patch pocket</li>
          <li>long sleeves</li>
        </ul>
      </div>
      <div class="info-item">
        <div class="info-item-detail mb-6">
          <h6 class="font-semibold text-base text-black">Composition</h6>
          <p>Cotton 100%</p>
        </div>
        <div class="info-item-detail">
          <p class="font-semibold text-base text-black">Wearing</p>
          <p>
            Model is 1.84 m wearing <br />
            size M
          </p>
        </div>
      </div>
      <div class="info-item">
        <h6 class="font-semibold text-base text-black">Washing Instructions</h6>
        <div class="mb-4">
          <img src="https://cdn.shopify.com/s/files/1/0561/2742/2636/files/customicon4.png?v=1627978072" style="max-width: 185px;" />
        </div>
        <p class="leading-6">Machine wash, no ironing, don’t dry clean, don’t tumble dry</p>
      </div>
    </div>
  </div>
</div>

Style #3:

  • Add the code as below:

<div class="flex flex-col items-center">
    <div class="description mb-12">
      <h4 class="font-medium text-2xl mb-2.5 leading-7">The Iconic Silhouette</h2>
      <p class=" leading-7">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil</p>
    </div>
    <div class="list-info grid md:grid-cols-4 mb-10">
      <div class="info-item">
        <h6 class="font-semibold text-base">Infomation</h6>
        <ul class="list-disc">
          <li>Cutaway collar</li>
          <li>front button fastening</li>
          <li>chest patch pocket</li>
          <li>long sleeves</li>
        </ul>
      </div>
      <div class="info-item">
        <div class="info-item-detail">
          <h6 class="font-semibold text-base">Composition</h6>
          <ul class="list-disc">
            <li>Cutaway collar</li>
            <li>front button fastening</li>
          </ul>
        </div>
      </div>
      <div class="info-item">
        <h6 class="font-semibold text-base">Wearing</h6>
        <p>Model is 1.84 m wearing size M</p>
      </div>
      <div class="info-item">
        <h6 class="font-semibold text-base">Washing Instructions</h6>
        <div class="md:pr-4"><img src="https://cdn.shopify.com/s/files/1/0561/2742/2636/files/customicon4.png?v=1627978072" style="max-width: 185px;"  /></div>
        <p>Machine wash, no ironing, don’t dry clean, don’t tumble dry</p>
      </div>
    </div>
    <div class="content grid md:grid-cols-2 items-center">
      <div class="md:pr-10"><img src="https://cdn.shopify.com/s/files/1/0561/2742/2636/files/customcontent1.jpg?v=1627958045" /></div>
      <div class="content-text md:pl-12">
        <h6 class="mb-6" style="font-size: 42px; font-weight: 400;">Poplin Top With <br>Ruffle Trim</h6>
        <p class="leading-relaxed">We believe in crafting pieces where sustainability and style go hand in hand. Made from materials like recycled cashmere and sust</p>
      </div>
    </div>
  </div>
  

Last updated