Custom Product Comparison Chart in Shopify [without any App]

Make sure to Follow me on FACEBOOK

This is the HTML of the section. Feel free to update the code according to your requirements.

<table style="width: 100%; max-width: 1000px; margin: auto; text-align: center; font-family: sans-serif;">
  <!-- Header Row -->
  <tr>
    <td></td>
    <td style="background: #FFDBBC; border-radius: 12px 12px 0 0">
      <img src="https://www.prokegel.com/cdn/shop/files/20240222155708.jpg" alt="Super Kegel" style="width: 80px; margin-bottom: 10px;"><br>
      <strong>Super Kegel</strong>
    </td>
    <td style="padding: 20px;">
      <img src="https://gempages-demo.myshopify.com/cdn/shop/t/1/assets/495611768014373769-e55d51f4-9946-4a30-8066-6ac032ac28f5.png" alt="Other Brand" style="width: 40px; margin-bottom: 10px;border-radius:0"><br>
      <strong>Other Brand</strong>
    </td>
  </tr>

  <!-- Feature Rows -->
  <tr>
    <td style="text-align: left; padding: 16px 20px; border-radius: 12px 0 0 0; background-color:#fff">Drug-free</td>
    <td class="check-col"><span>✔</span></td>
    <td class="cross-col" style="border-radius: 0 12px 0  0"><span >✖</span></td>
  </tr>
  <tr>
    <td style="text-align: left; padding: 16px 20px; background-color:#fff">Convenient & Easy to use</td>
    <td class="check-col"><span>✔</span></td>
    <td class="cross-col"><span>✖</span></td>
  </tr>
  <tr>
    <td style="text-align: left; padding: 16px 20px; background-color:#fff">Long- Lasting result</td>
    <td class="check-col"><span>✔</span></td>
    <td class="cross-col"><span>✖</span></td>
  </tr>
  <tr>
    <td style="text-align: left; padding: 16px 20px; background-color:#fff">Personalized mode</td>
    <td class="check-col"><span>✔</span></td>
    <td class="cross-col"><span>✖</span></td>
  </tr>
  <tr>
    <td style="text-align: left; padding: 16px 20px; background-color:#fff">No side-effect</td>
    <td class="check-col"><span>✔</span></td>
    <td class="cross-col"><span>✖</span></td>
  </tr>
  <tr>
    <td style="text-align: left; padding: 16px 20px;border-radius: 0 0 0 12px; background-color:#fff">Affordable</td>
    <td class="check-col"><span>✔</span></td>
    <td class="cross-col" style="border-radius: 0 0 12px  0"><span>✖</span></td>
  </tr>
</table>

This is the Css of the section.

table td {
  border: none;
  font-size: 18px;
}
.check-col {
  background-color: #ffdbbc;
}
.check-col span {
  background-color: #ee6f4b;
  color: #fff;
  padding: 5px 7px;
  font-size: 12px;
  border-radius: 50%;
}
.cross-col {
  background-color: #fff;
}
.cross-col span {
  background-color: #888;
  color: #fff;
  padding: 5px 7px;
  font-size: 15px;
  border-radius: 50%;
}
table {
  box-shadow: none;
}
table img {
  margin-top: -70px;
  border-radius: 50%;
}
@media (max-width: 580px) {
  table td {
    font-size: 14px;
  }
  .check-col span,
  .cross-col span {
    font-size: 14px;
    padding: 3px 5px;
  }
}