Shopify Product Metafield Specification Table Generator

https://github.com/webforward/shopify-tables

All information entered is stored within your browsers local storage object. Information is not stored as a cookie and is not shared or uploaded to any server or 3rd party.

Have you found this useful? Buy me a coffee.

How to use:

1. Create a product metafield

Open your Shopify admin dashboard, click Settings at the bottom left, click Metafield towards the bottom on the left-hand side and then choose Products on the right.

At the top right, click Add definition to set up a new product metafield.

Give the metafield a name which will be displayed on the product add and edit pages.

Set a namespace and key, if you do not know what to put here, we generally use something like settings.infotable. Remember what you put here as it will be needed in step 2.

Tick to Expose this metafield to Storefront API requests.

You can add the table generator website address in to the description field to remember for future use if you wish.

And finally, click Select content type and choose JSON.

2. Create a theme snippet to display the table

In your Shopify admin dashboard, navigate to Online Store > Themes. On your current active theme, click the Actions drop down and choose Edit code.

Inside Snippets click Add a new snippet, name it specification-table and paste the following code:
Don't forget to change namespace.metakey to the namespace and meta key you created in step 1.

{% if product.metafields.namespace.metakey.value.size > 0 %}
    <table class="table table-bordered">
        {% for row in product.metafields.namespace.metakey.value %}
            <tr>
                {% if row.size == 1 %}
                    {% for col in row %}
                        <th colspan="999">{{ col | last }}</th>
                    {% endfor %}
                {% else %}
                    {% for col in row %}
                        <td>{{ col | last }}</td>
                    {% endfor %}
                {% endif %}
            </tr>
        {% endfor %}
    </table>
{% endif %}

You can now use this snippet in your product templates or product snippets with the following code:

{% render 'specification-table' %}

3. Generate a table for your product

Populate the table maker at the top of this page, you can add columns and rows, you can even drag the rows around.

Once you have finished making your table, click the Export JSON button to generate the code you need for your Shopify product metafield.

Edit your product on your Shopify admin, scroll to the bottom of the page and paste the generated JSON data into the JSON metafield you created in step 1.

4. Edit an already existing table

To edit an already generated table, copy the JSON data from the JSON metafield on the product in your Shopify admin paste it in to the Import JSON box which pops up when clicking the Import JSON at the top of this page.

Repeat step 3.

I hope this helps you as much as it helped us.

Shopify Admin Product Metafield
Shopify Frontend Product View