Skip to content

Instantly share code, notes, and snippets.

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>
<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;">
{% 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 -%}
{%- endif -%}
{% endfor %}
{%- endif -%}
{% endfor %}
{%- endif -%}
//Some style is shop dependent, so change those classes accordingly.
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment