How to use Shopify Metaobjects

Рет қаралды 68,113

Күн бұрын

What are Metaobjects, how are they different from Metafields, and how you can use them via the Customizer or Shopify Liquid.
► Free Help
--------------------------------------------------------------------------
🎯 Get Personal Career Advice for Shopify Developers:
codingwithjan.com/personal-ca...
👨‍💻 Find a qualified Shopify Developer for your next project:
codingwithjan.com/hire-a-deve...
► Contact
--------------------------------------------------------------------------
🌐 Website
codingwithjan.com
🤝 LinkedIn
/ jan-frey
► Resources:
--------------------------------------------------------------------------
pastebin.com/1TyZRVzL
Learn more about meta objects:
www.shopify.com/editions/wint...
► Timestamps:
--------------------------------------------------------------------------
00:00 Intro
00:27 Explaining Metaobjects
04:10 Metaobjects using the Customizer
12:28 Metaobjects with Liquid
► SEO Description::
--------------------------------------------------------------------------
This tutorial covers how to use Shopify's new Metaobjects.
First introduced at Shopify Winter Editions, Metaobjects provide a new way of storing structured information on a store. Metaobjects can be used in your Shopify admin and you can also choose to display them in your online store via the customizer or via liquid code in your theme files. If you have an Online Store 2.0 theme, then you can connect most Metafields with metaobject references to your theme by using the theme editor.
#shopifypartner
codingwithjan.com

Пікірлер: 191

@CodingWithJan 2 ай бұрын

🎯 Get Personal Career Advice for Shopify Developers: codingwithjan.com/personal-career-advice 👨‍💻 Find a qualified Shopify Developer for your next project: codingwithjan.com/hire-a-developer

@user-ft7ex3io8k 9 ай бұрын

Perfect! This is the tutorial I was looking for! After completing it, I feel like I've had an epiphany, and my understanding of Shopify has become much clearer!

@RamanKumar-uv6mf Жыл бұрын

Great video! You have shown everything step by step with dynamic value using Shopify customizer settings. Thanks!!

@CleanCanvas Жыл бұрын

This is really great stuff Jan. 2 mins in and already you have shared more understandable info about Metaobjects than Shopify has😁. Metaobjects are very cool and powerful, but the tricky part is to help people understand how to think about them. Great video.

@CodingWithJan Жыл бұрын

Thanks so much guys!! Means the world :-) 🙌

@CodingWithJan Жыл бұрын

Oh! And I should also mention that Shopify was involved! They're collaborating with more content creators to provide useful resources to the eco system. :-)

@markinternaut Жыл бұрын

Hey Jan. Thank you for all the tutorials. I've been working as a Shopify dev for 2 years now. I really like how Shopify implement these stuff including email, flows, search app and more. Even though it needs improvement. Thanks man.

@teonprudent4016 10 ай бұрын

Great job! I sometimes have the hardest time understanding Shopify's documentation, but you explained this perfectly.

@user-pt8yp2rp8h Жыл бұрын

This is exactly what I've been waiting for! Thanks for making this so clear to understand Jan :)

@CodingWithJan Жыл бұрын

thanks so much for the great feedback! :-)

@coadywhitsel5086 Ай бұрын

Extremely easy on the eyes, great voice, and wonderful descriptions of what these things actually do on Shopify. Thank you!

@CodingWithJan Ай бұрын

Beautiful comment to read in the morning :-) Thanks!

@BigfootHacks Жыл бұрын

You the man! Thanks for the clarity.

@patkars Жыл бұрын

Thank you so much for your exceptional ability to explain things.

@icostisanu Жыл бұрын

Thanks Jan! Finally somebody explained how to use Metaobjects :) You've just got a new subscriber here :)

@tanikaebinum7907 Жыл бұрын

Thank you so much!! I've been trying to understand with Shopify's documentation but it's so hard to get. You made it super simple to understand. Instant subscribe! 😀

@CodingWithJan Жыл бұрын

Welcome! 😊

@HansPeterImWunderlan Жыл бұрын

Shopify has become such an amazing plattform! Your videos are exactly what i needed to solve an issue i had in useing the metaobjects. Simply amazing work you provide! As suggestion, it would be helpfull to see a diffrent video with the focus on the coding part of html, css and liquid. Therefore creating more examples of these custom metaobject pages.

@CodingWithJan Жыл бұрын

Thanks for the great feedback! Happy to hear the videos are helpful, means the world. :-)

@alinabourova819 Жыл бұрын

Thanks a lot for this video tutorial Jan! Now this thing has much more sense

@CodingWithJan Жыл бұрын

