A user wants to implement a transparent header on their Shopify homepage that transitions to a black background when scrolling, similar to their pre-Dawn theme setup. They provided before/after images showing the desired effect.
Initial Solution Provided:
theme.liquid file above the </body> tag{% if template == 'index' %} to target homepage onlyFollow-up Issues:
Additional Resource:
Another participant suggested three OnHOW YouTube tutorials covering:
The discussion remains partially resolved—the transparency works, but the scroll-based background change still needs implementation.
Hi!
I’m wanting the shop banner to start off transparent but have a black background after scrolling, but only on the homepage. If its possible for it to fade in then that would be even better, but no worries if not.
It used to look like this before the new Dawn update:
Hey @DSFilmLabs
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
{% if template == 'index' %}
{% endif %}
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi Moeed,
That looks great but it doesn’t add a black background when I scroll, how do I add that?
Also the absolute width looks great and I’d like to add it to all of the pages if you can help with that as well.
I’m not sure if it is permitted to post YouTube links here, but the channel OnHOW has three videos that might help. He posts the code in his Description box for each video
Brilliant, thank you.
