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

  • @ShadyAnis
    @ShadyAnis2 ай бұрын

    Thanks, Taylor. That was very useful.

  • @lanta-darren
    @lanta-darren Жыл бұрын

    This is an excellent workaround for adding HTML content via dynamic data sources - thank you so much!

  • @TRPage_dev

    @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.

  • @iamspens
    @iamspens4 сағат бұрын

    You are a rockstar! Thank you so much!

  • @kjpswe
    @kjpswe Жыл бұрын

    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

    @TRPage_dev

    Жыл бұрын

    That's great to hear! Glad you found this video extremely helpful. Thanks for subscribing and liking the video too 🚀

  • @user-cu6zt3of4y
    @user-cu6zt3of4y27 күн бұрын

    Super helpful, thank you

  • @yaolu4764
    @yaolu47648 ай бұрын

    thank you for your turorial!

  • @Ravsin
    @Ravsin Жыл бұрын

    Awesome worked perfectly thank so much bro!

  • @TRPage_dev

    @TRPage_dev

    Жыл бұрын

    Glad you found it useful!

  • @Fedgery007
    @Fedgery007 Жыл бұрын

    So helpful! Thank you!

  • @TRPage_dev

    @TRPage_dev

    Жыл бұрын

    Glad this was helpful for you!

  • @florianhammer4247
    @florianhammer4247 Жыл бұрын

    Thank you for this tip!

  • @TRPage_dev

    @TRPage_dev

    Жыл бұрын

    You're welcome! It's been pretty handy for me

  • @mpservatmand
    @mpservatmand Жыл бұрын

    Thanks for the tip, that was awesome

  • @TRPage_dev

    @TRPage_dev

    Жыл бұрын

    For sure! Hope it helps

  • @user-we7tb9rc1d
    @user-we7tb9rc1d4 ай бұрын

    Thanks, you're great!

  • @Ed-wc7fp
    @Ed-wc7fp8 ай бұрын

    Great tutorial works a treat. Good workaround for plain text values

  • @taylorpage8648

    @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

    @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

    @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.

  • @user-45446
    @user-45446 Жыл бұрын

    Hi mate, it worked perfect. Rendered svg code for different product page icons.👍

  • @mikestaebell2015
    @mikestaebell20159 ай бұрын

    You are a genius! Thank you sir, earned a sub :)

  • @TRPage_dev

    @TRPage_dev

    9 ай бұрын

    Glad this helped out in some way!

  • @rushka1354
    @rushka13549 ай бұрын

    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

    @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.

  • @madhurikadam2159
    @madhurikadam2159 Жыл бұрын

    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.☹️

  • @DriftingSquirrel
    @DriftingSquirrel3 ай бұрын

    Can we use this to have tables? Like size chart for clothing

  • @TRPage_dev

    @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)

  • @EnesUnver-wm8jz
    @EnesUnver-wm8jz Жыл бұрын

    Hi, thanks. How can we change the text color in a metafield?

  • @TRPage_dev

    @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

  • @Muhammadumair-tu7un
    @Muhammadumair-tu7un Жыл бұрын

    Can we show html in meta description, different for each product with the help of these setting?

  • @TRPage_dev

    @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)

  • @marcelfullerton
    @marcelfullerton3 ай бұрын

    Have any idea how to have display variants metafields and have them dynamically change on choosing another variant?

  • @TRPage_dev

    @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.

  • @akunpurku
    @akunpurku10 ай бұрын

    Does not seem to work anymore "Setting 'text' can't include Liquid syntax ('{{', '}}', '{%' or '%}') without valid dynamic sources."

  • @TRPage_dev

    @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.