Love to hear that! :-) Thank you

@Ciaran.wasted Жыл бұрын

Thank you for the examples with the designers i mentioned this in a comment so glad you did this❤️

@CodingWithJan Жыл бұрын

No Problemo 😊

@seempaq Жыл бұрын

that is actually incredible info! thank you

@bsewall Жыл бұрын

Great overview! I had seen Metaobjects in my Shopify Store but haven't explored the new feature. This video makes it very easy to understand. Thank you!

@CodingWithJan Жыл бұрын

:-) 🙌 Awesome, thanks for the great feedback!

@egg-rn8og 8 ай бұрын

this is exactly what i was looking for!! thank you!!!

@jeffwinkler2479 5 ай бұрын

Thank you so much fo rthe video!!! I have used everything you have taought in here and it has worked great. The only issue I have ran into is sorting a date field. I would love to see a future video going over sorting other filters in relationship to metaobjects.

@bobanumaracine Жыл бұрын

Very useful as usual. Thanks!

@kiran7777 Жыл бұрын

Omg i think this is amazing, helps so much to have custom content on seleceted product pages referenced with metafields(metaobjects in them) instead of creating several different product templates cause making changes in product templates is a pain when you have 100 templates

@injuniotv Жыл бұрын

Great video! You make everything so understandable!

@CodingWithJan Жыл бұрын

Glad it was helpful! :-)

@rbt7273 Жыл бұрын

Great tutorial on basic metaobjects!

@Etcher 11 ай бұрын

Danke für dieses Video, Jan! Du bist ein Coding-König!

@CodingWithJan 10 ай бұрын

Really appreciate the good feedback Etcher ! Cheers

@ds-martech 11 ай бұрын

Wow, Jan! Wonderfully explained! Thanks a ton.

@CodingWithJan 10 ай бұрын

Thanks so much for the great feedback, D S Martech ! :-)

@user-gl5jx5qz5k 8 ай бұрын

Thank you! Best video yet explaining Metaobjects vs Metafeilds!

@CodingWithJan 7 ай бұрын

Wow, thanks! :-)

@SwissplWatches Жыл бұрын

Brilliant!! thank you!

@rachelwhitehead9722 9 ай бұрын

Hi Jan, This was such an incredibly helpful video, thank you so much for sharing!!🤩

@HaseebAdnan0 Жыл бұрын

Helped a great ton. Thanks alot!!!

@CodingWithJan 10 ай бұрын

Awesome!! Glad the content was helpful. :-)

@kingtahasin3152 Жыл бұрын

Thank you so much!

@stanleysimeon4628 4 ай бұрын

Thank you for the insight. Appreciate that man. Keep up the great work. :)

@k.g.274 Жыл бұрын

Very informative Jan thank you for your efforts

@prachivalechha7252 10 ай бұрын

You're a brilliant teacher! So mesmerizing too.

@CodingWithJan 10 ай бұрын

Thanks so much for the great feedback, Prachi ! :-)

@elhaambasheerch7058 11 ай бұрын

Great Content Jan, I was skeptical about Shopify and whether I'll be able to learn it or not, I come from a code-heavy background so no code tools have never appealed to me really but the way you taught everything has made me excited about Shopify. Thanks for the help, would love to see a dedicated Shopify App Development course from you that covers everything. Also more content on Shopify's new UI extensions would be helpful! Shopify's no code portions isn't that complex, I face issues when integrating some type of code with it, videos that demonstrate code customization are really helpful

@CodingWithJan 10 ай бұрын

I appreciate your feedback! It's encouraging to know that the content has been of assistance to you, particularly as you have a background in coding. 🙂

@Fedgery007 Жыл бұрын

So helpful! Thank you!

@CodingWithJan 10 ай бұрын

Awesome!! Glad the content was helpful. :-)

@charbel4863 Жыл бұрын

great way to explain! subbedd and notifications on!!!

@xtcbg Жыл бұрын

Very good video! Thank you.

@lillaraczszabo6720 Жыл бұрын

Thanks for the really useful infos :)

@jokoheidel Жыл бұрын

Crazy good, Ty and t Shopify for really bringing useful things into the CSM

@CodingWithJan Жыл бұрын

😁 haha awesome you liked it!

@luckyduckystudios5709 9 ай бұрын

Thanks for the great tutorial! I love learning about this stuff. Your work is great!

@CodingWithJan 9 ай бұрын

Awesome, thank you! :-)

@ChristheFreelancer Жыл бұрын

Great explanation! Kudos Jan.

@CodingWithJan Жыл бұрын

Thank you, Chris! :-) 🙌

@msbdx4 5 күн бұрын

