Shopify Metafields: How to Add Custom Fields in Shopify (Online Store 2.0)
HTML-код
- Опубликовано: 25 авг 2024
- To go deeper into Shopify Liquid, check out my full course:
www.shopifythe...
Or to receive direct support from me, join the Patreon:
/ shopifydeveloper
Episode Overview
-----------------------------
Shopify have released a new update to Metafields that makes them so much easier to use and provides a level of flexibility never before seen.
In this video, you'll learn how to set up metafields in your online store, edit them from within the product admin page and then dynamically link them to your front-end using the new theme editor.
Check out my stuff online...
My Skillshare.com channel:
www.skillshare...
My travel channel:
/ christhefreelancer
My website:
christhefreela...
My socials:
Instagram: / christhefreelancer
Facebook: / christhefreelancer
Twitter: / chrisrdodd
Thanks Chris, great video. Can you please make a video on how to create a dynamic product tab like additional info, weight, height, etc, or provide me a guideline that makes me able to do it. Thanks again. Love and Support from BD.
Thanks Chris , found your channel after i reached out to Shopify support and they could not help me with this issue.Your tutorial saved the day.Easy and very helpful, well explained in plain English that even non techies like me can easily understand!!
Great to hear! What was the issue that Shopify support weren't able to help with?
Excellent tutorial - super explanation on how to use metafields. This is my first play with Shopify and this was so easy to make the customised changes to my product pages! Thanks, Chris!
Thank you so much my friend. Literally, I never write in the comments, but you help me a lot with this !! God Bless you
The video I've been searching for and the ONLY ONE that ACTUALLY helped!!!!!!
Thanks, this was helpful. I was keen to see a demo on the variants metafields but this was good. I'm not a coder at all, just building my own website with Shopify! Thanks again 😊
Clear video. Finally able to get rid of a Shopify App, which in turn got rid of a lot of manual input!
Great quality & depth in your videos!
Building Custom Template - FAQ page would be helpful to open the concept of block and template building on the normal (non-product) pages. Personally would be interested to understand how you would build new custom block/section with accordion menu that can be edited from the "theme customizer".
Great explanation! Thanks for the time spent making this!
Many thank Chris! Really helpful and absolutely clear!
thank you so much
So clearly explained. Thank you!
I was looking for a video to understand the metafields and how it works and how can we use it. Video was really helpful. Now I understand the metafields. Only problem is the coding. Please make a video on more metafield briefly for the noobs, like me, for people who have no background in coding.
Hey Prashant. Have a look at my previous video on Metafields and let me know if that helps.
Great tutorial. Excellent that you are showing the logic and underlining code if this fantastic Shopify update. …Rowby.
hello, i love your video with steps instruction!! May I know if you can take a video to instruct the coding of creating a hyperlink button in product page? I think many people will need it, especially those product that are open for cutomization. thanks
Hi Karin. You can find the code for the product template in product.json where you'll find reference to the sections that are to be loaded. Within one of those sections you can add the link tag Text here
keep it up nice work
You can show us how to get rid of one sided discription and create tabs and put discription and reviews side by side
very helpful and easy to follow - thanks brotha!
...except the image coding section at the end lol
Image coding section?
@@CodewithChristheFreelancer Yeah, but it's not need for me at the moment. I'm not too well-versed with coding so I got lost, but if I do need held in the future I'll reach back out. Appreciate it, man!
Great video Chris!
Was disappointed that the metafields don't show up on product export but hoping Shopify does catch up to that. Otherwise, products with large number of SKUs will be really difficult to manage.
Oh dang! That is annoying.
Many thanks and likes!!
Keep Up the Nice Work 🙂
I am not an expert on meta fields. I have a Debut Theme. Why would we use the Meta will be useful to us who is stuck in the Stupid Mode. Can it be use to add Social Medias to your product pages?
Thank you for this video! Is there a way to add a personalization section to a product for example if they want there name added to a product?
Something like this would require an app.
apps.shopify.com/product-personalizer
I tried adding a URL type meta field to the product page titled Back to Shop so that it can act as a way to navigate back to the shop. It didn’t work though
Hi Chris, thanks for the tutorial. I have a very important question, please take a look and let me know if you know the answer.
Why is the video file metafiled not working when I try to add different videos to each product page? I can only pull dynamic source for the cover image and the alt text but the video on its own does not give the opportunity to be pulled from a dynamic file source even though I have already uploaded and assigned videos to every product from their respective product page.
Thank you in advance.
Not sure Tea but if you wanna message me on Patreon, we can troubleshoot it.
www.patreon.com/shopifydeveloper
Is it possible to add a metafield filter where a product has multiple values. for example if a product was made from "glass" and "meta". I want a filter called "Materials" and I want that product to filter on both "glass" and "Metal"
Should be. 'Metafields' are listed on the the documentation as eligible for storefront filtering. Give it a go and see if it works ;)
Great way you have talked on what I needed to hear. Unfortunately, youtube is filled with missleading info. Can I get your direct help with my shopify theme (Dawn). I understand you are a busy person. I use stock sync to update feed and it doesnt upload dimensions. I have tried adding metafields following your video but I may need some coding which I am BS at. Shahin.
Hey Shahin. No problem! I have a Patreon for this kind of service.
www.patreon.com/shopifydeveloper
Feel free to shoot me a message there and I will help you through that.
sir please make a video how to track shopify enhanced e-commerce with dynamic value via google tag manager.
like product name, product quantity, product price, transaction id, total price, shipping info, payment info, etc
awsome video dude, loved it.
Im using a new custom theme so I dont have the Product.json files :(
haha no need for the sad face. It's easy to migrate. I'll be releasing a tutorial on how to do so shortly. Stay tuned!
Metafields on product are limited in 20. How can I add more pins?
What do you mean by pins?
Hey Chris, at 2min28sec you are showing the product page in the Theme editor with all the components. If I go there, I can't drill down to the elements. I only have the "Product Information" and nothing on the lower level.
Any Idea?
ruclips.net/video/aEemVBqS3Yk/видео.html
You're saying the blocks don't show up? Are you sure you're looking at the Dawn theme?
Hi Chris thank you for the videos, awesome information - I have a question I am upgrading my website from Debut to a 2.0 theme and need to recreate makeup colour swatches - can I do that using metafields and how do I attached a color swatch I have or should I use an app?
Can you describe how you want these 'makeup colour swatches' to operate? Not sure what you're trying to achieve at this stage.
How do you render a metafield that has a Page as reference?
There's a liquid filter for that. See here: shopify.dev/api/liquid/filters/metafield-filters
Hoping Shopify will add an option to change the order of the metafields, any new field end up on the top of the list, kind of annoying if you're trying to keep the product page presentable for a client. Also hoping that they will add a dynamic table to the field types
Absolutely. There is still much more for Shopify to improve upon with Metafields.
This doesnt work on some older themes. I use Minimal theme and although you can input all the info in the Shopify CMS, Metafields don't appear on the Default Product Page. I guess this is becasue the older themes like Minimal are .liquid files and Metafields require .json themes.
You wrote that you "can input all the info in the Shopify CMS" so there is no error here. You just need to code your metafields into that theme if you want their values to be displayed. Themes don't automatically read metafields. You need to utilise them using Liquid.
@@CodewithChristheFreelancer OK, thank you for the guidance. I will have to research that step and I hope it isn’t too tricky. I’m no liquid code expert! lol
Thanks for the great video! One question, is there a way to add custom HTML to a multi-line text metafield? I want to hyperlink certain bits of text but it displays the raw HTML when I add it to the metafield.
Have a look at the metafield filters. Might be something in there for you.
shopify.dev/api/liquid/filters#metafield-filters
Stupid Q, what are now the benefits?
Or you can add a picture , could be done earlier as well.
Why doing new brands? Just type in in Vendor.
Additional text / specific page, also old.
🤷♂️ don’t get the excitement
The ‘brand’ field was just a proof of concept. The ‘big deal’ is that we can now add and edit Metafields in the admin.
Hi Chris, great video! I am trying to use metafields for the new 2.0 filters but having trouble with only one value being allowed per metafield per product. Have you seen a way to add more than one value to a metafield? For example if my namespace.key is Products.Style and I want to show single line text describing the style of a dress. This dress can be "flowy" and "one-shoulder" so I would like to have two values in products.style .. one as flowy and one as one-shoulder so this dress shows up under either filter option. Any idea?
hmm no I haven't come across this issue yet but thanks for letting me know. I'm planning a video on the new 2.0 filters so I'll take a look into it.
Hey Chris!
I'm trying to create custom colour swatches on my website, and I wondering if this is how I do it or if I do it in the variant section, I'm very lost, thankyou for your time.
I've seen it done with variants and I've seen it done in product sets (separate products linked together via a collection). In terms of metafields, you could create a metafield for 'Color' but then you'd need to figure out how to use it.
I'm using Debut, and I made my store in 2018. Doesn't seem like I have any of the options you do in the theme editor. For my default product page, I can't change much except enabling image zoom, show vendor, show variant labels, and show quantity selector. That's all.
Edit: cause everything is still in .liquid files.
Just finished producing a video on migrating from Liquid to JSON. Will be out soon!
How do you make them LINKS from the product page to display all that are within that Meta field?
Not sure what you're trying to say here. Maybe include a timecode to the part of the video your question relates and I'll understand better.
@@CodewithChristheFreelancer 3:05 you changed the Vendor to Brand. I would like to be able to have customers link on that Brand name "Nike" as a link, which would then show them all the products with the "Nike" brand name.
Ah I see. So you'd like to see a collection page filtered by a certain metafiled value. Before Storefront filtering, you could only filter by tag but with the new Storefront filtering, I think you can do it.
Refer to the documentation and let us know how you go
shopify.dev/themes/navigation-search/filtering/storefront-filtering
Hey Chris, can we use metafield to give customer option to upload images/videos to personalise the product? I couldn't find documentation that explains this in details. Also, is there a video or link to doco for using GraphQL shopfront api to upload images into metafield when customer buys product? **not looking for code :D, link to information or doc will be good too. Cheers!
Hi Mutual Respect. The only way to add data to your Shopify store (minus a few limited scenarios that Shopify allow such as creating an order at checkout or submitting a contact form) is through the Admin interface or Admin API.
I think this would still be possible but you'd need to create a custom app/API that runs on your Shopify theme. This app or API would either store the file in your own app's database or connect to Shopify via the Admin API to place the file in your store's 'files' folder.
@@CodewithChristheFreelancer gotcha, thanks mate! I did saw Admin API...but wouldn't be a good idea to expose that on my iOS app. I might just have to upload to Firebase Storage and add URL as part of custom attribute to my line items. Thanks for validating this! I was excited to use Metafields for this... :D
i create new store as mentioned in your last video , but no new Dawn theme, even in a shopify theme store. it still show old default theme (Debut)
hmm that's weird. Might just have to download it and upload it to your store then.
Hey Chris! Any advice for adding metafields to the Blog Object?
What do you need to know Kimmiies?
Great video, do you know if metafields work in theme TRIAL mode?
You mean development stores? Pretty sure they would.
Can these metafields be added to regular pages as well?
As in the content section of a Shopify Page? If so, the answer is no. You can't insert liquid code in the admin, has to be in the theme. Although, you could possibly hack it so that you create a shortcode (similar to Wordpress) and then in the theme, split the content either side of the shortcode, insert the metafield and then put it all back together again.
@@CodewithChristheFreelancer Thanks for your reply. I'll just hope that shopify will release this feature.
Hi Chris! I’m trying to change the color of the product title by using a metafield, I’ve created the metafield and linked it to the product. However, I’m confused on how to link it in the customizer/theme editor as there isn’t a way to link the metafield I created. Can you please help?
Is the specific colour supposed to be tied to each individual product?
Does this only work with Dawn theme i can change or get block components on the product page (is locked) i use prestige theme?
I'm assuming you're referring to the 'section everywhere' functionality. This is now available on any template that uses the JSON format (as apposed to Liquid)
great video!
such a shame, that after 6 months the rest of the metafields are still on "coming soon" status quo. you still have to rely on apps for those metafields.
Depends. I don't use any apps for metafields. Check out my other video on metafields for an alternative way of doing it (no app required)
@@CodewithChristheFreelancer that was actually quite helpful, although for the final client I still found it easier for him to manage his metafields using an app.
btw, looks like the rest of the metafields ( collections, customers, orders ) seems to be now available.
Can I add metafield from liquid file for customer while creating registration form?
Metafield's aren't form fields that can take user input from your store customers. Metafields can be only be modified on the admin side.
@@CodewithChristheFreelancer thanks for ur reply, will it be possible anyway to update it from storefront API for customer so that we can use it from user profile?
The Storefront API doesn't create any data. It only returns data. Except in the case of the customer object. That is the only part of the API that accepts input.
@@CodewithChristheFreelancer Thanks, so basically i want to send a json data to customer metafield while creating from page level, either create new user or purchasing order. So that I can show those data later to user profile from the metafield. I tried to use graphql which is working from graphql app but I am looking for some ajax api or something to achieve this. Please let me know if there is any way..
You probably need to build an app or API that leverages the Admin API in order to do that.
Can you please tell me
How to use cart api in shopify
Lesson 9 skl.sh/2AETO9r - full 35min tutorial
How do I add Rich Text Editor to metafeilds
'Rich Text' does not appear to be one of the available metafield content types.
@@CodewithChristheFreelancer so please can you advise solution as I have description, key feature and specification tab and I want to add WYSIWYG or rich text content
How about using HTML? You can insert HTML into a plain text field.
@@CodewithChristheFreelancer yes that work but the who does data entry on our website they do not know HTML
I am surprised Shopify has this basic limitation!
Is it possible to add two or more image metafields? So far I can't figure out how to do this, but I'm also not a developer.
Also, so glad I found your videos. Even though I'm not a coder, I'm finding them VERY helpful!
hmm I haven't tried it but I would assume so. Is the 'image' option missing when you go to create the second metafield definition?
Hi Chris. Is it possible to do a mass upload to metafields? I have an excel spreadsheet with a ton of information that I'll be putting into the new Shopify metafields and I'm hoping there is a way I can do a mass upload. I've already created the metafields (approx 35 of them for about 200 products). Can't seem to find any documentation on whether this is possible or not. If not I'll have a ton of data entry to do...
Hi Jonathon. I'm not sure either but it should be possible with an app.
I'm facing the same issue. Did you find a way to import it in csv ?
@@clementvaisques no. Unfortunately the new online store 2.0 doesn’t allow for mass editing of metafields in the bulk editor or via csv file.
@@254numbers21 hey ! Thanks for the quick reply.
I’m currently trying to use the import/export tool made by MetaGuru.
Not so easy but I’m getting closer and closer 👌
They still haven't rolled out metafield display on variants :-(
Oh really? I can see 'Variants' in the list of possible metafields in my metafield settings
@@CodewithChristheFreelancer they are there in the backend. But then take it to the next step: displaying the variant data (value) in the theme editor data connector.
Or am I missing something??
@@TJ-TJ same problem here. I can add a product metafield easily. If I create a variant metafield it will not show up when I want to add it.
can i upload bulk products cvs with metafields?
Just googled it as I've never tried before. Looks like you might need an app.
Newb here, is it possible to add an image to a collapsible tab using metafields?
Yep! I see no reason why that wouldn't work.
@@CodewithChristheFreelancer how exactly do I do that?
Many ways. I do a video on it on my Patreon if you would like
www.patreon.com/shopifydeveloper
Can't really see the benefits for non devs users.
Admins can now set up a metafield in their store settings, update the metafield in the admin via the edit product page and then dynamically link the field in the customiser. No dev required.
Cheers. One big thing for me is there seems to be no way to include the meta field in the bulk editor or product importing or exporting. Am I missing something or is that a huge oversight from Shopify?
Think it might be an oversight by Shopify as another viewer (Taylor) has noticed the same thing.
just came across bulk editing meta fields in a vid ruclips.net/video/n-JnSDrDt-4/видео.html
Hi, what email can I send you a business offer?
actually 20 metafield add. sir
yOU HAD ME AT UNTIL YOU CALLED THOSE SHOES NIKE WHICH THEY ARE NOT
Apologies for the mistake.
Jordan is owned by Nike
OMG, Post Malone?
where?
You go way too fast lol. Im having the hardest time finding a video that goes slower and more detailed
what part is it you're struggling with?
you lost me at ''add-i-dass''
Different pronunciations across different cultures.
Thanks for showing how pathetic Shopify still is. What a disappointment. All this coding looks laborious and not exactly 2.0 as promised. I'm just changing themes to Dawn (had a vintage Debut until now) so I can use a newer generation of APO [advanced product options] & now I see Shopify is still leaving us in the weeds if we want something remotely outside of the envelope.
What is it that you want that they haven't delivered yet?