Hello,
I would like to customize the header (at product page side only) to be transparent. without impacting the header on the others pages.
URL : https://87774f-4.myshopify.com/
I have this ;
And I would like this :
Thanks and Regards
Topic summary
A user wants to make the header transparent only on product pages in their Prestige theme Shopify store, without affecting other pages.
Current Issue:
- The header behavior is inverted from whatâs desired
- Currently: transparent when scrolling down, opaque at the top of the page
- Desired: transparent at the top, then changes when scrolling
Attempted Solution:
A community member provided code to add to the theme.liquid file that targets product pages specifically using conditional logic ({% if template == 'product' %}). However, this code only partially works and produces the opposite scrolling behavior.
Status:
The discussion remains open as the initial solution didnât fully resolve the issue. The user has clarified their requirements with screenshots showing the current vs. desired header behavior, and is awaiting further assistance to correct the scrolling functionality.
1 Like
Hello @Nory78
What is your store preview password?
1 Like
Hello @ZenoPageBuilder
please find my password : diseur
Hi @Nory78
Check this one.
- From your Shopify admin dashboard, click on âOnline Storeâ and then âThemesâ
- Find the theme that you want to edit and click on âActionsâ and then âEdit codeâ.
- In the âtheme. Liquidâ file. Find the tag and paste the code below before the tag.
{% if template == 'product' %}
{% endif %}
- And Save.
Please donât forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like
Hello @Made4uo-Ribe
First of all, thank you very much for the assistance youâre providing me.
The code you provided partially works. However, itâs my fault I wasnât clear enough in my request.
The header becomes transparent when I scroll down and is not transparent when I am at the top of the page. In fact, I would like the opposite behavior.
Please find bellow, the behavior with your code :
Top of page :
When I start scrolling :
