Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
This is an accepted solution.
Hi @tclapmarketing,
Go to sections > main-product.liquid file, find 'product__accordion' and change code here:
before
after
Code:
{% if block.settings.heading == 'Details' %}
{{ product.metafields.my_fields.details }}
{% else %}
{{ block.settings.content }}
{{ block.settings.page.content }}
{% endif %}
Hope it helps!
Hi @tclapmarketing
can you please share your store URL?
and screenshot of issue where you getting this issue.
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.
Hi @tclapmarketing
In meta fields you can select a simple text area for this then HTML wtag will not display on frint end.
I have tried to make it work with both text options; Single line text & Multi-line text. Both options make the HTML markup visible.
Hi @tclapmarketing
Can you please share your store Admin access so I can check this issue?
Yes, send a collaborator request and I'll give permission. ctbooks.myshopify.com
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.
@tclapmarketing
yes then need to changes in liquid code.
It will take around 4-5 Hours.
This is an accepted solution.
Hi @tclapmarketing,
Go to sections > main-product.liquid file, find 'product__accordion' and change code here:
before
after
Code:
{% if block.settings.heading == 'Details' %}
{{ product.metafields.my_fields.details }}
{% else %}
{{ block.settings.content }}
{{ block.settings.page.content }}
{% endif %}
Hope it helps!
Thank you so much for the help!
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?
I solved it by following this tutorial:
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025