Sometimes, merchants need to add additional content to their storefronts beyond Shopify’s limitations. In this situation, using metafields is the only solution.

What is metafield?

A metafield is additional information beyond what is standard in Shopify, such as custom text, images, or even structured data. By using it, you can add extra details to products, customers, orders, or other entities.

What is rich text?

Rich text on Shopify allows you to format text with styles like bold, italic, and headings, as well as add links and lists. It’s a way to create visually appealing content for your store without needing to know coding (HTML or CSS).

How to add rich text metafield?

I assume you want to add a rich text metafield on your product page. Here are the steps to do so:

1. 1. Log in to your Shopify admin and click on “Settings”.
   2. In the left-hand menu, select “Custom data”.
   3. Under “Metafield definitions”, click on “Products”.
   4. Click the “Add field” button.
   5. Name the metafield and add a description (optional).
   6. From the “Select type” dropdown menu, choose “Rich text”.
   7. Ensure that “Storefront” is checked under “Options” (by default it is generally checked).
   8. Save the metafield definition.

How to populate metafield’s definition with data?

After creating your rich text metafield, the next step is to fill it with content. Here’s how:

1. Go to your Shopify admin and then select “Products”.
2. Choose the product to which you want to add the rich text metafield value.
3. Now go to the “Metafields” section.
4. Click on the field next to the “Rich text” (it also has the name you have given) metafield and add your content.
5. Save the product.

Great! With that done, the rich text metafield value is now associated with your product, and you can easily display it on your storefront.

How to display rich text metafield values on the storefront?

There are two ways to display rich text metafield values on your storefront:

1. No-code solution (inserting the rich text metafield value as a dynamic source)
2. Code solution (rendering rich text metafield value with Liquid code)

In this tutorial, we’ll be focused on the no-code solution. It’s the easy solution, but you must remember one thing: rich text metafields can only be rendered in blocks (of your theme) that support rich text.
Here are the steps to do that:

1. 1. From the Shopify admin, go to “Customize”.
   2. Click on any product to go to the product template (default or any other).
   3. Add a new section in your template that supports rich text, such as a “Rich text” or “Image with text” section.
   4. Click the text block within the section, and then click the “Insert dynamic source” icon.
      
   5. Choose the rich text metafield that you have created.
      
   6. You should now see the rich text metafield value displayed on your storefront.

That’s all 🙂