Namespace and key is the metafield key of product field
{% if product.metafields.Namespace and key != blank %}
<p><strong>Name Of Field On Front End:</strong> {{ product.metafields.Namespace and key }}</p>
{% endif %}
Here are the examples
{% if product.metafields.plank-dimension != blank %}
<p><strong>Plank Dimension:</strong> {{ product.metafields.plank-dimension }}</p>
{% endif %}
{% if product.metafields.sqft-per-box != blank %}
<p><strong>Sq.ft per Box:</strong> {{ product.metafields.sqft-per-box }}</p>
{% endif %}
Same this keep repeating this & Add it in custom liquid on front end.
Now for more advanced styling of metafields display you can ask chat gpt to convert your code to table like this.
Code:
<style>
.product-meta-table table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
.product-meta-table th,
.product-meta-table td {
text-align: left;
padding: 8px;
border: 1px solid #ddd;
}
.product-meta-table th {
background-color: #f9f9f9;
width: 30%;
font-weight: 600;
}
@media (max-width: 600px) {
.product-meta-table table,
.product-meta-table tbody,
.product-meta-table tr,
.product-meta-table td,
.product-meta-table th {
display: block;
width: 100%;
}
.product-meta-table tr {
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
}
.product-meta-table th {
background: none;
font-weight: bold;
border: none;
}
.product-meta-table td {
border: none;
padding-left: 0;
}
}
</style>
<div class="product-meta-table">
<table>
<tbody>
{% if product.metafields.next_cart.gtin != blank %}
<tr>
<th>GTIN:</th>
<td>{{ product.metafields.next_cart.gtin }}</td>
</tr>
{% endif %}
{% if product.metafields.next_cart.mpn != blank %}
<tr>
<th>MPN:</th>
<td>{{ product.metafields.next_cart.mpn }}</td>
</tr>
{% endif %}
{% if product.metafields.next_cart.upc != blank %}
<tr>
<th>UPC:</th>
<td>{{ product.metafields.next_cart.upc }}</td>
</tr>
{% endif %}
{% if product.metafields.next_cart.short_description != blank %}
<tr>
<th>Warranty:</th>
<td>{{ product.metafields.next_cart.short_description }}</td>
</tr>
{% endif %}
</tbody>
</table>
</div>ABC