Insert a table in product description area with metafields & with CSS

[cozydeliver]

Hi there, With 2.0 metafileds function, I'm wondering if I can insert a table with metafields and CSS formatting.

(1) I have some metafileds setup (will add more later on):

(2) I also insert a table in product description area:

It seems like I'm doing double work here. Ideally, I would like to insert some coding in product description section so that I only need to fill in metafield and product description table will generate automatically. a. Logic should be: 1.Create a table. If product attribute A is blank, then not show up in desciption table, otherwise show product attribute A & its value. Then product attribute B, C, D,...etc. b. I'd like to format the table size, key length,value length with some CSS formating. Ideally, I'd like the table formatting look like this:

Please share your thoughts.

It's much appreciated! Best, Vincent

[arnika]

Hi  Cozydeliver,

                    Please tell me how to solve this. I also want the same requirements as you.

[cozydeliver · Accepted solution]

hi Anita, @arnika 

You can resolve this by creating snippet, utilizing metafields and include it in the product template.

1. For example, this is what my snippet looks like. (Use if statement, if a metafield value is blank, then do not display this metafield key and value)

<div class="metafield">
<table class="metafield-description">
<tbody>
<tr style="height: 14.50pt;" height="29">
<td style="height: 14.50pt; width: 93.50pt;" class="et2" x:str="" width="187" height="29">
{%if product.metafields.my_fields.style.value == blank %}
{%else%}Style:
{%endif%}</td>
<td style="width: 166.00pt;" class="et2" x:str="" width="332">
{%if product.metafields.my_fields.style.value == blank %}
{%else%}{{product.metafields.my_fields.style.value}}
{%endif%}</td>
</tr>
<tr>
<td>{%if product.metafields.my_fields.season.value == blank %}
{%else%}Season:
{%endif%}</td>
<td>{%if product.metafields.my_fields.season.value == blank %}
{%else%}{{product.metafields.my_fields.season.value}}
{%endif%}</td>
</tr>
<tr>
<td>{%if product.metafields.my_fields.details.value == blank %}
{%else%}Details:
{%endif%}</td>
<td>{%if product.metafields.my_fields.details.value == blank %}
{%else%}{{product.metafields.my_fields.details.value}}
{%endif%}</td>
</tr>
<tr>
<td>{%if product.metafields.my_fields.neckline.value == blank %}
{%else%}Neckline:
{%endif%}</td>
<td>{%if product.metafields.my_fields.neckline.value == blank %}
{%else%}{{product.metafields.my_fields.neckline.value}}
{%endif%}</td>
</tr>
<tr>
<td>{%if product.metafields.my_fields.sleeve_length.value == blank %}
{%else%}Sleeve Length:
{%endif%}</td>
<td>{%if product.metafields.my_fields.sleeve_length.value == blank %}
{%else%}{{product.metafields.my_fields.sleeve_length.value}}
{%endif%}</td>
</tr>

<tr>
<td>{%if product.metafields.my_fields.fit_type.value == blank %}
{%else%}Fit Type:
{%endif%}</td>
<td>{%if product.metafields.my_fields.fit_type.value == blank %}
{%else%}{{product.metafields.my_fields.fit_type.value}}
{%endif%}</td>
</tr>
<tr>
<td>{%if product.metafields.my_fields.fabric.value == blank %}
{%else%}Fabric:
{%endif%}</td>
<td>{%if product.metafields.my_fields.fabric.value == blank %}
{%else%}{{product.metafields.my_fields.fabric.value}}
{%endif%}</td>
</tr>
<tr>
<td>{%if product.metafields.my_fields.material.value == blank %}
{%else%}Material:
{%endif%}</td>
<td>{%if product.metafields.my_fields.material.value == blank %}
{%else%}{{product.metafields.my_fields.material.value}}
{%endif%}</td>
</tr>
<tr>
<td>{%if product.metafields.my_fields.composition.value == blank %}
{%else%}Composition:
{%endif%}</td>
<td>{%if product.metafields.my_fields.composition.value == blank %}
{%else%}{{product.metafields.my_fields.composition.value}}
{%endif%}</td>
</tr>
<tr>
<td>{%if product.metafields.my_fields.sheer.value == blank %}
{%else%}Sheer:
{%endif%}</td>
<td>{%if product.metafields.my_fields.sheer.value == blank %}
{%else%}{{product.metafields.my_fields.sheer.value}}
{%endif%}</td>
</tr>
</tbody>
</table>
</div>

2. Includes snippet in product template where you can find {{product.description}}. For example, this is what it looks like on my theme. Insert it in front of or after {{product.description}}

<div class="tt-collapse-content">{% include 'cxt-product-general-description' %}{{ product.description}}</div>
</div>

Then description table will be populated once all metafields are filled in.

Disclaimer: However, since product description is blank in this case. This might create a problem if you install google/pinterest channel and needs to sync data to these two channels. Since they fetch data from your product.description field and these fields are blank. This is a problem I'm currently facing.

[MrL22]

I have a better solution than producing a table. Use a JSON field and this website! https://webforward.github.io/shopify-tables/ 

[Akomi1]

This is a great solution! Question, in step 2 of the guide, if the page template is built in JSON and not liquid, how can I enter the {% render 'specification-table' %} snippet? Is there an alternate way of inserting it?

[Akomi1]

This is a great solution! Question, in step 2 of the guide, if the page template is built in JSON and not liquid, how can I enter the {% render 'specification-table' %} snippet? Is there an alternate way of inserting it?

[Bronziekee]

Hi,

I too am having trouble rendering the json code. What line of code do I need to insert to get theirs showing on my website

[razin2]

Can you insert meta fields into the table as opposed to typing something in.  I want it so that a "meta" field data is "called" in the table.  is that possible?  thanks

[MrL22]

Unfortunately, this would not be possible as Shopify requires the metafield to be written in the liquid template. In essence, what you are asking is a metafield inside a metafield. 

[razin2]

Yes that was exactly what I was asking...thanks again for the answer as
well as explaining my question...newbie here...thank you again!

[dewfend]

I think one possible solution is to create a page with table including specs of all products, link this page in the product template.

Or for each product category you make a page with table and link the page in this product template

[MrL22]

Sorry, I know it seems like a long-winded way of doing things, but it is a Shopify limitation. It would be a game changer if Shopify supported a table field type. The idea of my JSON table builder was to store table information with zero styling. I imagine the headaches of returning to hundreds of products later down the line to manipulate HTML table/tr/td tags.