Thank you very much for your videos which are of great quality and very helpful. Once the Metaobject's field is created, the option to edit it are very limited. Is there a way to edit the field without having to delete it and re-doing all the entries for that specific field ? For example if I have a new fabric material coming, how can i add it to my list of preset choices of the material field ?

@RikBarwick Жыл бұрын

Great video Jan!

@willcartermedia Жыл бұрын

I love this tutorial and really appreciate it! I was wondering if you could make a video that touches more on the html/css part of this, or point to resources that could help with that? I have found that there aren't many videos on youtube showing just how in depth metaobjects can be used, and end-to-end process for how to implement them in a store. Thanks for all the knowledge you share - I find all of your videos very helpful and so well explained!

@CodingWithJan 10 ай бұрын

Hi WillCarterMedia, Thank you so much for your kind words and the video suggestion! I'll forward this to Jan, and if it aligns with our direction, we'll certainly consider adding it to our list of upcoming video topics. Your continuous support and input mean a lot, and we strive to make our content as helpful as possible. Best, Joy (Team)

@sunriseintegration Жыл бұрын

Super solid as always!

@CodingWithJan Жыл бұрын

Appreciate it! :-)

@NotJayUU Жыл бұрын

very helpful thank you!

@CodingWithJan 10 ай бұрын

Awesome!! Glad the content was helpful. :-)

@TerryChuchu Жыл бұрын

Thank you for your generous sharing ! And you are such handsome developer ! 😆

@MexicoMiAmor Жыл бұрын

Thanks, great to use also for recipe article partners / authors. So it is quite a 1:1 solution for me that will make our shop better / improve the time to setup blog articles.

@CodingWithJan Жыл бұрын

Awesome 😄 🙌

@pecorinosardo6537 Жыл бұрын

7:35 a

@MexicoMiAmor Жыл бұрын

@@CodingWithJan I did everything like you in the video, but not for Product Meta Fields, I did it for Blog Article Metafields. But there I can't see a meta field in the lower area added, when I open a blog article. Shouldn't the meta fields also appear there too like in the products backend view?

@ajayrabari433 Жыл бұрын

Thanks for the video.

@CodingWithJan Жыл бұрын

Thanks for the comment! 🙌 :-)

@dasmotz Жыл бұрын

Great video! I was wondering if you could make a video that goes into more details on metaobject references in liquids - metaobjects could be even more powerful if we could search for an entry and render the data associated with that object.

@andrearebelo4275 7 ай бұрын

Lord, I love KZfaq! Thanks Jan, this is really helpful Info

@mmbirdtoys4633 6 ай бұрын

Great vid and clear explanations 👍.

@modularfrancescoc.2465 Ай бұрын

hi there, can you do it with filters? I really like the comprehensive and well-explained work you have done. If this could be applied to filters would be amazing.

@Louminati Жыл бұрын

Great, useful video. Thank you. liked + subbed

@ardijanthaci454 Жыл бұрын

thank you Jan

@CodingWithJan 10 ай бұрын

Hey Ardijan, thank you!!

@AkifDemir-vw5xy 11 ай бұрын

Hi Jan, thanks for the great stuff, just one question please, lets imagine not all of my products have a specific designer, and I dont want to consider a desiger section for them. In this case, how could I manage it to prevent the sections from being shown, for the products which dont have a designer (as if I dont fill up the meta fields, the section is still going to be there without containing info!) I really hope you see my question :) Regards

@anagrahn Жыл бұрын

This is gold. Thank you

@petermuller5858 3 ай бұрын

great thanks a lot. Just did my FAQ-Section with this :) But, how can I sort my entries? Or how can I coltroll the Order of my displayed entries? Thx

@faizanpervaiz1137 Жыл бұрын

Hi Jan, This is really amazing, I have a question how I can display a single designer in detail page without creating pages for all designers. is it possible if yes how ?

@FilippoCampedelli Ай бұрын

Hey Jan great tutorial! One question i was left with for my use case: I'm trying to build a POS list page and one of the fields for this POS metaobject is the collections they have... How do you render a Collection element in liquid ? And where can I find this info about the element/html pairing?

@CodingWithJan Ай бұрын

Great question. So in Shopify we have access to a global "collections" object that holds all collections. If you want to access a specific one, you can use it's handle: {% assign my_collection = collections['winter'] %} Then you can loop over all products in that collection, and for example print the title: {% for product in my_collection.products %} {{ product.title }} {% endfor %} The liquid documentation is pretty helpful here / also chatGPT

@Balabala-iq1ne 10 ай бұрын

