How do I output metaobject rich text to product information page with custom liquid

Store Design
,
1

Hello guys.

I need to display a notification to certain products under the product description (inside the product information section).

So. I set up a metaobject to carry the notification, and referenced it with a metafiled.

But the in the product information section no blcok support rich text.

I see a youtube video about how using custom liquid to show rich text metafiled.

I tried it, but it seems it does not work for metafiled with metaobject.

Can any body tell me how to do it?

2

Hi @julianchen ,

Displaying metaobject rich text on your product information page using custom Liquid requires referencing the metaobject correctly. Here’s how you can implement it:

Steps to Display Metaobject Rich Text1. Set Up Your Metaobject:

  • Ensure your metaobject is created in Shopify Admin > Content > Metaobjects.
  • Assign it to a product using a metafield (e.g., custom.product.notification).

  1. Access Theme Code:

    • Go to Online Store > Themes > Edit Code.

  2. Locate the Product Template:

    • Open the Sections/product-template.liquid file (or wherever your product information is displayed).

  3. Insert Custom Liquid Block:

    • Add the following code in the desired location within the product description section:
{% if product.metafields.custom.notification.value %}  
    
    {{ product.metafields.custom.notification.value | raw }}  
  
  
{% endif %}

Replace custom.notification with your metafield namespace and key.

  • Style the Notification (Optional):

    • Add custom CSS in your theme’s stylesheet (Assets/theme.css or Assets/base.css):
.product-notification {  
  background-color: #f9f9f9;  
  padding: 10px;  
  border: 1px solid #ddd;  
  margin-top: 20px;  
  font-size: 14px;  
}

  • Save and Test:

    • Save the changes and test on a product with the assigned metaobject to ensure it displays correctly.

Pro Tip for Enhanced Optimization:

While displaying rich text via metaobjects improves your product presentation, don’t forget the SEO implications. Using a tool like SEOPro can ensure your metaobjects, alt texts, and other SEO-critical elements are optimized for search engines, helping your products gain better visibility.

Full disclosure: We are the developers of SEOPro. Feel free to reach out to us at [email removed] for any assistance.

Phil
SEOPro Developer