Shopify - 4 Ways to Add Unique Video to Each Product

Shopify - 4 Ways to Add Unique Video to Each Product - Basic to Adv. w/ Metafields

Рет қаралды 16,017

Күн бұрын

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 KZfaq 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? KZfaq 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

Пікірлер: 68

@inspiron9821 Ай бұрын

Really struggled for it to find. Thanks a lot !! :)

@DirtyPixel 3 ай бұрын

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 👍

@Deborahbrako Жыл бұрын

Thank you for the amazing coding info, you have really helped me through out my web designing career. Keep up the great work!

@somayehtorabi-tw7yi Жыл бұрын

Hello Ed I am start to watch your videos, you teach very nice and I can understand all without getting tired , thank you

@heechung6377 Жыл бұрын

wow... this is so helpful. thank you for explaining it easy to understand.

@sidneycandia Жыл бұрын

great content. Now i understand a little bit of metafields and code. TKS!!

@erinnlamattery5075 Жыл бұрын

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!

@chrismaki5456 11 ай бұрын

Thank you, this helped bring together a lot of for me!

@nikrobins95 Ай бұрын

ahhh thank you brother you made it so easy i've been struggling with this for a minute

@olgagal8800 Жыл бұрын

👍 thank you very much for your tutorials.

@tjb993 Жыл бұрын

Legend! Absolute lifesaver

@Fedgery007 Жыл бұрын

This was great thank you!!

@Human_Evolution- Жыл бұрын

Best Shopify channel there is. Keep going.

@EdCodes Жыл бұрын

Thank you!

@Human_Evolution- Жыл бұрын

@@EdCodes it's simply the truth.

@earspasm 5 ай бұрын

Amen.

@ddcwraps Жыл бұрын

Very helpful! Thank u!

@norabruno_com 2 ай бұрын

This was super helpful! Thank you so much! Metafields are really good and amazingly confusing for me at the moment :D

@KlumHouseBags Жыл бұрын

Yes, please do full-length CSS tutorials!

@CaptainActive Жыл бұрын

Another great video. Thanks for posting!

@EdCodes Жыл бұрын

Thanks for commenting!

@PandaShopMi 4 ай бұрын

Thank you very much sir! God bless you

@davidgoult8694 Жыл бұрын

Great video like alway ed!

@mateuszsynderecki7168 Жыл бұрын

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 ?

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

Best Shopify video tutorial. Thanks. Can you give us more information on custom meta object use case.

@davidgoult8694 Жыл бұрын

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.

@elisaolenik7037 9 күн бұрын

how did you do this??

@BShockedElectrical. 8 ай бұрын

Thank you so much! Now I can Impress my boss!!!!!!!!!!!!

@erinnlamattery5075 Жыл бұрын

Thanks!

@Marcel012345678 4 ай бұрын

hi i love your videos. is it also possible to autoplay the video in the product catalog ?

@iPedro 4 ай бұрын

Very useful thanks. I'm struggling with loading the video directly into the metafield so it's a local file instead of a KZfaq 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.

@sunsead Жыл бұрын

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?

@abcsoftamil 11 ай бұрын

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?

@mylesdeboer9746 Жыл бұрын

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.

@Berlin0 Жыл бұрын

hello, do you have a video explains how to add extra charges to a product using metafields

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

a css tutorial would be very helpful

@2000pppp 3 ай бұрын

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

@elisaolenik7037 9 күн бұрын

Thanks for these videos. Is there a way to do this without having to upload the video to KZfaq? Such as uploading the file to Shopify files and copying the link? Thanks!

@shimaabrishami837 Жыл бұрын

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.

@cantti Жыл бұрын

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.

@EdCodes Жыл бұрын

Yes, I just wanted to keep it simple here but normally for KZfaq 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.

@NikitaSilkin-li6gx 2 ай бұрын

Hello, how about mobile version? Could we change some code and size of the video will be changes based on size of devise ?

@mohitbeniwal3425 9 ай бұрын

what if we want to change its size only for pc not for mobile it changing both equaly ?

@adilabaseer558 2 ай бұрын

Can i add image in collapsible row? Please help

@FootballPlayerMoments 11 ай бұрын

Does anyone know how to add downloaded views into the product description tabs? cannot find embedded code for it

@user-wv7jo1qg6f 6 ай бұрын

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 KZfaq or Vimeo link.. I copied and pasted directly from youtube and wont work.. any thoughts really appreciated! Thanks

@BennyBoychik Жыл бұрын

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!

@PhaseShiftGames Жыл бұрын

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.

@aks1935 10 ай бұрын

Is there a way to retain your video dimensions when adding to product media?

@lauremoens8312 Жыл бұрын

hi! my video is working on my dekstop, but not on my phone... anyone knows a solution?

@CaptainHuler Жыл бұрын

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.

@apollomarconi1090 Жыл бұрын

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.

@davidgoult8694 Жыл бұрын

The embed code was added to the Metafield in the associated product then Ed output the metafield to custom liquid section.

@apollomarconi1090 Жыл бұрын

@@davidgoult8694 thanks! that makes sense. I'll be watching again to see if I catch it this time.

@joannahong6262 11 ай бұрын

Is there any way to make the product video play automatically?

@NEGPEC 5 ай бұрын

Hey there. Great work but with Dawn 13.0 the trick doesn't function anymore. An update would be very helpful.

@NEGPEC 5 ай бұрын

Sorry, my mistake I was referring to the video for embedding the video in a collapsible row.

@LightsBright101 11 ай бұрын

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

@LightsBright101 11 ай бұрын

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

@AlejandroMaldonado-lv7bv Жыл бұрын

Hi, what about if my videos are not from KZfaq? 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

@poochyhouse 9 ай бұрын

I would also like to know this

@riamahmed7019 Жыл бұрын

Can u nake a full course shopify with hydrogen? Really, don't find any course. Just one or two overview video available.

@EdCodes Жыл бұрын

I don't have much experience with Hydrogen, and my channel is more for beginners anyway. This is a job for @CodingWithJan or @CodewithChristheFreelancer

@Human_Evolution- Жыл бұрын

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.

@Rowafaedits194 Жыл бұрын

CAN I EDIT YOUR KZfaq VIDEOS?

@okeowomatt5090 7 ай бұрын

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

@pillgat3s Жыл бұрын

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😮‍💨