Edit theme code to enter metafield with HTML in Collapsible Row (product page)

[tclapmarketing]

I am getting an error when I add text with HTML markup to a metafield and then try to pull the metafield into a collapsible row. I believe this error can be solved by making this change in the actual theme code vs. using the theme editor.

Can somebody help with what the code should be to allow for this? I am using the theme "Dawn".

Alternatively, is there any way to make product description be a collapsible row? This would also solve my problem without involving metafields at all.

Thanks!

[Dbuglabpvtltd]

Hi @tclapmarketing 
can you please share your store URL?

and screenshot of issue where you  getting this issue.

[tclapmarketing]

Hello here is the link to the page (preview with not-live theme) : https://umqsjkcg5uk2pulw-57078972601.shopifypreview.com

You can see in the attached screenshot that the metafield is loading but with the HTML markup visible.

[Dbuglabpvtltd]

Hi @tclapmarketing 

In meta fields you can select a simple text area for this then HTML wtag will not display on frint end.

[tclapmarketing]

I have tried to make it work with both text options; Single line text & Multi-line text. Both options make the HTML markup visible.

[Dbuglabpvtltd]

Hi @tclapmarketing 

Can you please share your store Admin access so I can check this issue?

[tclapmarketing]

Yes, send a collaborator request and I'll give permission. ctbooks.myshopify.com

[Dbuglabpvtltd]

@tclapmarketing 

Sent

[Dbuglabpvtltd]

Hi @tclapmarketing 
if you add metafield  in code instead of customizer then it will work fine

[tclapmarketing]

This seemed to work, but it added the metafield content under all of the collapsible rows, not just "Details". Is there a way for the content to only show up in the Details section? Thank you.

[Dbuglabpvtltd]

@tclapmarketing 
yes then need to changes in liquid code.
It will take around 4-5 Hours.

[LitCommerce · Accepted solution]

Hi @tclapmarketing,

Go to sections > main-product.liquid file, find 'product__accordion' and change code here:

beforeafter

Code:

{% if block.settings.heading == 'Details' %}
                    {{ product.metafields.my_fields.details }}
                  {% else %}
                    {{ block.settings.content }}
                    {{ block.settings.page.content }}
                  {% endif %}

Hope it helps!

[tclapmarketing]

Thank you so much for the help!

[mjmu]

Hi, I tried this solution, but unfortunatly it still displays the th code as text:

I'm using the refresh 10.0.0 theme.

Any idea?

[MRamzan]

I solved it by following this tutorial: