Shopify - 4 Ways to Add Unique Video to Each Product - Basic to Adv. w/ Metafields
Вставка
- Опубліковано 30 лип 2024
- Normally you can add a video to the product media area, or you can add it in the product description. But there is a third way that lets you add the video anywhere on the product page using custom liquid and Metafields.
We can use the ‘multi-line text’ metafield to add our embed code to our product.
Then we output that code by using the Custom Liquid block in the theme editor. The liquid code would look like this:
{{ product.metafields.custom.video.value }}
This also works for any kind of iframe content that you might want to embed using a metafielf including calendars, forms, maps.
You might also need to make your UA-cam video responsive (depending on your theme), so that it resizes correctly to fit the area you've added it to.
🔗 LINKS MENTIONED IN VIDEO
This video as a blog post: ed.codes/blog/how-to-embed-vi...
Responsive videos: • How To Fix Video Embed...
And as a blog post: ed.codes/blog/easy-responsive...
Video in Accordion: • Shopify - How to Add a...
📢 STAY UPDATED
Want to see my latest tips, tutorials, and code add-ons? UA-cam won’t always show you. Subscribe to get emails directly from me: ed.codes/newsletter
👨🏼💻 WHO AM I?
Hey! My name is Eduard.
I teach the tech side of starting and running a Shopify store.
I'm a professional web developer, but my goal is to make Shopify easy with simple and straight-to-the-point videos.
Visit my website: ed.codes
Join "Shopify DIY" on Discord
Chat with me and other store owners and developers:
/ discord
🛠 CODE SHOP
edcodes.gumroad.com/
Pre-built sections & features for Shopify 2.0 themes, often replacing the need for apps. Copy and paste the code into your theme.
👍 MY FAVOURITE APPS & THEMES
- Pagefly (Page Builder): pagefly.link/vASPAeBp
- Design Packs: platform.shoffi.app/r/rl_gyOD...
- Loox (Reviews): loox.io/app/edcodes
- Vitals (Marketing Add-ons): vitals.co/shopify/6557054
Premium Themes by Out Of The Sandbox: outofthesandbox.com/?rfsn=594...
Some of these are affiliate links. If you ever upgrade to a paid plan, you will also be supporting this channel at no extra cost. Win-win!
⏭ CHAPTERS
00:00 Intro
00:51 Product media
01:51 Product description embed
03:50 Metafields Intro
05:40 Define the Metafield
07:32 Output in a Block
09:30 IF a product doesn't have a video
10:39 Custom Liquid Section
12:17 Adjusting Section for your theme
14:54 More CSS tutorials?
#Shopify #metafields #videos #css
Thank you for the amazing coding info, you have really helped me through out my web designing career. Keep up the great work!
Hello Ed
I am start to watch your videos, you teach very nice and I can understand all without getting tired , thank you
Really struggled for it to find. Thanks a lot !! :)
Perfect, thank you so much! I'm looking forward to a detailed tutorial on setting up meta objects (unless you released one and I missed it!! I better go check!)
And how to apply basic CSS stuff to the shopify themes would be helpful too!
Exactly what I was looking for 😉 Excellent tutorial and being able to use the template for products without videos via the "if" statement is the icing on the cake! Thanks so much for all your videos 👍
great content. Now i understand a little bit of metafields and code. TKS!!
Your videos are so well made and understandable ! Crazy good content.
Question, isnt this slowing down ur website if u have so much product videos ?
wow... this is so helpful. thank you for explaining it easy to understand.
ahhh thank you brother you made it so easy i've been struggling with this for a minute
Thank you, this helped bring together a lot of for me!
Legend! Absolute lifesaver
This was super helpful! Thank you so much! Metafields are really good and amazingly confusing for me at the moment :D
👍 thank you very much for your tutorials.
This was great thank you!!
Great video like alway ed!
Another great video. Thanks for posting!
Thanks for commenting!
Very helpful! Thank u!
Best Shopify video tutorial. Thanks. Can you give us more information on custom meta object use case.
Yes, please do full-length CSS tutorials!
Best Shopify channel there is. Keep going.
Thank you!
@@EdCodes it's simply the truth.
Amen.
Thank you very much sir! God bless you
I went one step further and added a custom liquid block to the product accordion so that I can still have it in a drop-down, that's always open on load. 😊 Just utilizing some of your other videos. thanks so much.
how did you do this??
Thank you for this very clear video. I have been trying to make my product demo videos more visible within the product page and I think this is the best way. I do have one question though. Would this work if I were to make the product type file and simply upload the video file? Instead of embedding a youtube video file?
I'm getting a lot out of your Shopify video tutorials. nice job! I am still struggling to learn how to build a basic Shopify 2.0 website. CSS is beyond my current capabilities. It seems like you made a comment in a previous video that the theme can't be updated is it contained CSS modifications. This makes me think that there is a reason not to make these modifications. Can you expand on this?
Thanks!
Thank you so much! Now I can Impress my boss!!!!!!!!!!!!
Hi Ed, 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.
hi i love your videos. is it also possible to autoplay the video in the product catalog ?
Great stuff. Since the embed code is always the pretty much static, couldn't it be made so that user just needs to give only youtube video ID value and the embedding code behind it could be global. This would help tremendeously if at some point you like to change the way how it's embedded (for example modifying margins/paddings/responsiviness) or if youtube changes their code of it. One change would fix all embeds throughout the website/products.
Yes, I just wanted to keep it simple here but normally for UA-cam I would do exactly what you describe - use a text metafield for the video ID and have the rest of the code in the theme editor. But for this video I wanted to demo that it can be used for different embed codes (and code in general), and it's not always the case that the URL differs by just one ID or part.
Hi Ed. Please teach us how to customize the blog posts? Shopify doesn't have this option and I've been struggling with it for a long time.
hello, do you have a video explains how to add extra charges to a product using metafields
Very useful thanks. I'm struggling with loading the video directly into the metafield so it's a local file instead of a UA-cam embed.
I've created a file metafield and uploaded a webM video and it never works. If you could make a video on that please, I've seen a lot of people asking this question in forums.
Very good! Question: In the Custom Liquid section > How did that same video that you added earlier using the metafield method end up as the video in this section? I did not see you add that info when creating it.
The embed code was added to the Metafield in the associated product then Ed output the metafield to custom liquid section.
@@davidgoult8694 thanks! that makes sense. I'll be watching again to see if I catch it this time.
Hey Ed, thank you for the great content. Can this work for referenced metaobjects? I have been using Shopify's new metaobjects function to build out re-usable bits of product info to reference commonly needed information and output to my theme. For example, a video that explains a product material that many different products use. I have tried using liquid to output these using what I think is the right metafields name and key but doesn't seem to work!
I am running into the same thing. I added this liquid to a page: {{ shop.metaobjects.game_details.intro_video.value }}
But is not pulling through the video properly. Wonder if there's some other trick when it comes to metaobjects or normal pages.
Thanks for these videos. Is there a way to do this without having to upload the video to UA-cam? Such as uploading the file to Shopify files and copying the link? Thanks!
Is there a way to retain your video dimensions when adding to product media?
you are fantastic . i want to ask how i got the block custom liquid block i didnt find it . or how i create this custom liquid. thank yoou
a css tutorial would be very helpful
Thank You for everything so far. You've helped me a lot and yet here I am with one request (haha).
Would You like to create code for NAVIGATION MENU AKA MEGA MENU for Dawn theme? HTML + CSS.
I can support this with money.
Hello, how about mobile version?
Could we change some code and size of the video will be changes based on size of devise ?
what if we want to change its size only for pc not for mobile it changing both equaly ?
Does anyone know how to add downloaded views into the product description tabs? cannot find embedded code for it
Hi Ed, just found your channel now..brilliant..Would you know how to add a video to the home page? I did it before, but now its saying This link is invalid, Try using a complete UA-cam or Vimeo link.. I copied and pasted directly from youtube and wont work.. any thoughts really appreciated! Thanks
Can i add image in collapsible row? Please help
Hey there. Great work but with Dawn 13.0 the trick doesn't function anymore. An update would be very helpful.
Sorry, my mistake I was referring to the video for embedding the video in a collapsible row.
when I select insert dynamic source, my metafield that I just created doesn't show up there. id also like to direct message you with 1/2 other problems I have with my store. for example how to resize/ make responsive, the video I uploaded to product media if its not a UA-cam embed code. My main wish is to have my videos responsive in my main part of my store not for product media or product description. Uploading it as a custom liquid is fine but I cant see on your video how to make it responsive, in that particular part of my store. Putting it as a metafield video is harder in the main part of my store than if i was to just upload it as a UA-cam embed code. it would really help if you could help me out with these problems I have. I also love the content you create and appreciate how in depth it is. I hope the way I've worded this has made sense.
Just an update - I've added my videos in product media and on mobile they're perfect but on desktop they're just too long. do you have a code for responsive resizing for videos in product media
hi! my video is working on my dekstop, but not on my phone... anyone knows a solution?
Is there any way to make the product video play automatically?
Hi, what about if my videos are not from UA-cam? I have them on Shopify fields. I followed the steps but it doesn´t work. What do I have to do in this case? Thanks in advance
I would also like to know this
Can u nake a full course shopify with hydrogen? Really, don't find any course. Just one or two overview video available.
I don't have much experience with Hydrogen, and my channel is more for beginners anyway. This is a job for @CodingWithJan or @CodewithChristheFreelancer
Ed, I commented on your blog about this/something similar. I am refreshing your blog to see if you reply, not sure if it pings me.
CAN I EDIT YOUR UA-cam VIDEOS?
thanks Nigga, i got frustrated already. it's so easy for me to think of coding even though the solution might be very simple like first solution
i really love your videos! i just got some youtubers promoting my website and was thinking about embeding their reviews in my products and boom... you make a video about it🤣🫶🏻
also really love your content because you use dawn theme too😮💨