As on my homepage I have added code for a transparent header.. So all my text and logos are in white with the banner video image showing as the background. which is what I want. But I would like a different header background colour on All the other pages Preferably (#c89c2b) without changing the homepage transparent background?
Topic summary
Goal: Keep a transparent header on the homepage (white logo/text over a video banner) and use a solid header background (#c89c2b) on all other pages.
What was done:
- Helpers advised editing theme.liquid and using Liquid conditionals to scope styles by template:
- Homepage: template == ‘index’ (transparent header styles).
- Other pages: else (apply background color #c89c2b).
- Variants shown included {% unless template.name == ‘index’ %} … {% endunless %}. Screenshots indicated correct results.
Outcome:
- The page-specific header color solution worked for the original poster.
Open issue (recent updates):
- The poster asked to change the sticky header (fixed header on scroll) to switch background color on scroll on the homepage only, using color #c89c2b and be able to change it later.
- Follow-up code placeholders were suggested but did not resolve the scroll behavior; no working JavaScript/CSS implementation was provided. This remains unresolved.
New request:
- Another user (Nitro theme) wants a transparent inline banner with white text on the homepage, but a different background on other pages for visibility. Awaiting guidance.
Status: Main request solved; scroll-on-homepage behavior and Nitro theme request pending.
1 Like
Hi @iannetelli
Are you familiar with codes? Would you mind to share your store URL? Thanks!
1 Like
hi there, i am only familiar in the sense of step by step tutorials, i haven’t ever wrote code by hand
My url is www.iannetelli.com
Thanks for the info, chck this one to change the background color on other pages except homepage.
You can 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.
{% unless template.name == 'index' %}
{% endunless %}
And Save.
result:
Hi @iannetelli
Please go to Online Store > Themes > Edit code > open theme.liquid file, after tag, add this code
{% if template == 'index' %}
{% else %}
{% endif %}
Result on homepage
Other pages
Hope this help!
Best regards,
Dan from Ryviu
1 Like
Works perfectly thaankyou, just one more thing? how would I get the sticky header to change background colour but only on scroll? on the homepage?
What color do you want?
(#c89c2b) if thats possiable? if i wonted to change this would you be aable to show me where if that ok?
Please update your code
{% if template == 'index' %}
{% else %}
{% endif %}
I have little issue with this code. Please update again
{% if template == 'index' %}
{% else %}
{% endif %}
1 Like
Hi Dan,
can you help me i have a similar issue, im using Nitro as my theme, in my homepage i have a transparent inline banner and i used white font works just fine but as i click shop or other pages, the wordings arent visible and i’d like to have a different color background for the inline banner in other pages please help me!