Help Center

Using metafields to add unique product summaries on product pages

Updated

Shopify metafields offer a flexible method for adding custom fields to your store's data. With the use of rich text, single-line, or multi-line text metafield types, for instance, you can enrich your product descriptions with detailed content and succinct summaries. This guide will walk you through the steps of crafting a product description summary using these metafields.

1. Understanding Shopify metafields

Metafields are custom fields that allow you to add extra information to your Shopify store. They can be applied to various store entities, including products, variants, collections, customers, orders, and more.

The most commonly used types of metafields include rich text, single-line text, and multi-line text.

  • Rich Text Metafield: Allows you to input formatted text, including headers, bullet points, and hyperlinks.
  • Single-line Text Metafield: Permits input of brief, single-line text.
  • Multi-line Text Metafield: Allows for longer text input with multiple lines and paragraphs.

2. Using single-line text metafields for concise information

Creating a single-line text metafield:

  1. In your Shopify admin, go to Settings > Metafields and metaobjects, then select Products under Metafield definitions.
  2. Click Add definition to create a new metafield.

  3. Enter a name for the metafield (for example, Product info).

  4. Set the Type to Single line text, then click Save.

To add concise Product Information utilize the theme's Text Block:

  1. Go to Online Store > Themes and click on the Edit theme button for your active theme.
  2. In the theme editor, locate the product page where you want to display the Single-line Text Metafield.
  3. Add a Text block to the desired section of the product page layout.
add text block.png

After you add the block, you can connect the metafield by clicking the Connect dynamic source icon:

connect dynamic source button.png

3. Alternatively, you can use the rich text or multi-line text metafields types for summaries

Define multi-line text/rich text metafield:

  1. In your Shopify admin, go to Settings > Metafields and metaobjects, then select Products under Metafield definitions.
  2. Click Add definition to create a new metafield.

  3. Enter a name for the metafield (for example, Rich text).

  4. Set the Type to Rich Text, then click Save.

Access rich text metafield using Liquid in an HTML Block:

  1. In your Customize theme editor, add an HTML block to the desired section of the product page template settings
add HTML block.png
  1. Liquid syntax can be used directly within the HTML block to access the rich text or multi-line text metafield types and strip HTML tags:
{% assign richText = product.metafields.custom.rich_text | strip_html %}
  1. Display rich text within the HTML Block. Use the Liquid variable in your HTML to display the rich text:
<div class="product-summary"> {{ richText | newline_to_br }} </div>

In summary, Shopify's metafields, coupled with Liquid code and versatile elements like HTML blocks, text blocks and tab blocks, offer an extensive toolkit for enhancing product descriptions. By defining single-line, multi-line, and rich text metafields, merchants can seamlessly integrate tailored information into their store. Leveraging Liquid code within HTML blocks allows for dynamic display, enabling the presentation of concise summaries and detailed specifications. Additionally, the use of Tab blocks organizes additional product details effectively, creating a streamlined user experience.

For additional information on setting the Tab block using metafields, please see our guide below:

How do I add custom product page tabs?

You can learn more about metafields in Shopify’s article here.

 

Related articles