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.
Introduction
I did a post the other day and folks were really interested about this option, where we can use the multi-line Metafield to support HTML. In the past, something right out of the box that we've only been able to get out of that is using the single-line text Metafield versus now there is the ability to do that, it's just not really, I don't think, well documented anywhere. Just kind of stumbled upon this here when I was working with a store. Rather than having to move things back and forth, we just updated to using this, where basically we're going to directly input to the customizer, the dynamic source that we want, and we're going to pin that value to the end of it.
Add Product Metafields in Shopify Settings
I'm going to show you what this looks like real quick here. Here's just a quick store that I've got for demo purposes here. You can see here, if you go into Settings, scroll down the Metafields and you'll see here there's multiple products. You'll see that there's a single-line option, and then we also have this one where it's multi-line text. So single-line text, and click into that, just to show you what that looks like.
And then multi-line text, this is as easy as adding a definition here and then selecting a content type option, about this option. You can select the content type for single-line or multi-line text. We'll just add another multi-line just for fun. Do any kind of validation, whatever you want there, and save it.
Update Product Metafields
The multi-line text is just easier when we're working with folks that just input information. Obviously, you don't have to use that or whatever, but if we are trying to type HTML, I'm going to showcase this here, with this product. If you scroll all the way down the bottom, we've got the options for the Metafields. Click View All, just makes it easier to view.
In the past here, what we do is, let's say we'd want to drop some HTML in here. This is a header, and for the semantic HTML folks, we won't make this an <h1>, because we shouldn't have more than one <h1>, some product page we should have the title already.
This is paragraph text, and then something like... Oh! I think that's this. Okay, close off that tag. We're using HTML, make sure we do that.
Go ahead and copy this because I want the same exact thing for this. This is the header, maybe multi-line, so in a way we can differentiate between the two and make sure we're not calling the same resource or something.
I went ahead and updated this, so we've got single-line option and then this Awesome Resource Name value here.
Linking Metafield as Dynamic Source
In the customizer before, and I'm on a product page, the folks over at Southern Breeze, I worked with them for a while, they're really great. They're into tea, check them out. I'm just using one of their products here for the demo purposes here, this is just an old staging site and stuff that I'm using here.
Normally we're in the customizer and we'd want to go ahead, insert a dynamic source. You can see we have Awesome Resource Name, but let's check and see. Single-line option, this works great.
But if we want Awesome Resource Name that's multi-line, you'll see that it gives us the plain text value instead of the actual HTML value. That's obviously not what we want, so I'm going to go ahead and cancel here. But what we can do, instead, is if we just directly type that in and what this looks like is we're going to put this in between those little curly brackets there. And you want this guy here. So product and metafields and custom and awesome_resource_name. {product_metafields, custom, awesome_resource_name, and then we're going to add ".value" to the end and then close it off. And you can see here. Now this now supports our multi-line HTML and it can do this directly.
Using Correct Field For Dynamic Source
The only thing that might trip you up on this, possibly, you can't do this trick if there's already just a single-line text value here. So let's say we try to do that again.
We're going to get an error and it'll tell you, too, because it's not a valid dynamic resource because it's multi-line, so we actually can't use that for this here. So make sure it's one of these rich text values here. Here, where you can actually add these things or whatever that just will work for you without issue or anything like that.
Closing
So, that's how you do that. Hopefully that was helpful. And yeah, this bothered me a bit. So I'm really glad that I found this and I hope this is helpful for somebody else.