Shopify themes, liquid, logos, and UX
Hello,
I'm using dawn theme, I try to have a video playing in loop full screen that can be customize directly with the shopify customizer. This is working and there is a white logo and white header. The issue come in the next part when I try to have an other version of this header with black logo and black color letter for my other page. As soon as I put the code to do that in the theme.liquid my version of the header for the homepage dissappear and seems to be hidden under laying the video. But the other page works with the second version of the header. Can share the zip file if needed thanks for your help.
Solved! Go to the solution
This is an accepted solution.
I have redo it from scratch and added a header2.liquid and a header-group2.json with a switch on the theme.liquid , so switch between the 2 header is working great. I have also created a new section called video-background.liquid which integrated into the section of the customiser. my only issue now is that I can't figure out how to make my homepage header transparent so the video is showing. Because I can't see the video I supposed the video-background.liquid is working. I have added the code below on the theme.liquid to make sure it is transparent but still can't see the video.
<style>
{% if template == 'index' %}
.section {
background-color: transparent !important;
}
.header-wrapper, .footer-wrapper, .content {
background-color: transparent !important;
}
.page-width {
position: relative;
z-index: 1;
}
.video-background-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}
#background-video {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
transform: translate(-50%, -50%);
}
{% endif %}
</style>
thanks for your help.
Hey GM15,
You mentioned you intially added this through the cusotmiser and then you started adding the alternate one through the theme.liquid? Is there a reason you didn't add it through the customiser still? You will need to add sections to pages through the customisers sections selector
Happy to help and take a look if you can provide a video or screenshot?
This is an accepted solution.
I have redo it from scratch and added a header2.liquid and a header-group2.json with a switch on the theme.liquid , so switch between the 2 header is working great. I have also created a new section called video-background.liquid which integrated into the section of the customiser. my only issue now is that I can't figure out how to make my homepage header transparent so the video is showing. Because I can't see the video I supposed the video-background.liquid is working. I have added the code below on the theme.liquid to make sure it is transparent but still can't see the video.
<style>
{% if template == 'index' %}
.section {
background-color: transparent !important;
}
.header-wrapper, .footer-wrapper, .content {
background-color: transparent !important;
}
.page-width {
position: relative;
z-index: 1;
}
.video-background-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}
#background-video {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
transform: translate(-50%, -50%);
}
{% endif %}
</style>
thanks for your help.
Learn what's possible with customizing Shopify Checkout beyond what's available out of...
By Shopify Feb 19, 20252m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025