A user wants to make their Shopify store header transparent exclusively on product pages, with product images extending beneath it (similar to Louis Vuitton’s site). They also want the header to become opaque on hover.
Solution provided:
template.product .header-wrapper was attempted but didn’t work{% if template contains 'product' %}) to the theme.liquid file before the </head> or </body> tagStatus: Resolved. The user confirmed the second approach worked successfully.
Hello!
I would like to make my header transparent in my shopify store, but only in the product page, nothing else.
I want the product pictures on the product page to go under the transparent header, so it looks like this:
https://eu.louisvuitton.com/eng-e1/products/lv-x-tm-speedy-soft-30-nvprod5940160v/M13257
Thanks in advance!
https://r20561-af.myshopify.com/?_ab=0&_fd=0&_sc=1
Password: theaba
And when the header is on hover, make it non transparent, also like in the link attached. Thank you!
The first picture would be perfect, can you send the code for it please?
Hi @Sicilia2025 ,
Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css file Add the provided code at the end of the file.
@media screen and (min-width: 769px) {
template.product .header-wrapper {
position: absolute !important;
background: transparent !important;
width: 100% !important;
}
template.product .header-wrapper:hover {
background: white !important;
position: absolute;
width: 100%;
}
.product--medium:not(.product--no-media) .product__info-wrapper, .product--small:not(.product--no-media) .product__media-wrapper {
margin-top: 147px !important;
}
}
Hi @Sicilia2025 ,
Search for the file theme.liquid. And add this code snippet before tag or :
{% if template contains 'product' %}
{% endif %}
Perfect, thank you! 
