I'm building a new online store using the Dawn theme, but have encountered a major obstacle with no solution I can find.
Essentially, I want my home page to have an autoplaying, muted, looped short video on it. I have explored the the built in "video" section as well as tried using a GIF in the "image" section, but encounter clunky "click to watch" functionality with the former and GIF size/quality limitations with the latter. This leads me to believe my only option is a custom HTML element - of which I found a helpful example on this community post.
However, I can't for the life of me find a way to add a custom HTML section/block to the Dawn theme, the way I could with older ones. The closest I see is "Custom Liquid". Even the "edit code" option just takes me to a list of .liquid and .css files, with no apparent way of creating an HTML element. What am I missing here?
Also open to other solutions to this problem, as long as the end result is a nice video playing when customers visit my page! I can upload the video anywhere (YouTube, Drive, Shopify files, etc.) that'll allow this to work.
Solved! Go to the solution
So did you just add this as a section or what? I created a new section called Custom-Video-Player.liquid but nothing showed up so how did you implement it.
Its an already created section in dawn theme called Custom Liquid, you would add that to your homepage and then paste the code into the text area in the customize menu.
Most likely possible, heres the code for the autoplay video i made:
<video autoplay loop muted playsinline width="100%">
<source src="https://cdn.shopify.com/s/files/1/0601/8170/9029/files/video.mp4?v=1633566049" type="video/mp4"> </video>
You could try changing the source to the specific stream you wanna play and try to trigger it, you can get rid of the button if you want I was just messing around with it.
Thanks so much for the code! it works for me.
There are two things though I want to check if you could help:
1) after I replace the banner with the custom liquid, there is a huge white space between the video and header. How can I reduce it?
2) is there a way to add a button on the video like this, for example: https://www.localeclectic.com