# Use Product Metafields with TableFlow

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"

<figure><img src="https://1174138513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3m6dgpwPZ2S95SIlDvRl%2Fuploads%2FwNt7EJY0Uf2UZ4YrmhKh%2FScreenshot%202023-08-09%20at%204.31.27%20PM.png?alt=media&#x26;token=e633d048-c6dd-4767-bed4-f0a66ccaddfb" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1174138513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3m6dgpwPZ2S95SIlDvRl%2Fuploads%2FqlNzbswYKZWKbdWsPyD7%2FScreenshot%202023-08-09%20at%204.31.55%20PM.png?alt=media&#x26;token=e9ca15d8-a71e-411e-aa25-cd16ad050574" alt=""><figcaption></figcaption></figure>

3. We want to create Metafields for Products so click on "Products". You can also create variants metafields if you have different sets of values for every variants. TableFlow can switch between variants metafields in real-time when  buyer select a variant on the product page.

<figure><img src="https://1174138513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3m6dgpwPZ2S95SIlDvRl%2Fuploads%2F3Vhcr6FxikUC2RljqmOB%2FScreenshot%202023-08-09%20at%204.32.20%20PM.png?alt=media&#x26;token=0ee27a01-0047-416a-9bc8-e173bda5bdbd" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1174138513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3m6dgpwPZ2S95SIlDvRl%2Fuploads%2F1lIUrlZUN144dTfmjadT%2FScreenshot%202023-08-09%20at%204.32.38%20PM.png?alt=media&#x26;token=7b05f5ab-5d69-47d8-b3b7-3f62fc0ec5b0" alt=""><figcaption></figcaption></figure>

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"

<figure><img src="https://1174138513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3m6dgpwPZ2S95SIlDvRl%2Fuploads%2FMi8pmeLpQ7ofaPpPVrvc%2FScreenshot%202023-08-09%20at%204.33.44%20PM.png?alt=media&#x26;token=3cf01cf3-5854-4838-a08c-395550ee8d20" alt=""><figcaption></figcaption></figure>

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.&#x20;

<figure><img src="https://1174138513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3m6dgpwPZ2S95SIlDvRl%2Fuploads%2FW39caqmQeVcceYgcRJur%2FScreenshot%202023-08-09%20at%204.34.33%20PM.png?alt=media&#x26;token=869cadd1-d14f-4e6e-b101-4eb79028a404" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1174138513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3m6dgpwPZ2S95SIlDvRl%2Fuploads%2F8LNoD4pN7ngqh6f9jjcI%2FScreenshot%202023-08-09%20at%204.35.01%20PM.png?alt=media&#x26;token=d3981d03-5947-462a-83ad-205acc11d9de" alt=""><figcaption></figcaption></figure>

8. Click on "Specification table"

<figure><img src="https://1174138513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3m6dgpwPZ2S95SIlDvRl%2Fuploads%2FFTYBvs0Ce9eE36i6alvt%2FScreenshot%202023-08-09%20at%204.39.18%20PM.png?alt=media&#x26;token=da701942-cf97-4394-863d-f0bd18244221" alt=""><figcaption></figcaption></figure>

9. Click "Search metafields" above the advance value

<figure><img src="https://1174138513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3m6dgpwPZ2S95SIlDvRl%2Fuploads%2FtqiX07lbwlO1y2f9dtUl%2FScreenshot%202023-08-09%20at%204.40.02%20PM.png?alt=media&#x26;token=433b2564-0344-4284-a8ed-1a8220101292" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1174138513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3m6dgpwPZ2S95SIlDvRl%2Fuploads%2FSoPVXn0OpvVe6dojChSm%2FScreenshot%202023-08-09%20at%204.40.36%20PM.png?alt=media&#x26;token=e64d5752-f867-4030-8060-13d57fdc1a27" alt=""><figcaption></figcaption></figure>

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

```
::custom.width x ::custom.height
```

Once completed, click "Save"

<figure><img src="https://1174138513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3m6dgpwPZ2S95SIlDvRl%2Fuploads%2FEimkgMUi1czgG0AGBE3x%2FScreenshot%202023-08-09%20at%204.40.57%20PM.png?alt=media&#x26;token=1fa33fea-a7ed-4c41-9412-99fe34f23422" alt=""><figcaption></figcaption></figure>

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.