Hi Jan how to use meetaobject for storefront API, I can wall with graphql but Idk how to use that, I got response for handle and gid, but I don't know how to use to display in Hydrogen

@user-zc2pz4vg7o 9 ай бұрын

So this could be basically used as well to add brands to an store like Nike, Adidas, etc. and then sort by them?

@cyberspider78910 9 ай бұрын

If we have 100 product then we need to assign each of them individually? How to include it when uploading the CSV file if it could be planned to creat metaobject before uploading the CSV?

@Swaziman040 4 ай бұрын

Awesome video! One question. Is it possible to use the created metafield of the metaobject to show 1 field of the metaobject according to the product it is in? For example I have a metaobject for brands. 1 field in brands is an image url. I now want to call the product.metafield of the metaobject where this image url is stored. How can one show this image, relevant to the product it is in? Thanks in advance and keep going with these great tutorials!

@_aisolo 4 ай бұрын

THANK YOUUUU SO MUCH FOR THIS!

@lucasmprazeres Жыл бұрын

Great video, I tried to replicate to create size charts with default image for several products by clicking on a "Size Guide" button and I couldn't. It looks very complicated in practice. Is this simple to do?

@someradtunesimade Ай бұрын

thank you, great video jan

@CodingWithJan Ай бұрын

Glad it was helpful! :-)

@ahmedbayoumi1090 23 күн бұрын

Perfect, Thank you

@proonty 9 ай бұрын

So worth it to know you🎉

@thierry.933 8 ай бұрын

Hello, I would like to have a page per designer. Would it be possible ? And thanks for the tuto !

@itsmouad9279 Жыл бұрын

That is great

@mickeybrand Жыл бұрын

Thanks for such useful videos! Is there a way to access the metafield data using JavaScript?

@arifurrahman5993 Жыл бұрын

Thank you, it is nice example and easy . Is their any way developer can import their theme's created metaobject and then when import data the meta object data will import like WordPress. Thank you

@Maliques_ Жыл бұрын

Hi there! Your video made me one step closer to acomplish my goal. But I'm having issues. I want to display a list of a few features of a product, like waterproof and things like that. Each item on the list has an icon and a text. On the .liquid file, The metafield is returning to me as string (I can't loop it), so I transformed it into an array using shopify functions. I managed to get each line gid on shopify but, when trying to recover the object with that ID, I get nothing returned. Do you mind add an explanation on how to do that, using code, when I need more than just one entry of metaobject in a product please?

@yahavsarig11 5 ай бұрын

Hi Jan, I need to create a group of 8 meta fields, which I may add to the product multiple times. (as I need to add diamonds consumed in jewelry, We can have up to 10 stones in jewelry). Does Shopify have any solution for that, or must I add the same 8 fields with a counter number for each group 10 times? If not, I can use MetaObjects for that, but each entry I create will be used mainly in only one product. Is that OK?! Also, the big question is, how simple will it be to update the metaobject from my ERP using API? Great Video, Thanks!!!

@Zeb.Goodman 3 ай бұрын

When I view my cards on mobile, it has all the of button text aligned to the left instead of in the center of the button. Any suggestions on how to fix this? Thanks!

@honggo1999 11 ай бұрын

Big thanks Jan, I've already read all topics in Shopify Help about Metafield & Metaobject, and I'm so confused. You help me out! anw are you Shopify Experts or work at Shopify?

@CodingWithJan 10 ай бұрын

Hi Honggo, Thanks for the comment. If you still need help with this, you might need to connect with a developer expert. We can definitely help you find one if needed. (link in the description) Best, Joy (Team)

@Kids_world487 Жыл бұрын

Hey I wanna to add products with their images into menu in my Shopify store Can you please explain how do it? You was really helpful in my other projects Waiting for your response Thanks

@thei3omber Жыл бұрын

I have a store, with which I have normal products but the store also has multiple physical locations with individual services. I would like to display the services in separate pages, locations in separate pages and list off and give the visitors the possibility to either filter locations or services by the services or locations. How can I best do this with the metaobjects?

@rizvireaction1475 Жыл бұрын

JAN, Love your video. I have a question please respond As quick as possible. I have a metaobject containing the list type of variable. Can you explain me how I can access them inside the liquid ? I am stuck

@user-hn5xb2jb4c Жыл бұрын

Is there a way to change it from one column of designers to have two columns-side by side?

@user-bw5gx2qt7o 10 ай бұрын

Hi Jan, the exact same thing that you show in the video does not seem to be possible anymore. The funny thing is that I try to do the exact same thing and the exact same information (but then our data). We also work with designers. I contacted shopify support , they can't solve it. It just does not work anymore with the same section. First reply we got from shopify support was a link to this video.

