Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Shopify: Show product Metafields on Product page in Table
{%- comment -%} Metafields {%- endcomment -%}
{%- if product.metafields.xojson != blank -%} //change "xojson" with your scope of metafields, can be global or something else which you defined while creating them.
<div class="row container" id="Specifications">
<header class="section__header column small-12">
<h3 class="section__title heading h3">Product Attributes</h3>
</header>
<div class="row">
<div class="columns medium-6 small-12 tooltip-container">
<table role="presentation" style="width: 80%;background: #fff;border: solid 1px #ddd;margin-bottom: 1.25rem;table-layout: auto;">
<tbody>
{% for field in product.metafields.xojson %}
{%- if field[1] != blank -%}
{%- assign meta_json = field[1] -%}
{% for cs_field in meta_json %}
{%- if cs_field[1] != blank -%}
<tr>
<td><strong>{{cs_field[0]}}</strong></td>
<td>{{cs_field[1]}}</td>
</tr>
{%- endif -%}
{% endfor %}
{%- endif -%}
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{%- endif -%}
//Some style is shop dependent, so change those classes accordingly.
<style>
table tr th, table tr td {
color: #222;
font-size: .875rem;
padding: .5625rem .625rem;
text-align: left;
}
table thead tr th, table tfoot tr th, table tfoot tr td, table tbody tr th, table tbody tr td, table tr td {
display: table-cell;
line-height: 1.125rem;
}
table tr.even, table tr.alt, table tr:nth-of-type(even) {
background: #f9f9f9;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment