ฝัง
- เผยแพร่เมื่อ 29 ส.ค. 2024
- Today i will show you how to add video background banner to Shopify homepage with autoplay for Dawn Theme and adding the title and description to the banner with a call to action button.
Are you looking to add some extra flair and style to your Shopify homepage? If so, then a video background banner could be just the thing for you, with this feature, you can create an engaging and eye-catching Shopify homepage that will draw in customers and make your Shopify store stands out from the competition.
Adding Video background banner to Shopify homepage allow customers to truly immerse themselves into your store, this creates more engagement with potential shoppers who may be browsing around on their phones or tablets, and it does Increase customer retention rate because research has shown that Shopify stores featuring video background banner have higher user engagement rates than those without it, meaning people tend stay longer and return more often if they see something interesting going on at the Shopify store’s homepage.
Video Background Banner Section : pastebin.com/w...
FIX Banner Text : pastebin.com/4...
If you have any questions or suggestions my Instagram : / anas_elmedlaoui
About me:
My name is Anas El Medlaoui and i have been around digitally for 8 years making Websites, Mobile Applications, Social Media Promotions, E-commerce etc...
And i have accumulated some experience in multiple fields over the years jumping from project to project (Which wasn't a good idea), I started this TH-cam channel after a year of hesitation to share my knowledge and experience with people that are willing to succeed online with the theory of knowledge for everyone.
#video #banner #shopify
🛑🛑ATTENTION !! For everyone who's having the issue of banner heading and button not showing up on Mobile.
Get back to section background-video.liquid that we did create then scroll down to the line 439 right before remove the code below :
.videoBoxInfoTitle, .videoBackground .videoBoxInfoBtn { display: none; }
After that click on Save and get back to this video and HIT THAT LIKE BUTTON.
Cheers
Thanks. I love you
Love you too.
11:44 Hey hey, I would like to have the video banner on mobile to scale down and fit on the screen. I wasn’t able to locate an adjustment for that. Can you help? Thank you, always!
hey its still not working
on mobile my text and button that is on top of the video in desktop mode shows up below the video in mobile?
Bro you have no idea how much you have helped me understand how to make an online store , I appreciate your videos heavy , you get down to it and don’t bs on the secrets to success !!! Thank you
Question where do I find the codes
For everyone that gets the “no image” error thing… I found the fix. -- So what you have to do is you have to put in a cover image. Under the box where you put in the video link, there is a box saying Cover Image. So if your site background is white. Take a screenshot of the white bit on you screen and use that screenshot as the image. You have to do the same thing for every other background color you have on your screen. So save it and reload the page. Now the “no image” error prompt is gone. 😊 hope this helps
Thanks
Oh sick imma try that now
sadly that dont work for me...on mobile its still white and then just has a play button like its making me push play first and doesnt autoplay
@@mark_pliftsdid you copy his whole code? And did you click on the right background video section? Because there are two sections. 1 called “Video” and the other Background video
@@yRyXn-what code the one for FIX whole the backround video one
I came across your channel and honestly you’re a life saver! So straightforward and easy to follow, thank you brother 🙌🏾
Thank you brother and you're very welcome, glad i could help.
Cheers
Immaculately made! This channel is among the BEST Shopify-niche channels out there. Liked and subscribed! 👏Worth every clicks he gets.
Thanks bro, appreciate your job,really helps a lot.
Thank you so much dude! Barakallahu feek
You're very welcome and glad i could help.
Cheers
I can't thank you enough Anas... This playlist is a hidden gem! siiiir 3allah
I am a beginner in Shopify and it's really helps me to understand the core concept. Keep it up. JazakAllah...!!! :)
Best TH-cam Channel ! Thank You
You're very welcome and really glad you think so.
Cheers
MaShaAllah! Anas brother May Allah bless you forever
I can't imagine how much I appreciate your videos
the videos with less view are the most worth, i really appreciate how good this video is 🔝💻
I've clicked the like button 35 times as instructed, hope this helps.
but seriously: good job! thank you.
我也弄好了！！！跟你您的提示和toddjal的讲解，相对应的调整过后太完美了！！感谢感谢
seriously good value channel! my first ever subscribe!
Thanks alot bro you helped my store very much!!!!! keep going brother
You're very welcome and glad i could help, no worries a lot of videos on the way.
Cheers
Hi! My text is still not optimized for mobile and the header is stacking on top of each other. By chance do you have the code to use to help with header/line spacing?
Yeah please the video is ontop of a white bar of space which is on top of the text which should be overlaying the video
Super cool, super quick, super helpful!!! Nice work, man!
Bro Thank You, Man.... Also, I like your accent. Thank you, this video was very helpful
I LOVE YOU MAN Huge Thank you for this video !
Brilliant video!
Thank you
Thank you, bro! It worked!
You're very welcome, glad i could help.
Cheers
LEGEND! This has helped me immensely. Thank you a million!
If I was able to I would hit the like twice. Thank you so much
THANKS ALOT!!! I was looking for this type of videos and i found them, thanks for your content it came in handy my Friend!
God bless you man
Amen and to you too.
New subscriber here! Great video. I've been trying to find a solution for this for months. I'm so happy I found your channel.
man i just found your channel your contetn is amazing and simple thanks so much man بتوفيق يا انس عقبال مليون متابع
Thanks,
Great Content !!
You're welcome, glad you think so
Cheers
bro u helped me set up my first shopify store thank u so much !!
You're very welcome, really glad i could help.
Cheers
thank you so much for this! Works great for me on my desktop and mobile. There's a bit of lag of "no image" to the video, but from reading other comments, that's a my issue due to the size of the mp4. That's fine. I would have loved the music I had with the video, but it's not a big deal. Love your videos and I appreciate you helping :)
same issue here. cut down the video to 3Mb. still doing it. how did you solve it?
Thnaks you so much for the video, really help me out, now mu webside looks really nice.
Awesome, as always, thanks a million for all the vids, I for one, am going to review them all!!!!!
Might be super late, but if you are having issues with the text overlay on MOBILE, go to the section AFTER the line 431 where you can see @ media screen. After that line there will be a bunch of proprieties that you can add or alter to have your result.
Ex. if the text is present, but below the video, change the position from "relative" to "absolute".
Ex. If the text is over the video, but the postition on the video box is wrong, change the padding or instead write the padding this way
padding: 20px 20px 20px 20px;
Just change "20" into another value and the text box will move to put it simply. the order is top-left-bottom-right
Just keep refreshing after any change to see what happened and keep chancing accordily until you have the text like you wanted. By editing this section you are ONLY changing the view of MOBILES (or screens which are less than 767px wide)
somehow letters are still overlay in mobile, decrees the 20 and nothing happen.
Great tutorial and addition to my Shopify store. Thank you!
Thank you so much for your great tutorials!
Worked Perfectly thank you
You're welcome!
Soo helpful and easy to follow thank you!!!
Heyyy, thanks for your great video. I wanted to ask, but this video plays on every section of my product page, for example, or on the contact form, just about everything and I had a question if it would be possible for the video to only run on the homepage? Is there a code for this or could you make a video for it?
Heyyy, Did you find a solution? I have the same question, I would appreciate it if you could help me.
you have to look at the top. there you can see what page you putting the banner in. if you select "standart" page it will put t on every site.
I dont't like indian youtubers because of bad accent, but you gave me a good tutorial and I subscribe your channel.
You are awesome!! This video tutorial was perfect
You're very welcome, glad i could help.
Cheers
I got it thanks for the video's man you are a game changer!!
I added the video and it’s on my website as a welcome video banner. The issue I’m now having is when my website opens theres an error sign that says “no image” just before the video pops up and plays. The error sign is against a white background so it’s very obvious.
Amazing! thank you! Took me ages to work out how to put the text on top of the video.
You're very welcome, glad i could help.
Cheers
Hello Anas! This video just blew me away in its simplicity and effectiveness! Thanks a lot for this valuable resource.
Was wondering if you can instruct me how do I configure the code so that the video will be in the classic "landscape" orientation as opposed to square?
love this dude
Thanks so much for this tutorial! Your instructions are very clear and easy to implement on the website especially with the given code. I did experience the same issue with some other users where only the description appear on mobile. I think I found a fix (not sure if this will work for everyone), but i commented out the .videoBoxInfoTitle, .videoBackground .videoBoxInfoBtn { display: none; } that is right before the . Both the title and button appears on my side after removing this code. Hope this helps!
No, thank you actually for pointing that out because i did add that code to fix a loading issue on refresh theme but didn't ever remember it or think that it might be causing the issue.
You are such legend, i will make a pinned comment for people who's having the same issue.
Thanks again
when i did this my title text ended up being broken and formatted wrong to fix this i just edited the css in side bar. im sure you could go into settings section and add it into the video background section but i just have this up in one spot so i just did the side bar css edit code below fixes text sizing for mobile phones as well as add a border- radius so you can make your button have smoother more rounded corners
H1 {
line-height: 150%;
}
a {
border-radius: 6px;
}
@media all and (max-width: 500px) {
h1 {
font-size: 4rem;
}
}
@media all and (max-width: 340px) {
h1 {
font-size: 2rem;
}
}
@media all and (max-width: 200px) {
h1 {
font-size: 1rem;
}
p {
font-size: 0.3rem;
}
}
hope this helps
Great content brother! However I cannot select the section video background. I suppose they must have deleted it for the free trial users? I will try and get a prepaid creditcard and buy the subscription, as soon as I get it I will let you know. Keep up the valuable content, it's soooo helpfull! I'm even going to check out moren right now!
Edit: I paid It didn’t solve it
Double edit: I apparently didn’t watch from the beginning and didn’t see the coding part 🤦♂️ Don’t ask me how that happened. Only problem now is it doesn’t work for my specific theme, for dawn it does… Any fixes for this?
You are the best! so much helped me, you do great job to humanity)))
Hey Anas thank you for this video you helped me so much! But now I have a trouble to remove the banner video autoplay on all my pages. How can I remove it from all my pages? Thank you🙏🏼
Hi, Im having an issue because it says this everytime Im trying to save the code: Invalid preset "{"en"=>"Video Background"}": cannot include blocks in preset because there are no blocks defined
Hey, yeah this a bug from their end but i found a work around it.
Create that video-background section then copy and paste in the code from a section thats already available on your theme like featured-blog.liquid just like if you want to duplicate it then click save and once its saved then now simply remove that code from video-background and paste my code from the description and it will be saved now without any error.
Cheers
Thanks! Helped so much!
Awesome tutorial! Anyway to customize the line spacing in the title? In mobile, there isn't enough line spacing when the title wraps to the second line. Your tutorials have made my site looks soo much better. Thank you!
Man I love your videos
Thank you so much to help me add the video banner , it's really helpful and clearly !
You're very welcome and glad i could help.
Cheers
Love you dude. ❤
worked perfectly fine, ty
Thankyou for the Code, it works great
thanks bro, really helpfull!! I just subscribed, pura vida!!
Hello hello… thank-you for all your videos! They’ve been super helpful! I have a question thou! Is there any way to have different video banners for different pages?? Thanks :)
My video keeps cutting from top and bottom, while I want the video to cover the entire screen height. Can you guide me on how to fix the height of the video or have the original height.
Very very helpful, thank you so much!!
Thanks bro helped me alot. Liked!
hi i have followed all the steps but when i go to add section it only says video, there is no video background option! Love the video hopefully you can help me
Unable to update the file
Invalid preset "{"en"=>"Video Background"}": cannot include blocks in preset because there are no blocks defined. I can't save it. :( what should i do
same problem
You deserve more subscribers brother.
Awesome video, is there any way to make the video size not as tall as it is? Is there a number in the code that states the height of the box or the window it resides in? Thanks
did you get it?
This is really great, just subbed, very informational.
I just have a question. If you wanna keep a high quality video, but load times might be an issue.
Would you say a 11mb video is too much, or should that be fine?
Im scared that the load times on mobile might be too harsh.
i love you man! you are amazing
You're a G! Thanks bro 💯
thank you so much for this video, it helped a lot!
the link is working to you?
you're the best man!
Absolute Legend
Thank you so much for this video! 🙏
Hi, I asked this question a month ago. How do you disable the video banner from showing up on any other page except the home page? It appears on each of my pages, including product pages etc... I only want the header with the menu drop downs and products to be displayed. PLEASE HELP!
You got the best videos sir
Thank you and i appreciate that.
Cheers
thank you so much, very good tutorial!
great video! i want to ask how can we edit the size of the video background? Mines doesnt look ideal for a big size! Thank you!
Hi Anas, great video, I subscribed immediately! This tutorial and mobile fix worked perfectly. How can I unmute the video playing?
On mobile view, this just leaves a huge white gap in between the video and the next section - is there any way to fix this?
Hi ! I've been watching your videos for a while and I think you're great!
As far as this video is concerned, I followed your instructions to the letter.
I have a problem however, the dimensions of my video do not match at all with the rest and the preview on mobile is worse. my question is how to fix the dimensions? in any case I'm almost there, I miss this little detail.
I thank you. One more, I'm amazed at your kindness and of course I'm a subscriber and I like.
did you get it?
Thank you so much for your yand effort 🎉
You are a legend!
Thanks, this was helpful. One quick question, I have followed your steps on how to fix and show the text on mobile and I prefer not having the heading and the description only the button, but the button isn't showing on mobile. Is there maybe a video on this or a possible fix you can suggest?
amazing video
Thank you, Glad you think so.
Cheers
YOU ARE THE BEST!
This is extremely helpful! Is there a way to reduce the height of video banner??
Glad to know that, That depends on the video resolution, the code sets the video banner size to fit the video perfectly.
Try with different videos to see.
Cheers
@@OnHOWGuy Thank you!
Hello, this video was such a great help! Thank you very much. I have a question: if I would like to change the size of the video (for example double the height, to take up more of the screen) could you please advise on how to do this. Many thanks!
You're very welcome, the banner size changes based on the video resolution/ratio try with other video and see if not let me know.
please let me know in a new comment as its difficult for me to see replies now.
Cheers
Your videos are Amazing and helpful. Unfortunately, I used fix codes but the text is not showing on the Mobile version. Please guide.
I am encountering an error, "Unable to update the file", Invalid preset "{"en"=>"Video Background"}": cannot include blocks in preset because there are no blocks defined.". I googled it and it seems that others as of recently are encountering the same error. Do you have a solution? Thank you so much in advance, your content rocks!
Hey, yeah i just saw this now, it seems like some Shopify update thats doing this.
I will look into it now.
You're welcome.
Cheers
Hey, an update with a fix and it might sound weird but it works as this is a bug from their end.
Create that video-background section then paste the code from a section thats already available on your theme like featured-blog.liquid just like if you want to duplicate it then click save and once its saved then now simply remove that code from video-background and paste my code from the description and it will be saved now without any error.
Cheers
@@OnHOWGuy Hey, the problem still exists, I am getting the same errror
@@OnHOWGuy yepp this worked, thank you so much
@@OnHOWGuy Works!! :)
Thank you for your Videos! Is it possible to add a second button on the banner?
You're very welcome and it is possible if you know little bit of css.
Cheers
Thank you so much..this is a perfect solution !!
You're welcome, glad i could help.
Cheers
LOVE THE VID BRO
Is there a way to make sure the font size of the header changes when in mobile?
thank you for this! Really well done!
You're very welcome, thanks glad you think so.
Cheers
This is awesome, thanks man
You're welcome, glad you think so.
Cheers
Brother plz help it doesn't show me the (background video) when I press Add section, I am doing always exactly as you said.
you're the best thank you so much
thank you for your help. it is greatly appreciated
You're very welcome, glad i could help.
Cheers
great job! thank you