Use Product Metafields with TableFlow

Ideally you should use Product Metafields to store all your product attributes and you can then use TableFlow to display these values in your storefront

If you are new, this will guide you through the process of creating product dimensions metafield and using TableFlow to display it in your product page

1. To create your 1st metafield, click on "Settings"

2. Click "Custom data". This is where you will find all the metafields

3. We want to create Metafields for Products so click on "Products"

4. Click "Add definition". This is where we will define the metafield that we want in products

5. For this example, we will add a "Width" metafield. Add in a name for your metafield and select "Single line text" and click "Save"

6. Once saved, go to your product page and click on any product to edit. At the bottom of the edit product page, you will see the Metafields card with the metafield that you have created earlier.

7. Enter your width and click "Save". Once saved, we can head over to TableFlow app.

8. Click on "Specification table"

9. Click "Search metafields" above the advance value

10. You will see the product metafield that you have created earlier. Select "Width" and click "Insert"

11. You can also combine multiple metafields. For example:

::custom.width x ::custom.height

Once completed, click "Save"

Now that you have created the table with metafields. Assuming that you have enabled TableFlow app embed and added TableFlow theme app extension to your product page, go to your storefront and click on the product with the metafield that you have updated. You should see the table there.