CODE

Add Shopify Text Metafield

ESTIMATE 2-MINUTE READ

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.

Create Shopify Metafield

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. Then click on Metafields. 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 Data

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 }}

Other HTML formatting will be required to match the style of your site theme. You might be thinking, “Why not just type the author’s name on the page?”

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.

Add Your Comment