insert a feature table in the product page

Store Design
1

截屏2023-05-05 下午12.56.11.png
截屏2023-05-05 下午12.56.11.png1491×700 24.1 KB

Hi,

I want to insert a feature table in my product detail page. I attached an example like below. And I already I had codes. How can I do. Thanks https://phantomgogo.com/?_ab=0&_fd=0&_sc=1

<style type="text/css">
.tg  {border:none;border-collapse:collapse;border-color:#ccc;border-spacing:0;}
.tg td{background-color:#fff;border-color:#ccc;border-style:solid;border-width:0px;color:#333;
  font-family:Arial, sans-serif;font-size:14px;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{background-color:#f0f0f0;border-color:#ccc;border-style:solid;border-width:0px;color:#333;
  font-family:Arial, sans-serif;font-size:14px;font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-oqs5{background-color:#f9f9f9;border-color:#ffffff;text-align:left;vertical-align:top}
.tg .tg-zv4m{border-color:#ffffff;text-align:left;vertical-align:top}
.tg .tg-jh77{border-color:#646809;text-align:left;vertical-align:top}
</style>
<table class="tg">
<thead>
  <tr>
    <th class="tg-zv4m">Gear</th>
    <th class="tg-jh77">Speed(m/s)</th>
    <th class="tg-zv4m">Run time(min)</th>
    <th class="tg-zv4m">Thrust(kgf)</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="tg-zv4m">1(slow)</td>
    <td class="tg-oqs5">0.6</td>
    <td class="tg-zv4m">60</td>
    <td class="tg-oqs5">3.5</td>
  </tr>
  <tr>
    <td class="tg-zv4m">2(middle)</td>
    <td class="tg-oqs5">1</td>
    <td class="tg-zv4m">30</td>
    <td class="tg-oqs5">5.5</td>
  </tr>
  <tr>
    <td class="tg-zv4m">3(fast)</td>
    <td class="tg-oqs5">1.5</td>
    <td class="tg-zv4m">18</td>
    <td class="tg-oqs5">8</td>
  </tr>
</tbody>
</table>
2

Either insert this directly into each products description by using the insert code/html button.

https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#add-html-content-with-the-rich-text-editor

Or add the code to a multiline text field metafield definition that is then used as a dyanmic source in the theme settings for a relevant section/block type.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks#using-metafields-and-dynamic-sources

Or if the specs are the same for ALL products then in the themes visual editor for product template use a custom-liquid block/section to add the code directly to the page.

If some sets of products have different specs then use alternate templates per groups of products with the same spec

https://help.shopify.com/en/manual/online-store/themes/os20/theme-structure/templates#create-a-new-template

If you need this customization setup or consulted further then contact me directly for services.
Please provide context: store url, theme name, post url(s) and any further detail.
Contact Info in signature.

Good Hunting.