A user seeks to automatically generate product description tables using Shopify 2.0 metafields and CSS, avoiding duplicate data entry. They want tables to conditionally display only populated metafields with custom formatting.
Solution Provided:
Create a Liquid snippet using if statements to check if metafield values are blank
Build HTML table structure with metafield references (e.g., {{product.metafields.my_fields.style.value}})
Include the snippet in product template near {{product.description}}
Caveat: Leaving product.description blank may cause issues with Google/Pinterest channel data syncing
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:
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)
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}}
_**{% include 'cxt-product-general-description' %}**_{{ product.description}}
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.
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?
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?
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
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.
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.
I know your post was very old but hoping you will see my question. I want the metafield table to show up as the product description. I have many different types of products that need different types of product meta data listed in the chart. In my theme editor for the product page I can add a block called “custom liquid” would I be able to use your tool to create the code for a certain product and paste it into that section? Then create a new page template for a different type of product and give it its own chart using your tool? Would that work? I’m sorry, I don’t know code at all, I’m just trying to figure stuff out. Thanks so much!
