On Shopify 2.0, you can easily add metafields to your products, product variants and collections directly from Shopify admin. For example, you can add length, width, height to your product:
Shopify Metafields
But how to display the metafields on the storefront product page?
If you use a Shopify 2.0 theme, please follow the steps below to display the metafields (length, width, height) on your product page:
- From Shopify admin, go to Online Store > Themes.
- In the Live theme section, select Customize. You can also choose to customize other themes in your Theme library.
- In the Edit mode, go to a product page. Then, locate the Product information tab on the left sidebar.
- From the Product information tab, click Add block, then select Text.
- Now, you can add the metafields, one by one, to the new text block using the Insert dynamic source icon.
What if your vintage theme doesn’t support meta fields or you want to change the way they display on your store. In that case, we have another simple solution: edit your theme code. It requires a bit technical knowledge but can be done within a few minutes:
- From Shopify admin, go to Online Store > Themes.
- From the Live theme section, select Actions > Edit code.
- In the left sidebar, locate the
product.liquidfile. It can be found inside the Templates, Sections or Snippets tab. - Find the position you want to display the metafields, then insert the code below:
<div class=”additional-attributes”>
<table>
<tbody>
<tr><th>Height</th><td>{{ product.metafields.global.height }}</td></tr>
<tr><th>Width</th><td>{{ product.metafields.global.width }}</td></tr>
<tr><th>Depth</th><td>{{ product.metafields.global.depth }}</td></tr>
</tbody>
</table>
</div> - Click Save. The metafields are now perfectly displayed on your product page.
The metafields are supported by our Shopify migration tool by default. After the migration is complete, our technicians will help you edit the current theme to display the metafields according to your needs.