@wasimsuperb Жыл бұрын

Sir how to add video under product images after last picture.

@benhasanaltun Жыл бұрын

Hey, thanks for the great video. So how will this content be translated? Would you happen to have any information about this? For example, does Shopify Translate & Adapt or Weglot work with them?

@CodingWithJan Жыл бұрын

Also great question. Since Metaobjects are accessible via the API, translation apps could potentially reach them. Since they are pretty new, I'd be surprised if it would already be implement, but pretty sure to come.

@user-lh9ve1pr9e Жыл бұрын

Works awesome! Can't wait to continue playing with this. But I have one question. If I use the customizer, and I don't have data for a section, it still shows the section in the product, but with the filler texts. Any way to prevent these 'empty' sections from showing?

@thg1305 6 ай бұрын

I have this problem, did you find a solution?

@user-lh9ve1pr9e 5 ай бұрын

@@thg1305 You'd have to change the liquid of the sections or blocks itself. Something basic like {%- if block.settings.content != blank -%} ... {%- endif -%} will do already. But it would be a lot easier if something would be build in for that.

@cyborgmemoirs 19 күн бұрын

@@user-lh9ve1pr9e I'm having this issue as well... I saw another theme has a conditional checkbox in their sections from the theme editor end... Trying to implement for my own theme but it's a pain!

@aleksandarrajic5156 Жыл бұрын

Great stuff

@CodingWithJan 10 ай бұрын

Hey Aleksandar, thank you!!

@mastafied Жыл бұрын

Is it possible to use metaobjects in the product description?

@too1leasy Ай бұрын

Any idea how to get metaobject reference information?

@massonmobelmanufaktur3392 4 ай бұрын

How can I sort the objects?

@nri_raj Жыл бұрын

You are genius

@99artdesignz Жыл бұрын

I have an issue with my custom products. I followed your video to code that but now when someone clicks a different option it shows sold out and when the page is refreshed it's no longer sold out. HELP!

@sanjaymakwana8404 Жыл бұрын

@Jan I am very sad about the code example you mentioned it was not this video related. please check and update

@danilofeitosa77 9 ай бұрын

Is there a limit to creating new definitions of Metafields and Metaobjects? Anybody know?

@slimbrazilstore Жыл бұрын

My product page doesn't show all options, how can I fix it?

@Laurenwoodruff 8 ай бұрын

great explanation!

@CodingWithJan 8 ай бұрын

Glad it was helpful!

@mujtabamalik338 10 ай бұрын

"Do the sections for assigning metafields to products still appear, even if no metafields have been assigned to those products

@mylesdeboer9746 Жыл бұрын

Jan, I am hoping that you might see this and that you could answer a question for me. I have never developed on Shopify, but have been thinking about making the move on giving it a shot. I am curious to know how limited UI styling is within liquid though. For example. Could I create a dark mode option button that, once clicked, it will NOT only change the the colors, but I could have a banner image change to another image when the dark mode button is clicked as well? let's say the banner image is a dog running around, but once the dark mode button is clicked, it then shows the dog sleeping. Is this an easy possibility? I feel like this may be a stupid question.

@CodingWithJan Жыл бұрын

Hey Myles, great question! :-) Building this feature would be possible via theme Customizations, yes! However "liquid" would only be part of the solution, because Liquid can only do things before the page is visible. (e.g. send a different headline if a user is logged in) Mainly you'll need: CSS ( for styling the dark mode) and some JavaScript (to dynamically switching between light and dark after the page is already loaded) Here, check this out: www.w3schools.com/howto/howto_js_toggle_dark_mode.asp Hope that's a good starting point! :-)

@mylesdeboer9746 Жыл бұрын

@@CodingWithJan Great help! Thank you!

@IZAT-hx3ve 4 ай бұрын

you are the best ✌

@mr.ngohoan Жыл бұрын

hi Jan, Can you make a video about Metaobjects, how to custom text on products page?

@CodingWithJan Жыл бұрын

Hi Hoan, not planned right now. This might be a better usecase for metafields also.

@pressvinyl4420 Жыл бұрын

I have thousands of products with several dozen metafields each. Is it possible to use a 'where' statement to use one of these metafields as the reference in product recommendations? Or perhaps just simply to pull X products that match the metafield? E.G. A product has the metafield with the value 'prog rock'. I'd like to pull other products in that also match the 'prog rock' metafield value, thereby pulling much more focused product recommendations, which I find to be uniformly terrible on Shopify when you have a lot of unique products. Metaobjects don't seem to be the right approach for my problem.