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

Retired Boards Appdev Store Design
1

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):

cozydeliver_0-1638932054022.png
cozydeliver_0-1638932054022.png921×248 8.72 KB

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

cozydeliver_1-1638932168133.png
cozydeliver_1-1638932168133.png534×497 20.9 KB

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:

cozydeliver_2-1638932777623.png
cozydeliver_2-1638932777623.png671×509 22.6 KB

Please share your thoughts. It’s much appreciated!

Best,

Vincent

1 Like
2

I was looking for a very similar thing to generate tables and ended up developing this free tool which can be implemented easily into your theme. https://webforward.github.io/shopify-tables/

What I wanted to avoid was that if I needed to change the styling or layout of the table, I did not want to be editing all of my products again.

3

Hi, this seems like the ideal solution for what I am attempting. However, after generating the following table I get this error on render.

Liquid syntax error (line 6): Expected id but found number in “{{ row.0 }}”

[
{"1":"Lengths"},
{"1":"Small","2":"Test"},
{"1":"Medium","2":"Test"}
]

I copied the code from your specification table and updated the namespace and key.

4

Hi MrBenn

I have just tried this again on a new store I am working on and it is working. Can you try changing {{ row.0 }} to {{ row.1 }} and let me know what happens?

1 Like
5

Hey! I tried this and got the below.

Liquid syntax error (line 6): Expected id but found number in “{{ row.1 }}”

To help I have also pasted my specification-table.liquid - I am essentially trying to use the table to make a size chart under a collapsible tab.

{% if product.metafields.custom.size_chart_table.value != blank %}
    
        {% for row in product.metafields.custom.size_chart_table %}          
            
                {% if row.size == 1 %}
                    
                {% else %}
                    {% for col in row %}
                        
                    {% endfor %}
                {% endif %}
            
        {% endfor %}
    

| {{ row.1 }} | {{ col | last }} |
| - | - |

{% endif %}
6

That is very odd. I wonder what is different in your set up. Defintely set the field to type of JSON?

Can you try this?

{% if product.metafields.namespace.metakey.value.size > 0 %}
    
        {% for row in product.metafields.namespace.metakey.value %}
            
                {% if row.size == 1 %}
                    {% for col in row %}
                        
                    {% endfor %}
                {% else %}
                    {% for col in row %}
                        
                    {% endfor %}
                {% endif %}
            
        {% endfor %}
    

| {{ col | last }} | {{ col | last }} |
| - | - |

{% endif %}
1 Like
7

Thanks for your speedy replies.

Found the issue - I stupidly removed the .value after the namespace; I noticed after I re-did with the code you posted. Apologies!

8

Thanks for letting me know. Now I see it :slightly_smiling_face: Glad you got it working.