Shopify themes, liquid, logos, and UX
Hello all!
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.
Much appreciated.
Solved! Go to the solution
This is an accepted solution.
You can use the custom liquid block just like the custom html block, upside is now you can use liquid in it.
<style>
video {
width: 80%;
display: block;
margin: 0 auto;
}
</style>
<video controls autoplay>
<source src="/media/cc0-videos/flower.webm"
type="video/webm">
<source src="/media/cc0-videos/flower.mp4"
type="video/mp4">
</video>
That'll give you a video element that's 80% width and centered, video code taken directly from MDN Web Docs. Just change out your sources and change whatever styles.
This is an accepted solution.
I have solved this by below code:
<style>
video {
display: block;
margin: 0 auto;
width: 50%;
}
@media screen and (max-width: 800px) {
video {
width: 90%;
}
}
</style>
<video controls autoplay loop playsinline muted>
<source src="https://cdn.shopify.com/s/files/1/0550/0960/7817/files/video_1.mp4?v=1646563222" />
</video>
You can replace the video url with your own which is inside src=""
Note: Above code is valid for both desktop & mobile view.
For reference you can follow this video: https://youtu.be/26FfKhWP4Ag
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024