meta field richtext frontent view show as json

meta field richtext frontent view show as json

planthelp
Visitor
1 0 0

I create the meta filed with tyoe rich text. when i add the text in product meta filed on frontend showing like that. my page is https://huhcv1-p2.myshopify.com/products/basil-hydrosol-8oz and the metaflied key is custom.regenerative_ingredients how i can remove the extra code showing in the rich text. I am using ella theme.

planthelp_0-1729769783850.png

 

 

{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"
PlantLust\n Botanicals is committed to using the highest quality and sustainably sourced\n ingredients in all of our products. That's why we grow many of the herbs and\n plants used in our formulations on our Regenerative Herb Farm. Located in\n Cornish, NH, providing a safe and healthy habitat for various plant and\n animal species.

\n
By growing our own herbs, we can ensure that they are harvested at\n the peak of their potency and processed immediately, preserving their\n beneficial properties. Our plants are grown using regenerative farming\n practices, which work with nature to create healthy soils, restore water\n cycles, and support ecosystem functions. This results in healthier plants and\n contributes to a healthier planet.

\n
Our locally-grown Thai Basil hydrosol is a perfect\n example of this commitment to quality and sustainability. This hydrosol\n captures the full range of ' hai Basil's beneficial properties, from its\n antimicrobial and antioxidant effects to its ability to soothe and stabilize\n the mind. Try it yourself and experience the difference that locally grown,\n regeneratively produced herbs can make.

"}]}]}

 

 

Replies 4 (4)

kunalbaghel
Shopify Partner
3 1 1

Hi, @planthelp  

I'm wondering you're trying to display the metafield value in the theme, but you're getting it in JSON format. Correct me if I'm wrong, but you can try the following approach in your code.

 

<div class="toggle-content" id="tab-regenerative-ingredients-mobile">
{{ product.metafields.custom.regenerative_ingredients.value | metafield_tag }}
</div>

 

I'm hoping it will fix your problem 🙂

If you found my advice useful, please show your thanks by liking and accepting this solution 🙂

NovakNorth906
Shopify Partner
41 4 5

Hi @planthelp ! Rich text metafields are interesting to work with sometimes. There are a few possible solutions

 

First try attaching both .value and metafield_tag

 

{{ product.metafiels.custom.example.value | metafield_tag }}

 

 

Second try with only .value

{{ product.metafiels.custom.example.value }}

 

 

Third try with only metafield_tag

{{ product.metafiels.custom.example | metafield_tag }}

 

 

If this helped, please like and mark as the accepted solution.


Kind regards,

Mark

dflopes87
Visitor
1 0 0

Hello, @NovakNorth906 . I´m new at shopify and I have the same issue in Ella theme. My metafields is showing like a JSON code on product page. Where exactly I have to put these codes? Thank you!!

NovakNorth906
Shopify Partner
41 4 5

@dflopes87 What kind of metafield are you using and did you place the code on your product template liquid file or via the Customize tool?