How to Use the Multi-Line Text Metafield to Display HTML in Shopify
Did you know that you can use Shopify's multi-line text metafield to display HTML as a dynamic source directly in the customizer?
It's been a bit of a bug, or at least unexpected behavior, up until this point where only single line text metafields could support HTML, at least right out of the box or by selecting it as a dynamic source in the customizer.
This quick Shopify Dev Tip walks through the quick and easy process of creating multi-line text metafields and then linking them directly in the customizer as a dynamic source to properly display HTML, rather than plain text values.
---
0:00 : Introduction
0:42 : Add product metafields in Shopify settings
1:45 : Update product metafields
3:05 : Linking metafield as dynamic source
4:25 : Using correct field for dynamic source
---
Resources
Shopify Help Docs: help.shopify.com/en/manual/me...
Shopify Dev Docs: shopify.dev/apps/metafields
Пікірлер: 40
Thanks, Taylor. That was very useful.
This is an excellent workaround for adding HTML content via dynamic data sources - thank you so much!
@TRPage_dev
Жыл бұрын
Glad this was helpful! Really had me stuck for a while so I was glad I ran into this when I did. Saved me a lot of extra work.
You are a rockstar! Thank you so much!
You earned a sub and like, man I've been stuck on this for hours, I couldn't find any solution to this. THANK YOU!! Life saver bro!
@TRPage_dev
Жыл бұрын
That's great to hear! Glad you found this video extremely helpful. Thanks for subscribing and liking the video too 🚀
Super helpful, thank you
thank you for your turorial!
Awesome worked perfectly thank so much bro!
@TRPage_dev
Жыл бұрын
Glad you found it useful!
So helpful! Thank you!
@TRPage_dev
Жыл бұрын
Glad this was helpful for you!
Thank you for this tip!
@TRPage_dev
Жыл бұрын
You're welcome! It's been pretty handy for me
Thanks for the tip, that was awesome
@TRPage_dev
Жыл бұрын
For sure! Hope it helps
Thanks, you're great!
Great tutorial works a treat. Good workaround for plain text values
@taylorpage8648
8 ай бұрын
This still works just fine - use this regularly and no issues with this in active production. 9 times out of 10 the issue is you're trying to use an input field that isn't valid with multi-line text. Just tested in a store as well with new values. Check the input field, your JSON, and that your HTMl isn't broken. You should get some sort of an error message when you're not doing this properly in the customizer.
@Ed-wc7fp
8 ай бұрын
You’re totally right. I did not watch carefully enough. I’ve finished linking them all to unnecessary pages now lol. Ahh well. Great bud I’ll edit comment l
@TRPage_dev
8 ай бұрын
@@Ed-wc7fp Appreciate the follow-up and glad you got it working. It is pretty specific in how you have to implement.
Hi mate, it worked perfect. Rendered svg code for different product page icons.👍
You are a genius! Thank you sir, earned a sub :)
@TRPage_dev
9 ай бұрын
Glad this helped out in some way!
Hi Taylor. Thx for this video. I am new to Shopify and have purchased the Focal Theme. I have tried many things including your info but nothing seems to work for what I am trying to accomplish. Trying to add a 2 column by 11 row table to my measurement chart for a product. Does not seem to want to work. Can you shed any advice on this please. Tried added the json to the metafield. Did not work. I am really stumped and cannot move forward. Would greatly appreciate your advice. Thx much!
@TRPage_dev
9 ай бұрын
If it's not working, then either the JSON or the HTML is broken in how you're trying to use this and I couldn't speculate without actually looking at code. My advice would be to try and work backwards and also make sure you're trying to render this in a compatible field.
Hey it's not working in my case. I'm trying to render a table from multiline text metafield and it's showing table html as a text on the web page.☹️
Can we use this to have tables? Like size chart for clothing
@TRPage_dev
3 ай бұрын
Yep. One of the best use-cases for this and easier to manage than a lot of other options (like copying and pasting into single-line text fields)
Hi, thanks. How can we change the text color in a metafield?
@TRPage_dev
Жыл бұрын
Couple of options there, but the text color should follow whatever CSS rules you've written the HTML in. If you want to change that, you could consider writing some inline styles or adding some classes or an ID for targeted CSS just like you'd change the color with anything else when you're modifying HTML. I'm not sure of your skillset, but this method would just follow same methods as using basic HTML and CSS. This video is about how to get that HTML to display utilizing the multi-line text metafield in Shopify. To learn about basics of HTML and CSS, check out MDN docs for great info: developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
Can we show html in meta description, different for each product with the help of these setting?
@TRPage_dev
9 ай бұрын
meta description for products should be managed directly in the shopify admin (at the bottom where it says search engine listing click on the edit)
Have any idea how to have display variants metafields and have them dynamically change on choosing another variant?
@TRPage_dev
3 ай бұрын
You'll have to do this with Javascript and tie into the theme's function that fires whenever a variant changes to conditionally display.
Does not seem to work anymore "Setting 'text' can't include Liquid syntax ('{{', '}}', '{%' or '%}') without valid dynamic sources."
@TRPage_dev
10 ай бұрын
Right, you can't use a multi-line metafield resource for a text setting input. Try using it in a richtext setting or a supported input like textarea.