Shopify Tutorial: How to Turn Your Image Banner into a VIDEO Banner
The Ecom Geeks show you how to turn your image banner into a VIDEO banner! If you want to know how to add a video to shopify homepage or how to embed video slider on homepage, we've got you covered! We will teach you how to to just that and also share a resource where we get our free, high quality photos and videos!
Need help setting up your video banner? Hire one of the Ecom Geeks: theecommgeeks.com/store-tweaks/
Want to talk to us 1-1?
calendly.com/ecomgeeks/1-1-se...
Get the Code:
Facebook: / 2953097808258497
Ecom Experts (Code Credit): ecomexperts.io/blogs/liquid-t...
Download your FREE guide “5 Step Fix for High Traffic & No Sales”:
theecommgeeks.com/free-shopif...
Where to Find Us:
Facebook: / 2953097808258497
TikTok: / ecomgeeks
Website: theecommgeeks.com/
Shopify Forums: community.shopify.com/c/user/...
*Affiliate Disclaimer:
Note this description contains affiliate links that allow you to find the items mentioned in this video and support the channel at no cost to you. While this channel may earn minimal sums when the viewer uses the links, the viewer is in no way obligated to use these links. Thank you for your support!
• Shopify Tutorial: How ...
Пікірлер: 336
wish the code was in the description
@GillianDEmilio
Ай бұрын
did you ever get the code? i havent been added to the group
@oliverlow5349
Ай бұрын
@@GillianDEmilio did you get the code yet?
@GillianDEmilio
Ай бұрын
@@oliverlow5349 no i didnt
Hi I copied the code and pasted into the new section. But the video doesn’t play on its own and the cover photo is cut off how can I adjust the code to accommodate for both?
Solid tutorial! Would be amazing if we didn't have to sit idle to be approved to a private fb group to get the modified code to be fair.
@EcomGeeks
Жыл бұрын
I agree! In hindsight, I wish I had put it on our website instead. I do my best to approve people's requests to join quickly and do it several times a day. I do apologize for the inconvenience.
@Chopazonstore
Жыл бұрын
@@EcomGeeks Why don't you just post it in the comments?
@MissHealthPotion
Жыл бұрын
@@EcomGeeks I don't have Facebook so this feels a bit unfair - could you please post the code somewhere more accessible? Thank you!
@carhoodie
Жыл бұрын
Hate it like you did it with the fb group. thumbs down
@trimesem8968
11 ай бұрын
RIGHT !!! SMH THIS IS USELESS IF U DONT HAVE A FACEBOOK OR CANT GET IN THE GROUP!
Hi, can someone help me? I used the code but when i am at the mobile webshop, the menu bar is underneath the background video. How can i fix that if i click on the menu button the menu comes over the background video?
I'm having a processing issue when I try to upload my video file, it's a .mp4 file. Do you know what this could be?
how can I add my products over (on top of the video) making the video look more like a background ?
When I try to upload a video it says "File format is not supported on a trail plan". Which plan do I need to purchase?
I was trying as per your video. But I saw from footer email and column over lapped to my featured collection. Video background was showing in place of banner image. Can u please help me
Hi, Thank you for your videos they are great!. There is an issue with mobile the video background shows over the dropdown main menu. Do you know how to fix it?. Thanks
Will the video show up on the mobile version of the store
it keeps saying video format not supported, i even found the video you used of the girl in the dress and still not working cant upload the video? need help
Hi, I'm using Dawn theme and followed your instructions, however, once I get to customsing the theme after having copied and pasted the code, I get the following error: To preview or save your changes, correct the dynamic source error(s) in the following templates. Anybody ever seen this before?
Is there a way to move the banner to the left side of the video? Any help would be appreciated. Thank you!
Hello, thaks for a great tutorial. Do zou maybe know how to bee able to see main meny in mobile version of store, which is hidden behind video when I entered the code given. Thank you!
Excellent video!! Thanks for sharing The only problem was that on some smartphones the video does not play. Can you help me to resolve this?
AMAZING! Worked like a charm
Same here it doesnt play on mobile. Sometimes it will work on android but it never works on my iphone. Any fix for this? Any help would be greatly appreciated.
When I coded it at first the video would play on IOS but stopped working a week after. Know a fix to this?
I have a question... Do the mp4 videos uploaded contain audio?? i have just finished adding my video but for some reason there is no sound
@mckingbrand
Жыл бұрын
Same question would like the sound to play
Great tutorial, does anyone have the file with the code to send?
Thanks for this video, it was a huge help today! Nicely done.
@EcomGeeks
Жыл бұрын
Thank you so much! Glad to hear!
Thank you so much, this was extremely helpful
Hello!!! Thanks for this video! In mobile format, it's getting a white screen at the bottom of the video, how to change that? and how to remove the white background of the text?
How can i make the video play only in the home page and not in the other pages please, thank you in advance.
Just noticed that the video only shows in landscape mode when flipping the phone. Any suggestions?
Hi i need updated code for video background .. can your share me the link
Thank you for the video! Very helpful ! IT WORKS GREAT ! Thank you so much for this !
@GhulamMustafa-ff7sv
Жыл бұрын
same here.
Love the video very informative! just waiting to be accepted into the Facebook group
Great video thank you so much.
On Mobile version the video has a black background that I cant remove. Any way I can remove or at least change the colour of it?
@EcomGeeks
2 жыл бұрын
Yes, I show you how to do that in this video: kzread.info/dash/bejne/iW2tpdCwfMnXk7w.html
Is there a way to change the position and size of the text?
Invalid preset "{"en"=>"Video Background"}": cannot include blocks in preset because there are no blocks defined. :(
i think there may have been an update because it is not working and im getting the following message: Invalid preset "{"en"=>"Video Background"}": cannot include blocks in preset because there are no blocks defined.
How to have 2 background videos? one for the desktop version and one for the mobile version?
Hi where can I find the link? I didn’t find it in facebook
How can I fix the code so the video banner displays properly on mobile? Currently the text sits below the video.
why i am getting too much space on bottom side i adjusted the padding setting stlll there is more space what to do please anyone sudsiest me
Thanks for great video :D That help me alot
@EcomGeeks
Жыл бұрын
Glad to hear!
great video thank you
Hi ! thanks a lot for this excellent demontration. i've changed my image banner to a video as you showed but all there's a big white space that appears below the video banner and all the writing is one on the other how correct that please ? thanks again
Thank you! I am also waiting for an acceptance for Maria Jo! I think this will really elevate my website
Hello! To your point, the original code had some space issues. I'm waiting to be accepted to your Facebook group. Thank you for this video!
I'm wondering if there is code out there to change the position of the button over the banner. My button lands square on the product in my video. Any ideas are much appreciated!!
@greeneflicks
9 күн бұрын
go into your edit code and sections, same place where you put the code. and find the button code and change to rounded square
I applied 🙌
Dope Content E.G.🤘🏼😎💯💧
I got the video background but I don’t have the editing tool on the right. Can you tell us how to get it?
@faseyh9367
Жыл бұрын
just zoom your chrome browser out to 70-80% the editing section will automatically appear on the right.
Great video!
@EcomGeeks
Жыл бұрын
Thank you!
what to do for mobile version most of the visit is from mobile version
@EcomGeeks
2 жыл бұрын
100%! It is mobile friendly but if you need to customize anything for your mobile view, watch this video: kzread.info/dash/bejne/iW2tpdCwfMnXk7w.html
You’re the best
Thank you!
@EcomGeeks
Жыл бұрын
You are very welcome!
Thanks for this video! But I cant seem to find the "files" tab after selecting Settings. Is there somewhere else I can find it?
@CristianSquitieri
6 ай бұрын
yes, now it isn't on setting... in the shopify main menu on the left, find the tab "Content", and inside you will find "Files"
Thanks for the video, I'm waiting to be added to the group.
Would anyone know how to move the button down ?
Is there any way to make the whole video clickable?
This is a awesome tutorial, thank you so much for making it! I just have a few questions. 1, is there a way for me to change the aspect ratio of the video background? I prefer a wider aspect ratio, but the video background is cropping my video on the sides. 2, is there a way for me to completely remove the caption in the middle? I deleted all the text, but there is still a semi-clear white box. Any help would be greatly appriciated!
@jjnyce
Жыл бұрын
Did you find out?
@user-ee7sv3dn4p
Жыл бұрын
@@jjnyce I want to know as well
How can I remove the transparent white box?
como descargo el codigo
If i switch to the mobile view the video goes over the left menuits overlaps
@EcomGeeks
2 жыл бұрын
Thank you for bringing this to my attention. I updated the code to fix it, I've posted it in our FB Group: facebook.com/groups/ecomgeeks
I'm songlad I found this page! You've been an amazing help! Also just joiner your FB group
@EcomGeeks
Жыл бұрын
Thanks so much!
does anyone have the code? I still haven't been accepted into the facebook group. :/
How long does it take to be accepted into the group
to bad the code is on the private fb page. i would like to use this now but i have to wait until an adnim give me access. been three days already.
Waiting for acceptance on FB to get the code?
GREAT GREAT VIDEO!
@EcomGeeks
Жыл бұрын
Thank you so much!
Hey there! Does this work for the Craft theme? Ive tried other videos and theyve had problems with black boxes on the mobile site. Just requested to join the group - thanks!
@EcomGeeks
2 жыл бұрын
Hey! Yes, it works with any 2.0 theme :). If you end up needing customizations for the mobile view, watch this video: kzread.info/dash/bejne/iW2tpdCwfMnXk7w.html PS: I just approved a few membership requests, if you were missed let me know what name you joined under and I'll make sure to add you in.
How do I get the code ?
Thank you for this video, I've added it to craft theme and while it works very well on the website, it doesn't show up well on mobile. Any ideas on what to do?
@luxindia
Жыл бұрын
Could you email me the code ? I’m waiting to be accepted into the group still 😭
@MrRoyhuntley
Жыл бұрын
@@luxindia did you get the code ?
Hi there thank you for the tutorial , The video seems to overlap the mobile phone menu, Its right ontop of it is there a way to fix it.
@EcomGeeks
Жыл бұрын
Yes, there is an updated code in the Facebook group. Go to files and view video-bg-code-v1-1.txt
@XolaniZeka
Жыл бұрын
@@EcomGeeks Thank you Guys, you truly rock
@MrRoyhuntley
Жыл бұрын
@@XolaniZeka hey - would you possibly be able to send me the code ?
Awesome
I need a link to the edited code pls. Using a 2.0 theme and it doesn't work well. Google drive would be best. thanks
@EcomGeeks
2 жыл бұрын
Hey Ryan! Working on a blog post with the updated codes. I'll follow up on this comment with a link once I have it posted.
@PEIslandedition
4 ай бұрын
Must be one long blog post, you've been writing it for over a year.@@EcomGeeks
@astentfrizzyfox8091
3 ай бұрын
@@EcomGeeks hi have you made the link?
Do you know if I can do this for BigCommerce?
@EcomGeeks
2 жыл бұрын
I'm sorry, I'm not familiar with BigCommerce. Your best bet would be to find a BigCommerce theme with a video banner built in. Either that or you could try and search for something along the lines of "BigCommerce Video Banner" or "BigCommerce video hero banner". Hope that helps!
Hi! Thank you for the video. On the desktop it worked perfectly, but on my mobile i get the video with underneath it black screen. How can I solve this? Does someone knows?
@imTriiBz
2 ай бұрын
Any solution?
anybody have the code? i haven't facebook
How can I remove the video banner from product page ?
Super helpful video. I'm waiting to be approved for your group. Aly
@EcomGeeks
2 жыл бұрын
Thank you I just approved requests :).
Hey, ive managed this all the way to the end but my 'block' is super long and goes on for ages until the next section. Any ideas?
@tatianag16
Күн бұрын
go into the code and delete the extra space at the bottom
can you download mp4 from canva? and upload?
@EcomGeeks
Жыл бұрын
I'm not familiar with Canva. We use pexels.com/ for free videos.
this code is overlapping and taking extra blank space in my shopify store and it taking my footer with it
Hi thanks for the video, looks fun to use. Waiting to be accepted on the FB group :)
why is your facebook group private. i have to wait for you to accept requests in the middle of working to get the code you require for the video
Loved this! Waiting to be accepted thank you
I set it all up properly but the video is not playing.
How agree autoplay?
Hello, It was a success! However, my "Shop Now" button has disappeared. How do I get that back?
just requested to join the group! cant wait to see how the code will work
@oliverlow5349
Ай бұрын
@isakdouah7840 do you have the code? I haven't been added to the group yet :(
Hi, can I please get the code? I haven't been accepted in the group yet! it's kind of urgent!
Hi, Is there anyway to access the code? Did anyone manage to access the code on this chat - as I'm not allowed on the Facebook. I really hope this is not spam?
@EcomGeeks
2 жыл бұрын
We are working on a blog post containing the codes. I'll pin it at the top of this video when it is complete :).
@trynchalee906
2 жыл бұрын
@@EcomGeeks i dont have facebook either…is this code accessible somewhere else?
Hi there! Sorry, but there is any other way to get the code? I sent the notification to join facebook group, but i didn't get answer... Does the group still alive? Thanks!
@chelseaveronica936
2 ай бұрын
I would like to know too!
Sory to say that but theright codes i can t acces them on your fb page cuz you accept so slow the friend requests please put in description the codes
Thank you! Just requested
@EcomGeeks
2 жыл бұрын
You've been approved. Welcome!
@algohubturkiye
Жыл бұрын
This is the real owner of the code github.com/mrdexters1/videoBackground.liquid/blob/main/videoBackground.liquid
Hey plz I need the code html plz
Thank you so much for this video! I just requested for the fb group to get the updated codes :)
@EcomGeeks
2 жыл бұрын
I just approved a few requests. If you haven't been approved yet, let me know which name you signed up under and I'll take a look :).
@roboclean9563
Жыл бұрын
@@EcomGeeks just sent a request been waiting
@EcomGeeks
Жыл бұрын
@@roboclean9563 I just approved all remaining requests. Welcome!
@tgrstorm3389
Жыл бұрын
@@EcomGeeks me pls
@playboyjohn
Жыл бұрын
@@EcomGeeks i just sent a request!! should be under Johnathan Lahmayer
Can someone drop the code here I’m not getting accepted
@taylersala9484
6 ай бұрын
did you get accepted?
I don’t see the Facebook group😢 can someone send me the code.
Hi! I just requested the fb group. Thank you for the video :) Looking forward to being accepted.
TY for the video. Waiting to get access to the group and test the code. Regards
@EcomGeeks
2 жыл бұрын
You are very welcome! I just approved requests :).
I’m just now seeing this video and I can’t get the code, are you still giving out the code?
@EcomGeeks
2 жыл бұрын
Yes, go here: facebook.com/groups/ecomgeeks Click on Files or use the search button to search "video". The files are called video-bg-code-v1-1.txt & video-bg-code-v2-1.txt
Hi! Can someone share the code with me? I already requested to be in the fb group :)
Waiting to be approved in fb group, thank you
Too. Cool helps
@EcomGeeks
Жыл бұрын
Glad to hear!