Are you excited to implement Shopify metafields, but uncertain how to use them? Here’s a simple modification to get you started.
Publish Insights 22 October 2022
What is a Metafield?
Unlike a metaverse—which is a sci-fi concept for alternate universes—a metafield is a place to store hidden data for a particular file or record. This data does not need to remain hidden. You can display it to the public.
Shopify includes the ability to store and edit various types of data with products, blog posts, customer records, or virtually every other type of page on your e-commerce site. This allows you to customize the look of pages or provide specific information for different audiences.
The number of ways metafields are useful seems as vast as the universe. A down-to-earth example is addition of an extra text field to blog articles. There are already fields for Title, Content, Excerpt, SEO description, and Tags.
You can also select an Author from one of the designated administrators. But in reality, the author may be someone other than one of these limited choices. So you can create a metafield to override the author and display this on articles.
Metafield Implementation
Within the admin, click Settings > Content > Metaobjects. Press the Add definition button. Give it a short Name, like Author, and choose Single line text as the content type. (There’s a checkbox to create a list of values for menu selection, which you may edit in the future.)
After saving the new metafield, editing options will appear at the bottom of blog posts within Admin. Click there to type select the real author within the metafield you created.
Display the Metafield
Merely adding metadata does not make it accessible. You need to modify the underlying Liquid code in order to make it useful. The Article template (beneath Sections) contains the structured layout for blog posts. Determine where you want the author name to appear and then include the following code:
{{ article.metafields.custom.author | default: article.author }}
Your page HTML will require additional formatting to match the style of your site theme. You might be thinking, “Why not just type the author’s name on the page?”
Caution: Modifying Liquid code may invalidate your theme for future updates by the developer. Anything you add will require manual migration to a different theme, with possible incompatibility.
By integrating the metafield, you can include the real author with Open Graph meta tags. In Shopify, go to Online Store > Themes > Actions > Edit code > Snippets > social-meta-tags.liquid. Here, within the template == "article" area, you can edit the code to:
<meta property="og:article:author" content="{{ article.metafields.custom.author | default: article.author }}" />
Social media apps use the Open Graph data to format posts from your articles. Search engines may also utilize this data.
Reference
- Metafields. help.shopify.com/en/manual/custom-data/metafields
- Metaobjects. help.shopify.com/en/manual/custom-data/metaobjects
