Shopify themes, liquid, logos, and UX
Hello, I'm trying to add a video on the top of my home page as a banner, it should loop (autoplay) and it can be from my files on Shopify or through a youtube link.
Things I've tried:
I used a banner section and uploaded a gif but it doesn't look right.
I've also used a custom code that I found somewhere and while it worked for pc, it didn't for Mobile.
I tried using the "video" section that comes with the template but it's just not commerce friendly (no autoplay, clickable, and doesn't cover the screen correctly)
All I'm trying to do is add a simple looping video that is mobile-friendly as a banner.
Any help is appreciated thank you!
Website: https://nutrientc.us/
Password: 121212
Solved! Go to the solution
This is an accepted solution.
Hi there,
Jack from OpenThinking here!
1. From the Shopify admin > Open Settings and then open the Files tab
2. Click the green "Upload files" button
3. Upload your video in .mp4 format
4. Copy the link that was generated for your uploaded file.
Then
1. Open the "Theme editor" and "Add new section"
2. Locate the "Custom liquid" section
3. Copy & paste the following code:
<video autoplay="autoplay" loop="loop" muted defaultMuted playsinline oncontextmenu="return false;" preload="auto" id="openthinkingvideo"><source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4" type="video/mp4"></video><style>#openthinkingvideo { display:block; max-width: 100%; width: 100%; padding: 0; margin: 0 }</style>
4. Replace the URL inside the src="" with the URL of the video you've just uploaded.
5. Save.
let me know if this works for you. If yes: accept my answer and give me a thumbs up! Thank you.
This is an accepted solution.
Hi there,
Jack from OpenThinking here!
1. From the Shopify admin > Open Settings and then open the Files tab
2. Click the green "Upload files" button
3. Upload your video in .mp4 format
4. Copy the link that was generated for your uploaded file.
Then
1. Open the "Theme editor" and "Add new section"
2. Locate the "Custom liquid" section
3. Copy & paste the following code:
<video autoplay="autoplay" loop="loop" muted defaultMuted playsinline oncontextmenu="return false;" preload="auto" id="openthinkingvideo"><source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4" type="video/mp4"></video><style>#openthinkingvideo { display:block; max-width: 100%; width: 100%; padding: 0; margin: 0 }</style>
4. Replace the URL inside the src="" with the URL of the video you've just uploaded.
5. Save.
let me know if this works for you. If yes: accept my answer and give me a thumbs up! Thank you.
When you say theme editor, do you mean Theme > Edit code > Layout > ??? i dont see theme as a folder for code.
Or do you mean Theme > Edit code > Sections > Create new section (Custom liquid) ? -- Im going to try this theory.
EDIT 1: I was wrong with my assumptions and what you meant finally clicked. its
From the main pannle, Themes > Customize > Add section > Custom liquid.
and it worked BEAUTIFULLY, thank you!
Worked amazing for me, thak you!
How do i change the height of the looped video? I want to make it thinner so it does not take up the whole page.
thanks! looking forward to your reply
Fantastic! works like a charm.
I also noticed that the play button pops up when you use this liquid on my phone. (not automatically looping).
Also, is there a way to make a looping video but with text box and button? (refer to photo).
webiste link www.aquald.com
Thanks!
would it be possible to add a text to the front and leave the video in the background?
Thank you for the solution!
The video is playing
Is there a way to make it clickable?
Is there a way to make the text overlay or just making it clickable?
Like when people click on the video, it takes the user some where?
Some clarifications about the questions above.
Hello. Thank you so much for this. I have one question - What if we want to add multiple such loop videos. Could you please help with this?
Thank you
Hi there. It works awesome but how does one unmute do the sound plays? The code says default muted.
much appreciated if there is a fix for this.
this is an amazing solution!!! super simple too. but i have one question 🙂
is there a way to have this video played on just on the homepage? when i use the code and instructions you provided, the video banner shows up on every page. is there a way to have it ONLY on the homepage? thank youuuu 🙂
erica.
I was having the same issue, however the solution i found is a bit complex and does require some tweaking, Solution Please let me know if you found a different solution that is easier to work with as i am still playing with this and it is not perfect
Hi,
Is there anyway to change the height of the video? I see an option for width but cant figure out height.
Thanks
Hi,
nothing about your question but just wondering : did you create your website using Dawn theme ? it looks amazing. and loop video is very cool effect.
have a nice day
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024